WeChat 애플릿의 공용 구성요소의 캡슐화 및 제작 방법

개발 과정에서 일부 공개 기능 코드나 효과를 구성 요소로 하나씩 캡슐화한 다음 사용해야 하는 페이지에서 호출하는 경우가 많습니다.
작은 프로그램 개발을 위해 일부 공개 구성 요소를 캡슐화할 수도 있습니다.

아래에서는 기능 구성 요소 등 아이콘을 클릭하여 확장할 수 있는 메뉴에 대해 설명합니다.

위 그림과 같이 작은 플러그인은 클릭하면 확장되고, 클릭하면 다시 닫히는 버튼이 뜹니다. 닫다.
페이지의 WXML(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>

주로 플러그인의 표면 표시 효과이므로 태그에 적어주시면 됩니다.
페이지의 JS(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    //将接口的进行暴露，方便在外面调用

그런 다음 캡슐화되어 사용할 차례입니다.
필수 WXML 페이지에서 :

을 통해 페이지를 소개한 후,

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

를 통해 사용하세요.
필수 WXML 페이지에서:

var iconList = require('../wdg/iconList');

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

를 통해 해당 JS를 소개합니다.

WeChat 미니 프로그램의 공개 구성요소의 캡슐화 및 제작 방법에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!