【微信小程序】微信小程序返回上一个页面的同时刷新数据，专业术语：小程序跨页面通信
完美效果GIF图紧张制作中...
第一种方案 (推荐力度：100) 亲测有效
1.场景介绍
在小程序开发过程中，难免会遇到一种情况，当A页面需要用户设置数据 点击进入B页面，在B页面设置成功后返回并将设置的值传递给A页面。但是wx.navigateBack()并不支持返回传参。这种情况下就可以使用onfire.js，onfire.js 是一个很简单的事件分发的 Javascript 库（仅仅 0.9kb），简洁实用。
2.下载地址
onfire.js下载地址
- https://www.bootcdn.cn/onfire.js/
- https://gitee.com/mirrors/onfire-js
3.如何使用
将onfire.js下载下来并放置在开发项目某个目录下，例如根目录lib文件夹内。
在使用页面对应的js文件中引入该文件。
代码如下：
sendQapage.wxml
所属话题
{{name}}
sendQapage.js
var config = require('../../utils/config.js'); //请求url封装
var redirect = require('../../utils/redirect.js'); //跳转封装
var form = require('../../utils/form.js'); //状态封装
var util = require('../../utils/util.js'); //get、post请求封装
var upimgs = require('../../utils/upimgs.js'); //上传图片
var onfire = require('../../utils/onfire.js');
var app = getApp(); //全局函数
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//绑定EventtopicDataChange事件传值
onfire.on('EventtopicDataChange', e => {
this.setData({
name: e.names,
id: e.ids,
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
onfire.un("EventtopicDataChange"); //页面卸载的时候同时卸载此绑定事件
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//未有所属话题的时候跳转选择
goChoice: util.throttle(function (e) {
var that = this;
redirect.navigateTo("./dataList?name=" + that.data.name)
}, 5000),
})
datalist.wxml
# {{item.group_name}}
确定
datalist.js
var config = require('../../utils/config.js');
var redirect = require('../../utils/redirect.js');
var form = require('../../utils/form.js');
var util = require('../../utils/util.js');
var upimgs = require('../../utils/upimgs.js');
var onfire = require('../../utils/onfire.js');
var app = getApp();
var indexs,
ids,
names,
optionsType;
Page({
/**
* 页面的初始数据
*/
data: {
choiceDateList: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
wx.hideShareMenu();
var that =this;
that.setData({
name: options.name
})
var url = config.DOMAIN_API.topic_allTopic_item;
var data = {
user_id: app.globalData.uid,
}
//发起get请求,使用方式如下：
util.ajaxGet(url, data).then((res) => {//成功处理
that.setData({
choiceDateList: res
})
}).catch((errMsg) => {//错误处理，已统一处理，此处可以不需要
});
optionsType = app.globalData.optionsType;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//日期选择
choiceFunction: function (e) {
var that = this;
indexs = e.currentTarget.dataset.index;
ids = e.currentTarget.dataset.id;
names = e.currentTarget.dataset.name;
that.setData({
name: '',
activeIndex: indexs
})
},
//确认选择
choice_sureBtn: function (e) {
var that = this;
if (that.data.activeIndex == null) {
util.showToast("请选择话题", "none", true, 2000)
} else {
// 触发名为EventtopicDataChange的事件，并且携带变量names值。
onfire.fire('EventtopicDataChange', { names, ids})
wx.navigateBack();
if (optionsType.sourceType == 'reEditTap') { //存缓存可以忽略，只是为了后期未发布之前进入编辑页面保留之前的内容
try {
wx.setStorageSync("qa_data_dayre", {names:names,ids:ids})
} catch (e) {
console.log(e.error);
}
} else {
try {
wx.setStorageSync("qa_data_day", { names: names, ids: ids })
} catch (e) {
console.log(e.error);
}
}
}
},
})
4.相关API
关于onfire.js的API
1.on(event_name, callback) 绑定事件，参数为event_name和callback， 当有名字为event_name的事件发生的时候，callback方法将会被执行。这个方法会返回一个eventObj，这个可以用于使用un(eventObj)方法来取消事件绑定。
2.one(event_name, callback) 绑定（订阅）事件，参数为 event_name with callback. 当被触发一次之后失效。只能被触发一次，一次之后自动失效。
3.fire(event_name, data) 触发名字为event_name的事件，并且赋予变量data为callback方法的输入值。
4.un(eventObj / eventName / function)取消事件绑定。可以仅仅取消绑定一个事件回调方法，也可以直接取消全部的事件；
5.clear() 清空所有事件。
5.总结
个人对于onfire.js的理解就是一个全局通知，从B页面发出一个通知带上Key和Value，在其他某一个页面监听这个Key值来获取传出来的Value。
第二种方案 (推荐力度：80) 亲测有效
可以采用获取页面栈然后通过页面栈调取上一个页面的onload()来实现无感刷新页面数据
var pages = getCurrentPages(); //获取页面栈
var prevPage = pages[pages.length - 2]; //获取当前页面的上一个页面
prevPage.onLoad(prevPage.options) //调用上一个页面的onload 来实现刷新数据
注：此方法有点，方便、快捷、无感刷新数据；弊端在于有点浪费资源 从后会更新方便并快捷、不会浪费太多资源的局部刷新！