微信小程序、h5、微信公众号之间的跳转

一、微信小程序不同页面之间的跳转

1.1 wx.switchTab

跳转到 tabBar 页面，并关闭所有非 tabBar 页面。

wx.switchTab({
  url: '',  // app.json 里定义的 tabBar 页面路径，不可传参数
  success: function() {},
  fail: function() {},
  complete: function() {}
});

1.2 wx.reLaunch

关闭所有页面，跳转到指定页面。

wx.switchTab({
  url: '',  // app.json 里定义页面路径，可传参数，例如 'path?key1=val1&key2=val2'
  success: function() {},
  fail: function() {},
  complete: function() {}
});

// url 上传递的参数可以在被打开页面的 onLoad 生命周期中接收
Page({
  onLoad(options) {
    // your code...
  }
});

如果传递的参数有中文，为了避免乱码，可以先 encodeURIComponent，再 decodeURIComponent

1.3 wx.redirectTo

关闭当前页跳转到指定页面，但是不允许跳转到 tabbar 页。

wx.redirectTo({
  url: '',  // app.json 里定义页面路径，可传参数，例如 'path?key1=val1&key2=val2'
  success: function() {},
  fail: function() {},
  complete: function() {}
});

// url 上传递的参数可以在被打开页面的 onLoad 生命周期中接收
Page({
  onLoad(options) {
    // your code...
  }
});

1.4 wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
  url: '',  // app.json 里定义页面路径，可传参数，例如 'path?key1=val1&key2=val2'
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data);
    },
    someEvent: function(data) {
      console.log(data);
    }
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' });
  },
  fail: function() {},
  complete: function() {}
});

// eventChannel 传递的参数可以在被打开页面的 onLoad 生命周期中接收
Page({
  onLoad(options) {
    console.log('options', options);
    
    const eventChannel = this.getOpenerEventChannel();
    
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
});

1.5 wx.navigateBack

关闭当前页面，返回上级页面或多级页面，可以通过 getCurrentPages 获取当前的页面栈，决定返回几层。

const pages = getCurrentPages();
const prevPages = pages[pages.length -2];
// 向跳转页面传递参数
prevPages.setData({...});

wx.navigateBack({
  delta: 1,  // 返回的页面数，默认是 1，如果 delta 大于现有页面，则返回到首页 
  success: function() {},
  fail: function() {},
  complete: function() {}
});

二、微信小程序和H5之间的跳转

2.1 微信小程序跳转到 H5

使用微信小程序自身提供的 web-view 组件，它作为承载网页的容器，会自动铺满整个小程序页面。

// app.json
{
  pages: [
    "pages/webView/index"
  ]
}

// webView/index.wxml
<web-view src="{{url}}"></web-view>

// webView/index.js
Page({
  data: {
    url: ''
  },
  onLoad: function(options) {
    this.setData({
      url: options.url
    });
  }
})

2.2 H5 跳转微信小程序

wx-open-launch-weapp 用于H5页面中提供一个可以跳转小程序的按钮。

在使用wx-open-launch-weapp这个标签之前，需要先引入微信JSSDK，通过 wx.config 接口注入权限验证配置，然后通过 openTagList 字段申请所需要的开放标签。

<wx-open-launch-weapp class="dialog-footer" id="iKnow" username="跳转的小程序原始id" path="所需跳转的小程序内页面路径及参数">
  <style></style>
  <template>
    <div class="dialog-footer" style="font-size: 2rem; text-align: center;">前往小程序</div>
  </template>
</wx-open-launch-weapp>

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

const IKnowElem = document.querySelector("#iKnow");
IKnowElem.addEventListener("launch", function (e) {
  console.log("success", e);
});
IKnowElem.addEventListener("error", function (e) {
  console.log("fail", e.detail);
});

function jsApiSignature() {
  return post(
    "/api/mp/jsapi/signature",
    { url: location.href }
  ).then((resp) => {
    if (resp.success) {
      const data = resp.data;
      wx.config({
        appId: appid,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        openTagList: ["wx-open-launch-weapp"],
        jsApiList: [],
      });

      wx.ready(function () {
        console.log("ready");
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
      });

      wx.error(function (res) {
        console.error("授权失败", res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
      });
    }
  });
}

三、H5 和微信公众号之间的相互跳转

3.1 H5 跳转到微信公众号

在微信公众号里打开的 H5 页面执行 closeWindow 关闭窗口事件即可。

const handleFinish = function () {
  console.log("handleFinish");
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {
      WeixinJSBridge.call("closeWindow");
    },
    false
  );

  WeixinJSBridge.call("closeWindow");
};

👉 如果是其他场景，请查看这篇文章

如有问题，欢迎指正