小程序开发总结03 – 数据传递与缓存
Write By CS逍遥剑仙
我的主页: csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257
1. 基本事件传递参数
和H5不同,元素上绑定事件只能传入事件名,不能直接传参,需用通过dataset传参
<code><view bindtap="funName" data-variable="{{variable}}"></view> // 方法中获取dataset参数 funName(e){ const variable = e.currentTarget.dataset.variable; }</code>
2. 页面间传参
页面间传递参数通过url参数传递,页面导航方式见官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html
<code>let id = 1; wx.navigateTo({ url: '/pages/test/test?id='+id }) wx.redirectTo({ url: '/pages/test/test?id='+id })</code>
接收参数,通过onLoad参数获取
<code>Page({ onLoad(options){ console.log(options.id); } })</code>
3. 组件通信 – 页面向组件传参
页面引用自定义组件,参数直接作为属性传递,下面引用的是一个名为"csxiaoyao"的组件,注意参数命名方式
<code><csxiaoyao schedule-data="{{item}}" new-page="{{true}}"></csxiaoyao></code>
组件中获取参数,并监控参数变化重新渲染
<code>Component({ properties: { scheduleData: { // 属性名 type: Object, observer: '_propertyChange' // 监控属性变化,为字符串 } newPage: Boolean }, data:{ scheduleData:{}, newPage: true }, ready() { this.setData({ scheduleData: this.properties.scheduleData, newPage: this.properties.newPage }); }, methods: { _propertyChange (newVal, oldVal) { ... } } })</code>
4. 组件通信 – 组件调用父页面方法(含form表单)
一个合理的组件往往只负责数据的渲染显示,而数据的获取、修改等涉及修改服务端数据的事件,应全部交由page页面处理,触发page中对应的事件,此外,如果需要后端处理消息推送,则必须在每次提交请求时带上表单id
带form表单的组件wxml,则提交的事件中可以获取到formid
<code><form bindsubmit="formSubmit" report-submit> <button formType="submit">提交</button> </form></code>
组件中的事件处理
<code>formSubmit(event) { // 事件选项 const eventOption = { composed: true } var eventDetail = { data: ..., // 如果需要后端处理消息推送,则必须在每次提交请求时额外带上表单id formId: event.detail.formId } // 调用父页面的cancel事件 this.triggerEvent('component_cancel', eventDetail, eventOption); }</code>
父页面调用组件,绑定事件
<code><csxiaoyao bind:component_cancel="cancel"></csxiaoyao></code>
父页面中的对应事件处理
<code>cancel(event) { const formId = eventDetail.detail.formId; const data = eventDetail.detail.data; ... }</code>
5. 全局变量 – globalData
小程序中的globalData可以存储全局数据,一般用于存储登录态信息,需要在app.js
中设置,在app.js
中调用不能再使用getApp()
来获取App,而需要使用this
来获取App
<code>App({ globalData: { userInfo: {...} }, onLaunch: function () { this.globalData.userInfo = {...}; } })</code>
在其他页面中使用,首先需要获取当前的App对象
<code>var app = getApp(); var userInfo = app.globalData.userInfo;</code>
6. 数据缓存 – 同步&异步
小程序的数据缓存storage有多个方法,分同步和异步,wx.setStorage(OBJECT)
、 wx.setStorageSync(KEY,DATA)
、 wx.getStorage(OBJECT)
、 wx.getStorageSync(KEY)
、 wx.getStorageInfo(OBJECT)
、 wx.getStorageInfoSync
、 wx.removeStorage(OBJECT)
、 wx.removeStorageSync(KEY)
、 wx.clearStorage()
、 wx.clearStorageSync()
,详情见官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/data.html
7. web-view的数据获取
小程序中的webview赋予小程序更多可能,目前webview已经能够进行dom元素获取,目前项目中仍未需要大量使用,后续根据需求会补充此处用法。