微信小程序开发入门（一）

 小程序学习入门--（一）

最近自己学习微信小程序的过程当中自己总结出来的知识点，我会不断地更新和完善！

小程序的开发工具

• 一台电脑
• 熟悉HTML、CSS、JS基本语法
• 开发工具：
• 微信web开发者工具 
• 官方demo下载

 

 

 

小程序代码分析： 小程序通用文件（全局通用文件） app.js app.json app.wxss

小程序页面级别文件（局部文件） index,js index,json index.wxss index.wxml

配置层（.json） 视图层（.wxss,.wxml） 逻辑层（.js）

 

再根目录下的json中，谁在前面，谁在启动时显示主页状态

 

 逻辑层

 

 

APP(object)

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

 

 

APP（object）介绍参数：

 

 

onLaunch监听小程序出发，只能执行一次

 

onShow  监听小程序显示

 

onHide 是监听小程序隐藏，小程序离开返回时，可以说隐藏状态了。只有离开显示onHide会执行

 

 

onError 监听小程序发送错误，发送到后端。监听小程序是否正常执行。

APP（object）含糊里面可以放以上的5个参数来回调，也可以放在自定义函数和变量，完全没问题

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。opi

 

option 

---

                                                  

data	Object	页面的初始数据
onLoad	Function	生命周期回调—监听页面加载
onShow	Function	生命周期回调—监听页面显示
onReady	Function	生命周期回调—监听页面初次渲染完成
onHide	Function	生命周期回调—监听页面隐藏
onUnload	Function	生命周期回调—监听页面卸载
onPullDownRefresh	Function	监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
onResize	Function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
其他	Any	可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

 

生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程

 

应用生命周期

页面生命周期

应用生命周期影响页面生命周期

 

应用生命周期

 

 

1-用户首次打开小程序，触发 onLaunch（全局只触发一次）。

2-小程序初始化完成后，触发onShow方法，监听小程序显示。

3-小程序从前台进入后台，触发 onHide方法。

4-小程序从后台进入前台显示，触发 onShow方法。

5-小程序后台运行一定时间，或系统资源占用过高，会被销毁。 前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

 

 

页面生命周期

 

 

 

1-小程序注册完成后，加载页面，触发onLoad方法。

2-页面载入后触发onShow方法，显示页面。

3-首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4-当小程序后台运行或跳转到其他页面时，触发onHide方法。

5-当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6-当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

 

应用生命周期影响页面生命周期

 

 

 

1-小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

2-当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

3-当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

 

总结：

• onLoad: 页面加载。
  1)一个页面只会调用一次。
  2)参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
• onShow: 页面显示
  1)每次打开页面都会调用一次。
• onReady: 页面初次渲染完成
  1)一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  2)对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
• onHide: 页面隐藏
  1)当navigateTo或底部tab切换时调用。
• onUnload: 页面卸载
  1)当redirectTo或navigateBack的时候调用。