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

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

前言

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文件，然后后面就可以其他页面也可以一起使用，姑且也算是一种页面的通信方式吧！
总结 【微信小程序页面之间的通信】刚开始写博客，有错误或者有补充的地方请诸君斧正。