Méthode d'encapsulation et de production des composants publics de l'applet WeChat-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2017-02-27 14:24:47

original

3315 Les gens l'ont consulté

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>

Copier après la connexion

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    //将接口的进行暴露，方便在外面调用

Copier après la connexion

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>

Copier après la connexion

.
Dans la page WXML requise :

Introduisez le JS correspondant

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

Copier après la connexion

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 !