258资源分享网

只是展示用，建议使用template，组件中涉及到较多的逻辑，建议使用component。 因为template没有自己的js文件，所以在列表中涉及到列表子项独立的操作，建议将列表子项写成component。

示例代码： page文件

<!--Wxml--> <!--引用--> <import src=http://www.yiyongtong.com/archives/"goodlist.wxml"/> <!--使用 goodList为page传入的数据--> <template is="statement-goodlist" data="{{goodList}}"/> 2.wxs文件的使用

Wxs更多的是作为一个过滤器使用，.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的  标签引用。 .wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

示例代码 page文件--类似过滤器效果

<!--wxml--> <!--引用--> <wxs src=http://www.yiyongtong.com/archives/"../../assets/wxs/phonenum.wxs" module="phone" /> <!--使用--> <text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text> 3.生命周期 /** * 生命周期函数--监听页面隐藏 */ onHide: function () { // 前进-跳转到其他页面的时候 }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { // 后退-点击当前页面返回的时候 }

利用这两个生命周期可以解决的问题： 防止用户快速切换页面（A->B）。导致动态设置导航栏中的文字显示出现错误 快速切换页面可能导致A页面中的异步数据还未返回，致使当切换到B页面的时候A数据才返回，使得导航栏显示的文字为A页面的导航栏标题。（即：A页面的导航栏标题为hello，B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面，但是导航栏标题显示的是hello，而不是world）

参考链接: 小程序中的生命周期onHide和onUnload

二、 通信类

如果说数据是汽车的话，传递的通道或方式就是汽车要行驶的道路。所以，数据驱动型的框架，我们少不了要学习如何建设这条"道路"，让"汽车"高速行驶。

1.页面与组件通信 1-1.页面传递内容给组件

page为页面的属性名

components 为组件的外部属性名, 用properties对象接收

页面

<!-- Wxml --> <components-a components="{{page}}"></components-a> <!-- Js --> Page({ data: { page: '父亲pages' } })

组件

父亲pages

<!-- Wxml --> <!-- Js --> Component({ /** * 组件的属性列表 */ properties: { components: { // 属性名 type: String } }, /** * 组件的方法列表 */ methods: { onTap: function () { let page = this.data.components console.log(page) // 我是父亲pages } } }) 1-2.组件传递内容给页面

给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。

页面

<!-- Wxml --> <components-a bind:myevent="onMyEvent"></components-a> <!-- Js --> Page({ // 监听myevent事件 onMyEvent: function (e) { console.log('接收a组件传递的内容:', e.detail) // '我是a组件' } })

组件

<!-- Wxml --> <!-- 在自定义组件"components-a"中 --> <button bindtap="onTap">点击</button> <!-- Js --> Component({ properties: {} methods: { onTap: function(){ var myEventDetail = '我是a组件' this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件 } } }) 2.组件与组件通信 两个无任何关联的组件：通过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下)： 通过上面的方法，用组件 => 页面 => 组件 的方式传递数据。

3.页面之间的通信 3-1.使用全局变量 app.globalData 3-2.使用本地缓存 wx.setStorageSync 3-3.url传递 // A页面-传递数据 // 需要注意的是，wx.switchTab 中的 url 不能传参数。 wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male' }) // B页面-接收数据 // 通过onLoad的option <!-- JS --> ... Page({ onLoad: function(option){ console.log(option.name + 'is' + option.gender) // raymond is male this.setData({ option: option }) } }) 3-4.后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓，是通过获取到其他页面的对象原型， 然后通过原型方法 setData 对当前对象管理的 data 进行修改 ，

示例如下：

// pageE.js Page({ data: { index: 1 } })