微信小程序页面之间的通信


微信小程序页面之间的通信

  • 前言
    • 1、使用url后面加参数的形式通信
    • 2、利用缓存通信
    • 3、使用globalData全局变量通信
    • 4、使用外部引入js文件通信
  • 总结

前言 在前端开发中,组件之间的通信往往是老生常谈的话题,在小程序开发中也包含多种页面之间的通信方式,在这里做个笔记。
1、使用url后面加参数的形式通信 在跳转页面的时候在url的后面添加需要传递到新页面的参数,并且在新的页面中的onlocal生命周期函数的options中获取,然后调用setData方法,将传递过来的参数放到data中。
这也是最常见参数传递。
至于是使用navigator组件跳转还是使用路由接口跳转,就不在这里讨论了。
// wxml ...

// js onLoad: function(options) { const vm = this; let _activeIndex = +options.active //获取options中action字段内容 _activeIndex = _activeIndex || 0 vm.setData({ routerActive: _activeIndex }) }, // +号只是为了将字符串参数转化为num

2、利用缓存通信 在小程序中我们可以利用缓存api设置键值对的方式进行页面通信。
// a.js setMyStorage:function(){ wx.setStorageSync('myKey', 'myValue') }

// b.js getMyStorage:function(){ let vm = this let myDatahttps://www.it610.com/article/= '' _myData = https://www.it610.com/article/wx.getStorageSync('myKey') vm.setData({ myData : _myData }) }

3、使用globalData全局变量通信 在微信小程序中有且唯一的实例对象app(),在该实例中定义的方法和变量为全局变量,其他页面可以通过getApp()获取到小程序全局唯一的 App 实例。
// app.js App({ globalData: { 'keyA':'valueA', 'keyB':'valueB' } })

// index.js let app = getApp() let keyA = app.globalData.keyA console.log(keyA)

不过这种方法虽然方便,但是一般情况下不建议使用,很简单,会污染全局空间。
4、使用外部引入js文件通信 页面通信中还有一种方式,那就是外部引入js文件。在项目中我会把,项目用到的api接口放到同一个js文件中,在需要数据请求时利用require引入文件。
有人说这不是多此一举吗?但是我做前端也不会过多的干涉后端接口吧,如果后端忽然改了接口名,我总不能在所有的需要用到该接口页面修改吧,那我只需要把接口放到统一的api.js中,利用变量赋值,后面我只需要使用’api.变量名’的方式发起数据请求。如果接口改变了,我只需要修改api.js即可。
// api.js const HOST = require("../utils/host.js") module.exports = { indexData: HOST + "/Api/index/index" } // host.js同样是对域名的封装,就不再重复写出来了

// index.js const HOST = require('../../../utils/host.js'); const api = require('../../../utils/api.js'); Page({ ajax({ // ajax是对wx.request的封装,和request用法一样 url: api.indexData, success: function (res) { // 使用setData设置data就省略了 },}) })

所以,只需要将公共数据放到一个js文件,然后后面就可以其他页面也可以一起使用,姑且也算是一种页面的通信方式吧!
总结 【微信小程序页面之间的通信】刚开始写博客,有错误或者有补充的地方请诸君斧正。

    推荐阅读