小程序开发总结03 – 数据传递与缓存

Write By CS逍遥剑仙
我的主页: csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257

1. 基本事件传递参数

和H5不同，元素上绑定事件只能传入事件名，不能直接传参，需用通过dataset传参

<view bindtap="funName" data-variable="{{variable}}"></view>

// 方法中获取dataset参数
funName(e){
    const variable = e.currentTarget.dataset.variable;
}

2. 页面间传参

页面间传递参数通过url参数传递，页面导航方式见官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html

let id = 1;
wx.navigateTo({
    url: '/pages/test/test?id='+id
})
wx.redirectTo({
    url: '/pages/test/test?id='+id
})

接收参数，通过onLoad参数获取

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

3. 组件通信 – 页面向组件传参

页面引用自定义组件，参数直接作为属性传递，下面引用的是一个名为"csxiaoyao"的组件，注意参数命名方式

<csxiaoyao schedule-data="{{item}}" new-page="{{true}}"></csxiaoyao>

组件中获取参数，并监控参数变化重新渲染

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

4. 组件通信 – 组件调用父页面方法(含form表单)

一个合理的组件往往只负责数据的渲染显示，而数据的获取、修改等涉及修改服务端数据的事件，应全部交由page页面处理，触发page中对应的事件，此外，如果需要后端处理消息推送，则必须在每次提交请求时带上表单id

带form表单的组件wxml，则提交的事件中可以获取到formid

<form bindsubmit="formSubmit" report-submit>
    <button formType="submit">提交</button>
</form>

组件中的事件处理

formSubmit(event) {
    // 事件选项
    const eventOption = {
        composed: true
    }
    var eventDetail = {
        data: ...,
        // 如果需要后端处理消息推送，则必须在每次提交请求时额外带上表单id
        formId: event.detail.formId
    }
    // 调用父页面的cancel事件
    this.triggerEvent('component_cancel', eventDetail, eventOption);
}

父页面调用组件，绑定事件

<csxiaoyao bind:component_cancel="cancel"></csxiaoyao>

父页面中的对应事件处理

cancel(event) {
    const formId = eventDetail.detail.formId;
    const data = eventDetail.detail.data;
    ...
}

5. 全局变量 – globalData

小程序中的globalData可以存储全局数据，一般用于存储登录态信息，需要在app.js中设置，在app.js中调用不能再使用getApp()来获取App，而需要使用this来获取App

App({
    globalData: {
        userInfo: {...}
    },
    onLaunch: function () {
        this.globalData.userInfo = {...};
    }
})

在其他页面中使用，首先需要获取当前的App对象

var app = getApp();
var userInfo = app.globalData.userInfo;

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元素获取，目前项目中仍未需要大量使用，后续根据需求会补充此处用法。