微信小程序学习 (5)

需要注意的是,在 properties 中自定义属性的时候要用驼峰命名,但是应用在组件上的时候要记得用小写并且采用 “-” 分割,例如:

properties:{ nowIn:String }

使用:

<assembley now-in="index" bind:assmbleySignal="onAssmbleySignal"></assembly>

PS:自定义事件方法 onAssmbleySignal 在index.js中定义。

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component (更多关于组件)

行为 - Behaviors

通过 behaviors(行为)可以让多个组件之间的“属性”、“数据”、“方法”、“生命周期”实现共享。
并且 behavior 中还可以引用其它的 behaviors。 属性会按照先后进行覆盖,而数据虽然也会覆盖,但是如果类型是对象则会进行合并,生命周期函数也会顺序触发,多个组件调用同一个 behaviors 则生命周期函数也只会执行一次。

module.exports = Behavior({ behaviors:[], properties: { behavior_attr: String }, data: { behavior_data: {} }, methods: { behavior_method: function() { console.log('behavior_method') } }, attached: function() { console.log('behavior-attached'); } });

组件中调用:

var myBehavior = require('./behavior'); Component({ behaviors: [myBehavior], data: { names: Math.random() }, properties: { nowIn: String }, methods: { showData: function(e) { console.log('component showData'); } }, lifetimes: { attached: function() { console.log('component attached'); } } });

behaviors 除了自定义的还有内置的 behaviors

var myBehavior = require('./behavior'); Component({ behaviors: ['wx://form-field'], data: { names: Math.random() }, properties: { nowIn: String } }); 生命周期函数

小程序中的生命周期函数主要有以下几类:

应用实例

页面实例

组件实例

小程序应用的生命周期

状态名 说明
onLuanch   小程序实例初始化  
onShow   小程序启动,或从后台进入前台显示  
onHide   小程序隐藏,或从前台进入后台  
onError   当小程序发生脚本错误,或者 api 调用失败时  
onPageNotFound   当小程序出现要打开的页面不存在的情况  

页面的生命周期

状态名 说明
onLoad   页面资源加载完毕  
onShow   页面显示(但不代表页面已经绘制完毕)  
onReady   页面初次渲染完成  
onHide   页面隐藏  
onUnload   页面被卸载  

PS:需要注意的是小程序中tab切换只是多个页面的显示隐藏切换,而不会重新加载,如果使用 navigator等跳转则每次都会重新加载,显示,渲染。

组件的生命周期

状态名 说明
created   创建组件实例,注意此时无法使用 this.setData 方法  
attached   组件实例进入页面节点树时执行  
ready   组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery )  
moved   组件实例被移动到节点树另一个位置时执行  
detached   组件实例被从页面节点树移除时执行  

生命周期函数的默认流程

假设一个小程序(含有页面,组件)被打开并且正常运行,那么它一般都会经过以下生命周期的改变流程:

life.png-18.3kB

实际上小程序中还存在另一种生命周期:“行为 Behaviors 的生命周期,不过其常用的也就 attached,因此可以再需要的时候自己去查阅文档。

作用域

在小程序中,JS文件,模版文件(动态模板),wxs文件都有自己的独立作用域,模块的导入导出遵循 CommonJS 规范。

多页面数据共享

如果想实现多页面数据共享或者是跨页面数据交互,可以采用以下方式:

app.js 定义 golbalData 对象

利用 Storage 实现

利用页面传参来实现页面间的数据交互。

版本库兼容性

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwdpg.html