微信小程序基础总结

一、微信小程序生命周期

在js文件中帮我们生成的生命周期函数有

onLoad：页面加载

onReady：页面初次渲染完成

onShow：页面展示

onHide：页面隐藏

onUnload：页面卸载

第一次来到页面A， onLoad--A，onShow--A，onReady--A。

页面A切换tab到页面B，onHide--A，onLoad--B, onShow--B，onReady--B。

点击从页面B跳转到页面C, onHide--B，onLoad--C，onShow--C，onReady--C。

点击页面C的返回，返回到页面B。onUnload--C，onShow--B。

点击底部tab，从页面B跳转到页面A。onHide--B，onShow--A。

从上面的打印信息得知，页面完全销毁时，会直接调用unload。而页面如tab页面，切换时并不销毁，只是暂时不显示，则调用onHide。

二、小程序页面传值

从A页面到B页面，是启动式跳转，则可以通过在navigateTo方法里参数url中拼接参数实现传递。

来到B页面后通过onLoad方法中的options参数获取传递的参数。

之后从页面B点击返回按钮返回页面A，则需要通过getCurrentPages方法获取到所有展示页面，这是一个数组。数组最后一个就是栈顶的页面。

通过pages.length-1和pages.length-2获取当前页面与返回的页面。

这样可以直接调用page的setData方法了。

由于页面是返回的，无需创建，也就不会走onLoad方法，而是直接调用onShow。

这在多页面之前切换传值时尤其要注意。

通过本地存储传值。

微信小程序规定本地存储最大值为10MB。

通过wx.setStorageSync方法和wx.getStorageSync方法以键值对方式存储到本地缓存。

全局app对象，在app.js文件中定义数据，之后通过getApp()方法获取到app对象，之后在对app对象中的数据进行赋值与获取即可。

三、点击事件传值

在wxml文件中，使用button等组件时，使用data-xxx方式定义参数名称，之后使用=赋值。

如data-name='haha'

之后在js文件中的点击事件函数里，通过e.currentTarget.dataset方式获取到点击事件传递的值。其实这些值应该是绑定在组件上了，不只支持点击事件，任何事件都可以通过获取到target来获取到数据。