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

 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

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

 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 })

 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 })

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 })

 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 })

 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 })