[TOC] # 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.页面跳转时参数传递 **在页面跳转到另一个页面时可以传递参数，你可以这样写** 例：在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); } }) ~~~ # 3.代码段传递 ## 1.在小程序里面一般会将一段复写度比较高的代码写成模板。方便进项复写 例： 1.创建模板文件夹（"template"）存放模板inside("template/template-inside/template-inside") **一般模板只需要写.index和.wxss两个内容** ~~~ <!-- template-inside.wxml --> <template name="templateInside"> <p class="tein">hello</p> </template> ~~~ ~~~ /* template-inside.wxss */ .tein{ color: aqua; } ~~~ 2.在index页面（"pages/index/index"）调用模板inside,调用页面的同时要引入.wxss文件内容 ~~~ <!-- index.wxml --> <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，那么你需要这样做 ~~~ <!--index.wxml--> <import src="/template/template-inside/template-inside"></import> <view>hello world</view> <template is="templateInside" data="{{...postList}}"></template> ~~~ 接下来就可以直接在模板页使用msg参数了 ~~~ <!-- template-inside --> <template name="templateInside"> <p class="tein">hello</p> <view>{{msg}}</view> </template> ~~~