专栏首页禅林阆苑小程序开发总结03 - 数据传递与缓存
原创

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

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

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

sign

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【技术创作101训练营】三种不同场景下 vue 组件动态加载的方法及实现

    前端模块化开发模式已成主流,但随着前端项目规模的不断扩大,开发者可能会遇到以下一些问题:

    CS逍遥剑仙
  • 小程序开发总结01 - 模块化开发流程规范

    H5 的开发涉及开发工具、前端框架、模块管理工具、任务管理工具、UI库、接口调用工具、各种浏览器运行环境等,尽管H5丰富的开发环境给了开发者更加灵活的配置方案,...

    CS逍遥剑仙
  • 前端接口模拟工具Mock.js上手实践

    在前后端开发过程中,常常会遇到前后端进度不一致的情况,如果前端停下来等后端接口调试完再继续开发会大大降低前端的开发效率。Mock.js 是一款成熟强大的接口模拟...

    CS逍遥剑仙
  • GMIS 2017 | 伯克利教授Stuart Russell:人工智能的过去、现在和未来

    机器之心原创 机器之心编辑部 全球机器智能峰会(GMIS 2017),是全球人工智能产业信息服务平台机器之心举办的首届大会,邀请了来自美国、欧洲、加拿大及国内的...

    机器之心
  • [mini-blog]小程序最近两个迭代版本总结,来看看更新了哪些内容吧

    对用户最直观的功能就是新增专题页面,页面UI还是比较简单的,主要没有特别好的想法,所以一切从简了。

    Bug生活2048
  • 入门微信小程序 (二)语法篇

    路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

    sunseekers
  • 拼图类APP原型模板分享——简拼

    此原型模板所用到的组件有标签组、水平分隔线、圆形工具。交互动作有结合标签组实现页面跳转,选择组件触发按钮状态变化等。

    奔跑的小鹿
  • 20181012微信小程序填坑手册~

    从6月份开始到现在,写小程序将近4个月了 开发时给自己埋了不少坑~ 给大家分享下我的填坑经验~~

    前端博客 : alili.tech
  • Pycharm连接github的操作说明

    从上图中看出,git配置完成后,主要的操作都在pycharm的VCS中进行,可以进行:创建分支、合并、下载仓库、更新仓库等操作。

    苦叶子
  • wx.navigateTo 跳转页面失败?

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    泥豆芽儿 MT

扫码关注云+社区

领取腾讯云代金券