4.封装模板与自定义组件 · 微信小程序

# 1.模板数据导出引入 ## 1.全局数据的调用例：现有一个数据local.js（data/local.js）,想在其他页面index（"pages/index/index"）里调用里面的数据，那么你可以这样做 ### 1.将local.js里想要传递的内容整体装在一个数组里（数组名自定义即可） ``` var local_database = [ { date:"2017", title:"title1" }， { date:"2018", title:"title2" } ] module.exports = { /* 自定义数组名postLIst */ postList: local_database } ``` ### 2.在index.js接收数据postList ``` /* 页面间导入pages外的页面只能用相对路径 */ var local = require("../../data/local"); var postList = local.postList; ``` ## 2.调用别的页面里方法例：现有一个数据local.js（data/local.js）,想在其他页面index（"pages/index/index"）里调用里面的方法，那么你可以这样做 ### 1.在local.js写你的方法 ``` function a(){conosle.log("you are beautiful")} function b(){console.log("how beautiful you are")} /* 默认导出方法 */ export default { a, b } ``` ### 2.在index（"pages/index/index"）里调用方法 ``` /* 页面间导入pages外的页面只能用相对路径 */ import local from "../../data/local"; const fa= local.a; const fb= local.b; fa(); fb(); ``` # 2.微信小程序组件Component数据导出引入 > 例：（文件夹名与文件名都可以自定义，本例只是为了'见名知义'）先准备好一个页面`index` `（"pages/index/index"）`,在`pages`外建一个文件夹`components`，该文件夹里建一个文件夹`success`，在“微信web开发工具里”，右键`success`文件夹选择新建一个`"Component"`,文件名输入`index`（为`index`建立组件，所以名字为`index`），回车即可出现四个文件 ## 1.调用组件(在index页面调用组件) 在`success`下 `index.wxml`写组件内容 ``` <icon type="success" size="23" color="#e1de" catchtap="handleClick"></icon> ``` 在success下 index.js写组件的属性、数据以及方法 ``` // components/success/index.js Component({ /** * 组件的属性列表 */ // 可接收父组件传来的参数 properties: { }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表(组件方法都会写在methods里) */ methods: { handleClick(){ console.log("组件可以用组件的js"); } } }) 在index.json 注册组件 { "usingComponents":{ "v-success":"/components/success/index" } } ``` 在index.wxml引入组件 ```  <v-success></v-success> ``` ## 2.传递值给组件（在index里自定义属性传递值给组件）在index.js里给属性及属性值 ``` Page({ data: { child: "how are you?" } }) 在index.wxml内自定义属性名并传递属性值 <v-success param="{{child}}"></v-success> 在success下 index.js接收符组件的参数 // components/success/index.js Component({ /** * 组件的属性列表 */ // 可接收父组件传来的参数 properties: { param:{ type:String } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表(组件方法都会写在methods里) */ methods: { handleClick(){ console.log("组件可以用组件的js"); } } }) ``` 在success下index.wxml使用得到的来自index的属性值 ``` <icon type="success" size="23" color="#e1de" catchtap="handleClick"></icon> <text> {{param}} </text> ``` ## 3.页面跳转时参数传递 > 在页面跳转到另一个页面时可以传递参数，你可以这样写 > 例：在index（"pages/index/index"）页面点击button（bindtap="click"），跳转到另一个页面welcome（"pages/welcome/welcome"），并传递三个参数type、title和name（在传递三个及三个以上的参数时都用'&'连接符连接）在index.js里这样写 ``` Page({ data: { id:10, title: "you are beautiful", name: "xiaopi" }, click(){ var id = this.data.id; var title = this.data.title; var name = this.data.name; wx.navigateTo({ url: '/pages/welcome/welcome?id='+id+"&count="+count+"&name="+name }) } }) ``` 在welcome里接收这两个属性在welcome.js里这样写 ``` Page({ onLoad(option){ var title = option.title; var id = option.id; var name = option.name; /* 在控制台查看是否传入成功 */ console.log(title); console.log(id); console.log(name); } }) ``` ## 4.代码段传递 ### 1.在小程序里面一般会将一段复写度比较高的代码写成模板。方便进项复写例： 1.创建模板文件夹（"template"）存放模板inside("template/template-inside/template-inside") 一般模板只需要写.index和.wxss两个内容 ```  <template name="templateInside"> <p class="tein">hello</p> </template> /* template-inside.wxss */ .tein{ color: aqua; } ``` 2.在index页面（"pages/index/index"）调用模板inside,调用页面的同时要引入.wxss文件内容 ```  <import src="/template/template-inside/template-inside"></import> <view>hello world</view> <template is="templateInside"></template> @import "/template/template-inside/template-inside.wxss"; ``` ### 2.关于模板页传参问题在使用模板时可以给模板页传递当前需使用模板页面的data内容例如：在上例中我们在index.js下data里存放了一个对象postList ``` /* index.js */ Page({ data:({ postList:{ msg:"where are you" } }) }) ``` 想在模板页使用到msg，那么你需要这样做 ```  <import src="/template/template-inside/template-inside"></import> <view>hello world</view> <template is="templateInside" data="{{...postList}}"></template> 接下来就可以直接在模板页使用msg参数了  <template name="templateInside"> <p class="tein">hello</p> <view>{{msg}}</view> </template> ```