[toc] ### 1. wxml的封裝 1. 將所需的wxml代碼封裝在template中，注意template中的代碼不會顯示，只有被調用才會生效 ``` <template name="banner"> <swiper indicator-dots="true" autoplay="true" current="0" interval="2000" duration="1000" bindchange=""> <block wx:for="{{imgUrl}}"> <swiper-item class="" item-id=""><image src="{{item.src}}"></image></swiper-item> </block> </swiper> </template> ``` 2. 在所需頁面調用 ``` <import src="/pages/template/template.wxml"></import> //引入 <template is="banner" data="{{imgUrl}}"></template> //放在所需位置 ``` ### 2. wxss的封裝 1. 將所需的樣式表單獨放置 2. @import 即可 ``` @import "/pages/template/template.wxss" ``` ### 3. js的封裝 1. 將所需封裝的js對象輸出出來 ``` var imgUrl = [ {src: "/images/1.jpg"}, {src: "/images/2.jpg"}, {src: "/images/3.jpg"} ]; module.exports = { imgUrl:imgUrl }; ``` 2. 再所需的js中引入 ``` var local = require("../data/local.js"); //引入 Page({ onLoad:function() { var bannerData = local.imgUrl; console.log(bannerData); this.setData({ imgUrl:bannerData }); } }); ```