[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 }); } }); ```