微信小程序中内嵌页面的后退操作

微信小程序中内嵌页面的后退操作

使用原生的微信顶部栏的后退按钮实现

要注意几点：
1.一级页面嵌入网页的话，没有后退按钮，点进去后再次点击网页内的链接，无法后退
2.>=二级页面才会有后退按钮，在>=二级页面中嵌入网页，点进去后再次点击网页内的链接，后退按钮会按照顺序依次返回，直到返回一级页面。
如果我们想要在一级页面中显示内嵌的网页并也想实现网页内再次点击还能依次后退该怎么办呢？
这里我们使用的方法是用一个中间页面A进行过度：
假设我们真正想要展示的内嵌网站的页面叫页面B，那么中间页面A相当于一个虚页面，先将入口放到中间页面A，此时页面A为一级页面，
然后在中间页面A里用wx.navigateTo跳到真正需要展示的页面B，此时页面B变成了二级页面
但是光这样还会出现一个问题，当返回到一级页面A时，页面A又会立刻跳转到页面B，变成了循环
因此还需要一个全局变量的标志位，并且在页面A中添加判断。

举个实际例子：

实现效果如图：

上图中底部使用的 小程序原生tabBar,因此有四个一级页面：“消费者指数”，“市场洞察”，“专家观点”，“联系我们”

假设“消费者指数”页面为首页，想要在“市场洞察”中内嵌外部网页链接，然后返回按钮最终返回到“消费者指数”首页：

假设“消费者指数”页面为页面X，中间页面为页面Y，“市场洞察”实际内嵌网页的页面为页面Z。

将中间页面Y作为“市场洞察”的入口文件一级页面

1.设置全局变量

以mpvue中TS语言为例：
src下的main.ts中

//main.ts
//...
//.....
Vue.config.productionTip = false;
const MyApp = require("./App.vue").default as IMpVue;
const app = new Vue(MyApp);
app.$mount();
//重点！！！在这里设置全局变量globalData，由于是TS，可能需要在微信的TS定义文件中getApp()中添加globalData的定义
//此时globalData 为全局变量
Vue.prototype.globalData = getApp().globalData;

2.设置全局变量初始状态

“消费者指数”页面X中设置标志位初始状态

 onShow() {   
  this.globalData.isWebView = false;    
}

3.设置全局变量改变状态

“市场洞察”页面Z中改变标志位状态，代表已访问过此页面

onShow() {
  this.globalData.isWebView = true;
}

4.判断全局变量状态

中间页面Y中判断：

onShow() {
  if (this.globalData.isWebView == false) {
    console.log("show");
    wx.navigateTo({
      url: "../“市场洞察”页面Z/main"
    });
  } else {
    console.log("hide");
    wx.reLaunch({
      url: "../“消费者指数”页面X/main"
    });
  }

这样的话就解决了无限循环跳转的问题了