微信小程序功能开发梳理笔记

简单的项目结构：

 小程序框架

　　注册小程序

　　每个小程序在根目录下都仅有一个app.js文件，且在该文件中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

　　整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

 1 // app.js
 2 App({
 3   onLaunch (options) {
 4     // Do something initial when launch.
 5   },
 6   onShow (options) {
 7     // Do something when show.
 8   },
 9   onHide () {
10     // Do something when hide.
11   },
12   onError (msg) {
13     console.log(msg)
14   },
15   glob

View Code

1 // xxx.js
2 const appInstance = getApp()
3 console.log(appInstance.globalData) // I am global dat

View Code

　　

注册页面

　　1、对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。简单的页面可以使用 Page() 进行构造。

 1 //index.js
 2 Page({
 3   data: {
 4     text: "This is page data."
 5   },
 6   onLoad: function(options) {
 7     // 页面创建时执行，一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
 8   },
 9   onShow: function() {
10     // 页面显示/切入前台时触发
11   },
12   onReady: function() {
13     // 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行
14   },
15   onHide: function() {
16     // 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
17   },
18   onUnload: function() {
19     // 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
20   },
21   onPullDownRefresh: function() {
22     // 触发下拉刷新时执行
23     // 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
24     // 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
25     // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
26   },
27   onReachBottom: function() {
28     // 监听用户上拉触底事件
29     // 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance
30     // 在触发距离内滑动期间，本事件只会被触发一次
31   },
32   onShareAppMessage: function () {
33     // 监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
34   },
35   onPageScroll: function(Object object) {
36     // 页面滚动时执行,监听用户滑动页面事件。
37     // object参数为scrollTop（页面在垂直方向已滚动的距离,单位px）
38     // 请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时
39   },
40   onResize: function() {
41     // 页面尺寸变化时执行
42   },
43   onTabItemTap(item) {
44     // tab 点击时执行
45     console.log(item.index)
46     console.log(item.pagePath)
47     console.log(item.text)
48   },
49   // 事件响应函数
50   viewTap: function() {
51     this.setData({
52       text: 'Set some data for updating view.'
53     }, function() {
54       // this is setData callback
55     })
56   },
57   // 自由数据
58   customData: {
59     hi: 'MINA'
60   }
61 })

View Code

 　　2、页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。（类似于vue的minix混入属性）

　　 　　组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：

• • 　　如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法；
  • 　　如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
  • 　　生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次

 1 // my-behavior.js
 2 module.exports = Behavior({
 3   data: {
 4     sharedText: 'This is a piece of data shared between pages.'
 5   },
 6   methods: {
 7     sharedMethod: function() {
 8       this.data.sharedText === 'This is a piece of data shared between pages.'
 9     }
10   }
11 })

View Code

1 // page-a.js
2 var myBehavior = require('./my-behavior.js')
3 Page({
4   behaviors: [myBehavior],
5   onLoad: function() {
6     this.data.sharedText === 'This is a piece of data shared between pages.'
7   }
8 })

View Code

 　　3、使用Component构造器构造页面

　　Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。　

 1 Component({
 2   data: {
 3     text: "This is page data."
 4   },
 5   methods: {
 6     onLoad: function(options) {
 7       // 页面创建时执行
 8     },
 9     onPullDownRefresh: function() {
10       // 下拉刷新时执行
11     },
12     // 事件响应函数
13     viewTap: function() {
14       // ...
15     }
16   }
17 })

View Code

　　这种创建方式非常类似于自定义组件，可以像自定义组件一样使用 behaviors 等高级特性。　　

 1 Component({
 2 
 3   behaviors: [],
 4 
 5   properties: {
 6     myProperty: { // 属性名
 7       type: String,
 8       value: ''
 9     },
10     myProperty2: String // 简化的定义方式
11   },
12   
13   data: {}, // 私有数据，可用于模板渲染
14 
15   lifetimes: {
16     // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
17     attached: function () { },
18     moved: function () { },
19     detached: function () { },
20   },
21 
22   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
23   attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
24   ready: function() { },
25 
26   pageLifetimes: {
27     // 组件所在页面的生命周期函数
28     show: function () { },
29     hide: function () { },
30     resize: function () { },
31   },
32 
33   methods: {
34     onMyButtonTap: function(){
35       this.setData({
36         // 更新属性和数据的方法与更新页面数据的方法类似
37       })
38     },
39     // 内部方法建议以下划线开头
40     _myPrivateMethod: function(){
41       // 这里将 data.A[0].B 设为 'myPrivateData'
42       this.setData({
43         'A[0].B': 'myPrivateData'
44       })
45     },
46     _propertyChange: function(newVal, oldVal) {
47 
48     }
49   }
50 
51 })

View Code