Encapsulation and production method of public components of WeChat applet-Mini Program Development-php.cn

Encapsulation and production method of public components of WeChat applet

高洛峰

Release： 2017-02-27 14:24:47

Original

3312 people have browsed it

During the development process, we often encapsulate some public function codes or effects into components one by one, and then call them in the pages that need to be used.
For the development of small programs, we can also encapsulate some public components.

Next we explain a menu that can be expanded by clicking on the icon, such as functional components.

微信小程序公共组件的封装制作方式

As shown in the picture above, a small plug-in, click to expand, click to close again, the button will close.
WXML of the page (APP.wxml)

<template name="widget-dialog-iconList">
    <view class="com-widget-iconList {{close==1?&#39;hideImg&#39;:&#39;&#39;}}"  style="display:flex;flex-direction:row;">
        <view  style="display:flex;flex-direction:row;">
            <view class="left-icon" style="display:flex;flex-direction:row;">
                <view class="left-circle"></view>
                <image class="icon1" src="http://html51.com/static/xcx/v1/goo/md_logo.png"></image>
            </view>
            <view class="middle_icon " style="display:flex;flex-direction:row;">
                <navigator url="../tua/home">
                    <view class="section1">
                        <view><image class="icon2" src="http://html51.com/static/xcx/v1/goo/firsticon.png"></image></view>
                        <view class="text">首页</view>
                    </view>
                </navigator>
                <navigator url="../ord/list">
                    <view class="section2">
                        <view><image class="icon2" src="http://html51.com/static/xcx/v1/goo/orderIcon.png"></image></view>
                        <view class="text">订单</view>
                    </view>
                </navigator>
                <navigator url="../usr/center">
                    <view class="section3">
                        <view><image class="icon3" src="http://html51.com/static/xcx/v1/goo/myself.png"></image></view>
                        <view class="text">我的</view>
                    </view>
                </navigator>
                <view class="right-icon" style="display:flex;flex-direction:row;">
                    <image class="iconright" src="http://html51.com/static/xcx/v1/goo/delAllIcon.png" bindtap="closeAllIcon"></image>
                </view>
            </view>
 
        </view>
    </view>
    <view class="iconOnly {{close==0?&#39;hideImg&#39;:&#39;&#39;}}">
        <image class="iconOnlyPic" src="http://html51.com/static/xcx/v1/goo/md_logo.png" bindtap="showAllIcon"></image>
    </view>
</template>

Copy after login

This is mainly the surface display effect of the plug-in, which can be written in the tag.
JS of the page (APP.js)

var iconList = {};        //设置一个对象名字存放数据
iconList.Wdg= {
            //存放要给VIEW层的页面数据，closeAllIcon ，showAllIcon 是对应的方法   
    data: {               
        index: 0,
        close:0
    },
    closeAllIcon: function(e){
            this.setData({
                close:1
            })
    },
    showAllIcon :function(e){
            this.setData({
                close:0
            })
    }
};
 
module.exports=iconList    //将接口的进行暴露，方便在外面调用

Copy after login

Now that it’s encapsulated, it’s time to use it.
In the required WXML page:
Introduce the Jin page through , and then use it through

<template is="widget-dialog-iconList" data="{{你要传到页面的数据}}"></template>

Copy after login

.
In the required WXML page:

Introduce the corresponding JS through var iconList = require('../wdg/iconList');

var util= require(&#39;../../util/util&#39;);
var Page = new util.Page({
    Wdgs: [iconList.Wdg]
});

Copy after login

Introduce the corresponding file.

For more articles related to the encapsulation and production methods of public components of WeChat mini programs, please pay attention to the PHP Chinese website!