weapp
v2
微信小程式元件和功能封裝,簡潔的元件化編程
基於微信的Component自訂元件封裝,簡潔的元件化編程,關於Component自訂元件參考Component API。
注意需要開啟微信開發者工具中的ES6轉ES5功能,請使用大於1.6.3
版本的小程式基礎庫,並將微信更新至最新版本。
如果你需要一套程式碼開發微信小程式和支付寶小程序,那麼mpapi 外掛程式也許能協助你(微信小程式和支付寶小程式API 相容外掛程式)
請用微信開發者工具開啟src
目錄
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents
// page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
}
<!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
以下是展示Tab
元件的簡單使用,具體範例參考專案內部pages/weapp/tab
中程式碼。其它類型元件使用基本和這種呼叫方式類似。
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
}
<!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
// tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} )
浮動提示,普遍在行動開發中使用的Toast元件,與小程式的showToast不同
title
提示訊息delay
自動關閉的延遲時間,單位毫秒,預設: 1500
hide
關閉之後回調 < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
選項卡
list
選項卡標題active-index
選取的索引,預設: 0
theme
主題樣式,預設為空,可傳入weapp-tab
或其它自訂樣式change
切換的回調,參數event
,其中event.detail.activeIndex
為選取的目前索引 < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />
城市選擇
region
提示訊息change
切換的回調,參數event
,其中event.detail.region
為所選的區域信息 < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />
載入更多、暫無資料提示,通常會配合上拉資料清單使用
icon-type
小程式icon組件的type類型,預設: search
status
目前的狀態,可選值: loading
載入中、 nomore
沒有更多、 empty
暫無數據,預設: loading
empty-txt
暫無數據提示文字,預設:暂无数据
loading-txt
載入中提示文字,預設:正在加载
nomore-txt
沒有更多提示文字,預設:没有更多数据了
< weapp-loader status =" {{status}} " />
彈出式選單,最多12個可支援的箭頭方位,滿足絕大部分場景
list
選單列表page-selector
整個頁面最外層容器的CSS的選擇器,預設為.page
elem-id
根據哪個元素定位,元素的IDdir
箭頭方位,可選值tl tc tr rt rc rb bl bc br lt lc lb
,分別代表上右下左中,組合而成的12個方位tl
對應top-left
tc
對應top-center
tr
對應top-right
rt
對應right-top
rc
對應right-center
rb
對應right-bottom
bl
對應bottom-left
bc
對應bottom-center
br
對應bottom-right
lt
對應left-top
lc
對應left-center
lb
對應left-bottom
select
選擇每項的回調,參數event
,其中event.detail.item
為選取的目前項show
顯示的回調hide
隱藏的回調 < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />
頂部提示
title
提示訊息type
提示類型, success
成功、 error
失敗、 warn
警告,預設: default
delay
自動關閉的延遲時間,單位毫秒,預設: 1500
hide
關閉之後回調 < weapp-toptip type =" {{ type }} " title =" {{ title }} " />
日曆選擇,支援多個月份滑動切換展示,左右點擊切換月份,切換到今天
start-date
開始日期end-date
結束日期current-date
預設選擇的日期show
是否一開始就顯示,預設: false
current
預設顯示第幾個月,從開始日期的月份為第一個月,預設: 0
change
選取日期的回呼函數,參數event
,其中event.detail.currentDate
為選取的目前日期 < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />
頁面轉寄分享,除去每個頁面的繁雜配置,使用起來更加簡單高效,支援頁面傳遞參數options
title
顯示的標題url
轉發的頁面位址,預設為目前頁面位址 import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ;
類型判斷,傳回Number
、 String
、 Boolean
、 Array
、 Object
、 Function
等型別字串
value
任意需要判斷的參數 import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Date
將物件解析成url字串
urlObject
參數對象,要轉換成字串參數的對象unEncodeURI
不使用編碼,預設使用編碼encodeURIComponent
import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24
將url字串解析成對象,與common.param
使用相反
urlString
位址,有url參數的位址unDecodeURI
不使用解碼,預設使用解碼decodeURIComponent
import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;
頁面跳轉,優化防止快速點擊開啟兩個頁面,支援物件形式傳url參數,分別對應小程式的wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch
url
頁面地址params
頁面參數對象 import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ;
字體圖示使用FontAwesome,CSS元件樣式使用WeUI
MIT,享受開源的樂趣。