微信小程序学习心得

我们写小程序时都要跳转页面的，也会有底部导航来进行切换 

这个时候就要介绍下窗口是怎样配置的

要在app.json文件里写一个tabBer对象 里面在定义一个list数组里面放我们定义的几个需要切换的页面 如下 最多list里面可以定义5个对象

 在微信小程序里我们创建文件挺简单的 如下图

比如说就在上面图片的最下面直接写pages/文件名/文件名 然后保存就行了  这样文件夹就创建成功了

 然后我再说下小程序的文件类型  小程序的文件类型分别有四种

第一种 ：js文件

 这个home.js里面写的是我们从html标签里面传过来的点击事件或者是传递参数时 要把方法定义在onLoad函数里 onload是监听页面加载的

 如上图的pages它就是一个大的对象

它里面包含着data和我们微信小程序众多的声明周期核函数

它里面的data和我们vue里面的data语义差不多都是一样的 都是存放变量的

第二种:json文件

 第三种:wxml文件

 wxml文件里面写的就是html代码 一般wxml文件里只用<images/>  <view/>  <lable/>  <button/>标签

第四种wxss文件

 里面写在wxml文件里面起的class类名 在wxss文件里写css样式

下面我介绍下小程序的生命周期和页面的生命周期

• 应用生命周期

• 页面生命周期

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

》》》应用生命周期

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

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

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

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

5. 小程序后台运行一定时间，或系统资源占用过高，会被销毁。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

在整理本文资料的时候，有点不解，为什么不把小程序监听『销毁』方法开放给开发者，我猜测是因为IOS系统限制『按下Home键时，app从活动状态转入后台，会被挂起』；微信也不例外，只要运行一段时间或把微信客户端进程杀掉，就无法通知小程序应用被销毁。

》》》页面生命周期

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方法。

 微信小程序跳转页面并传递参数的说明

微信小程序跳转提供了6中路由跳转方式：

wx.switchTab(Object object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

即只能跳转到app.json中定义的tabBar页面

wx.redirectTo(Object object)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面

即只能跳转到除了上面注册tabBar的页面

所以wx.switchTab(Object object)和wx.redirectTo(Object object)是相对的

wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

与wx.redirectTo的区别就是是否保存现在的页面，比较适用于详情页，经常需要跳转回去

wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面，可以传入一个参数，作为返回的页数，

wx.navigateBack(2) 返回前2页

wx.reLaunch(Object object)：关闭所有页面，打开应用中的某个页面

<navigate />：直接在wxml中使用该标签包裹，使用url属性指向跳转的页面

传递参数：

直接使用url传递，简单的数据

如：发送给跳转页面

wx.navigateTo({
 
url: '../detail/detail?id=1'
 
})

跳转页面在onLoad()函数会获取到一个option（自定义名）的参数，该参数就包含了

 
Page({
 
onLoad(options) {
 
console.log(options)
 
}
 
})

输出了

如果是对象这类数据比较多的，也可以用该方法，不过需要将对象先转化为字符串，这里使用了JSON.stringify和JSON.parse

还有就是我们在小程序中要存储数据

我们在开发的过程中，常常会用到本地存储，下面我给大家分享一下微信本地存储的使用。

一、数据支持

需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

二、方法

1、同步

（1）wx.setStorageSync();  //存储值

1 try {
2   wx.setStorageSync('key', 'value')
3 } catch (e) {
4 
5  }

（2）wx.removeStorageSync();   // 移除指定的值

1 try {
2   wx.removeStorageSync('key')
3 } catch (e) {
4   // Do something when catch error
5 }

（3）wx.getStorageSync();  // 获取值

1 try {
2   var value = wx.getStorageSync('key')
3   if (value) {
4     // Do something with return value
5   }
6 } catch (e) {
7   // Do something when catch error
8 }

（4）wx.getStorageInfoSync();  // 获取当前 storage 中所有的 key

1 try {
2   const res = wx.getStorageInfoSync()
3   console.log(res.keys)
4   console.log(res.currentSize)
5   console.log(res.limitSize)
6 } catch (e) {
7   // Do something when catch error
8 }

（5）wx.clearStorageSync();  // 清除所有的key

1 try {
2   wx.clearStorageSync()
3 } catch(e) {
4   // Do something when catch error
5 }

2、异步

（1）wx.setStorage();  //存储值

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

1 wx.setStorage({
2   key:"key",
3   data:"value"})

（2）wx.removeStorage();   // 移除指定的值

1 wx.removeStorage({
2   key: 'key',
3   success (res) {
4     console.log(res)
5   }})

（3）wx.getStorage();  // 获取值

1 wx.getStorage({
2   key: 'key',
3   success (res) {
4     console.log(res.data)
5   }})

（4）wx.getStorageInfo();  // 获取当前 storage 中所有的 key

1 wx.getStorageInfo({
2   success (res) {
3     console.log(res.keys)
4     console.log(res.currentSize)
5     console.log(res.limitSize)
6   }})

（5）wx.clearStorage();  // 清除所有的key

1 wx.clearStorage()