小程序与H5页面间的相互调用

2024-03-13 17:45| 来源: 网络整理| 查看: 265

或许你也有这样的需求：现有的H5页面想在小程序中打开，且当前页面还要调用一些小程序的功能（比如：跳转回到小程序的某个界面、获取地理位置等）。

以下，是我对这种需求的流程总结：

1. 小程序跳转H5

场景：小程序某页面中【去结算】按钮点击跳转到结算H5页面

购物车页面：

//index.wxml 去结算 //index.js Page({ data: { }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: `../other/other?url=${encodeURIComponent('http://localhost:3100/order/m_getOrderInfo')}` }); }, onLoad: function (param) { }, })

web-view引用外部H5页面

// other.wxml // other.js Page({ /** * 页面的初始数据 */ data: { url: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log('options.url', decodeURIComponent(options.url)); this.setData({ url: decodeURIComponent(options.url), }) }, }) 2. H5跳回到小程序

微信开放文档提供了好几种跳转的方法，个人采用了redirectTo方法，具体实现分两步：

H5页面中引入微信提供的jssdk

// body结束前引入

H5跳转到微信小程序的某个页面

// 调用jssdk方法 window.wx.miniProgram.redirectTo({ url: ``, }); 3. 问题总结开发者工具，web-wiew中引入了H5链接但加载不到，需要如下操作：

H5页面中如何判断当前页面是否处在微信小程序中？

微信开放文档中给出了三种方法，个人推荐通过判断userAgent中包含miniProgram字样来判断小程序web-view环境：

// 判断当前页面是否处在微信中 function isMiniprogram() { const ua = window.navigator.userAgent.toLowerCase(); let isInMiniprogram = false; if (ua.match(/miniProgram/i) == "miniprogram") { isInMiniprogram = true; } return isInMiniprogram; } 参考：微信开放文档

【本文地址】

小程序与H5页面间的相互调用

小程序与H5页面间的相互调用

今日新闻

推荐新闻