weapp
v2
WeChat mini program components and function encapsulation, simple component programming
Based on WeChat's Component custom component encapsulation , simple component programming, please refer to Component API for Component custom components.
Note that you need to enable the ES6 to ES5 conversion function in the WeChat developer tools. Please use a mini program base library greater than version 1.6.3 , and update WeChat to the latest version.
If you need a set of codes to develop WeChat applet and Alipay applet, then the mpapi plug-in may be able to assist you (WeChat applet and Alipay applet API compatible plug-in)
Please use WeChat developer tools to open the src directory
├─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 " /> The following shows the simple use of the Tab component. For specific examples, refer to the code in pages/weapp/tab inside the project. The use of other types of components is basically similar to this calling method.
// 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 )
}
} ) Floating prompt, a Toast component commonly used in mobile development, is different from the mini program's showToast
title prompt messagedelay Delay time for automatic shutdown in milliseconds, default: 1500 hide is closed < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />tab
list tab titleactive-index selected index, default: 0theme theme style, empty by default, can be passed in weapp-tab or other custom styles change switching callback, parameter event , where event.detail.activeIndex is the current selected index < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />City selection
region prompt information change switching callback, parameter event , where event.detail.region is the selected region information < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />Load more, no data prompt, usually used with pull-up data list
icon-type The type of the applet icon component, default: searchstatus current status, optional values: loading , nomore , empty , no data yet, default: loadingempty-txt has no data prompt text. Default:暂无数据loading-txt loading prompt text, default:正在加载nomore-txt has no more prompt text, default:没有更多数据了 < weapp-loader status =" {{status}} " /> Pop-up menu with up to 12 supported arrow directions, meeting most scenarios 
listpage-selector The CSS selector for the outermost container of the entire page, the default is .pageelem-id is positioned according to, the ID of the elementdir arrow direction, optional values tl tc tr rt rc rb bl bc br lt lc lb , respectively representing the 12 combined directions of top, right, bottom, left, middletl corresponds to top-lefttc corresponds to top-centertr corresponds to top-rightrt corresponds to right-toprc corresponds to right-centerrb corresponds to right-bottombl corresponds to bottom-leftbc corresponds to bottom-centerbr corresponds to bottom-rightlt corresponds to left-toplc corresponds to left-centerlb corresponds to left-bottom select callback for each item, parameter event , where event.detail.item is the current item selectedshow callbackhide hidden callback < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />Top tips
title prompt informationtype prompt type, success , error , warn , default: defaultdelay Delay time for automatic shutdown in milliseconds, default: 1500 hide is closed < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> Calendar selection supports sliding switching display of multiple months. Click left and right to switch months and switch to today. 
start-date start dateend-date end datecurrent-date default selected dateshow is displayed from the beginning, default: falsecurrent displays the first month by default. The month from the start date is the first month. Default: 0 change the callback function of the selected date, parameter event , where event.detail.currentDate is the current selected date < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />Page forwarding and sharing eliminates the complicated configuration of each page, making it simpler and more efficient to use. It supports page passing parameter options.
title displayedurl , the default is the current page address import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; Type judgment, returning Number , String , Boolean , Array , Object , Function and other type strings
value is any parameter that needs to be judged 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 ( ) ) ; // DateParse object into url string
urlObject parameter object, an object to be converted into a string parameterunEncodeURI does not use encoding, encodeURIComponent is used by default. 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 Parse the url string into an object, as opposed to using common.param
urlString address, address with url parametersunDecodeURI does not use decoding, and uses decodeURIComponent by default. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;Page jump, optimized to prevent quick clicks to open two pages, supports object form to pass url parameters, corresponding to wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch of the mini program respectively.
url page addressparams page parameter object import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; Use FontAwesome for font icons and WeUI for CSS component styles.
MIT, enjoy the fun of open source.
