Kapselung und Produktionsmethode öffentlicher Komponenten des WeChat-Applets

Während des Entwicklungsprozesses kapseln wir häufig einige öffentliche Funktionscodes oder Effekte einzeln in Komponenten und rufen sie dann auf den Seiten auf, die verwendet werden müssen.
Für die Entwicklung kleiner Programme können wir auch einige öffentliche Komponenten kapseln.

Nachfolgend erläutern wir ein Menü, das durch einen Klick auf das Icon erweitert werden kann, etwa um funktionale Komponenten.

Wie im Bild oben gezeigt, ein kleines Plug-In, klicken Sie zum Erweitern und klicken Sie zum erneuten Schließen, die Schaltfläche wird geöffnet schließen.
WXML (APP.wxml) der Seite

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

Dies ist hauptsächlich der Oberflächenanzeigeeffekt des Plug-Ins, schreiben Sie ihn einfach in das Tag.
Das JS der Seite (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    //将接口的进行暴露，方便在外面调用

Dann ist es gekapselt und es ist Zeit, es zu verwenden.
In der erforderlichen WXML-Seite:
importieren Sie die Seite über

und verwenden Sie sie dann über

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

.
Auf der erforderlichen WXML-Seite:

Führen Sie das entsprechende JS

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

über var iconList = require('../wdg/iconList') ein und führen Sie die entsprechende Datei ein.

Weitere Artikel zu den Kapselungs- und Produktionsmethoden öffentlicher Komponenten von WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!