Méthode d'encapsulation et de production des composants publics de l'applet WeChat

Au cours du processus de développement, nous encapsulons souvent certains codes ou effets de fonctions publiques dans des composants un par un, puis les appelons dans les pages qui doivent être utilisées.
Pour le développement de petits programmes, nous pouvons également encapsuler certains composants publics.

Ci-dessous, nous expliquons un menu qui peut être développé en cliquant sur l'icône, comme les composants fonctionnels.

Comme le montre l'image ci-dessus, un petit plug-in, cliquez pour développer, puis cliquez pour fermer à nouveau, le bouton fermer.
WXML (APP.wxml) de la page

<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>

Il s'agit principalement de l'effet d'affichage en surface du plug-in, il suffit de l'écrire dans la balise.
Le JS de la 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    //将接口的进行暴露，方便在外面调用

La prochaine étape est de l'encapsuler, il est temps de l'utiliser.
Dans la page WXML requise :
importez la page via

, puis utilisez-la via

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

.
Dans la page WXML requise :

Introduisez le JS correspondant

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

via var iconList = require('../wdg/iconList'); et introduisez le fichier correspondant.

Pour plus d'articles liés aux méthodes d'encapsulation et de production des composants publics des mini-programmes WeChat, veuillez faire attention au site Web PHP chinois !