男同互操gay射视频在线看,日韩一区二区三区不卡视频,牛夜精品久久久久久久

導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一...

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。

在開發的過程中，我們經常會把一些公共的功能代碼或者效果，封裝成一個一個的組件，然后在需要用到的頁面中調用就可以了。
對于小程序的開發，我們也可以封裝一些公共的組件。

下面我們講解一個可以，點擊圖標展開的菜單，這樣功能組件。

微信小程序公共組件的封裝制作方式

如上圖所示，一個小插件，單擊是展開，再單擊關閉的時候，按鈕關閉。
頁面的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://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?'hideImg':''}}">
        <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');引入對應的JS

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

引入對應文件。

更多微信小程序公共組件的封裝制作方式相關文章請關注PHP中文網！

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 應用軟件教程 > 詳細頁面

微信小程序公共組件的封裝制作方式

本類教程下載

系統下載排行