行业动态
微信小程序、h5、微信公众号之间的跳转
2024-02-28

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

1.1 wx.switchTab

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

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函数,如签名过期导致验证失败,具体错误信息可以打开configdebug模式查看,也可以在返回的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"); };

原文链接:

https://juejin.cn/post/7314546931863240723


1063568276