微信小程序 制作小組件
對于我們?nèi)粘Ｖ幸恍┕驳臇|西可以封裝成組件，然后在各個頁面使用。對于小程序，我們也可以封裝我們需要的一些公共的東西。
這里我們講解一個小插件。
如上圖所示，一個小插件，單擊是展開，在單擊關(guān)閉的時候，按鈕關(guān)閉。
頁面的WXML （APP.wxml）
<template name="widget-dialog-iconList"> <view class="com-widget-iconList {{close==1?'hideImg':''}}" 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://m.dev.vd.cn/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://m.dev.vd.cn/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://m.dev.vd.cn/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://m.dev.vd.cn/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://m.dev.vd.cn/static/xcx/v1/goo/delAllIcon.png" bindtap="closeAllIcon"></image> </view> </view> </view> </view> <view class="iconOnly {{close==0?'hideImg':''}}"> <image class="iconOnlyPic" src="http://m.dev.vd.cn/static/xcx/v1/goo/md_logo.png" bindtap="showAllIcon"></image> </view></template>這里主要是插件的壓面展示效果，都寫在<template>標(biāo)簽里面就可以了。
頁面的JS （APP.js）
var iconList = {}; //設(shè)置一個對象名字存放數(shù)據(jù)iconList.Wdg= { //存放要給VIEW層的頁面數(shù)據(jù)，closeAllIcon ，showAllIcon 是對應(yīng)的方法 data: { index: 0, close:0 }, closeAllIcon: function(e){ this.setData({ close:1 }) }, showAllIcon :function(e){ this.setData({ close:0 }) }};module.exports=iconList //將接口的進行暴露，方便在外面調(diào)用接下來封裝好了，就是該怎么使用了。
在需要的WXML頁面：
通過 引入斤頁面，再通過
<template is="widget-dialog-iconList" data="{{你要傳到頁面的數(shù)據(jù)}}"></template>進行使用。
在需要的WXML頁面：
通過var iconList = require('../wdg/iconList');引入對應(yīng)的JS
var util= require('../../util/util');var Page = new util.Page({ Wdgs: [iconList.Wdg]});引入對應(yīng)文件。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
