H5唤起小程序

async goDrug(item) {
  // 如果需要携带参数进入小程序
  if(item.id && item.roomCode && item.docName && this.apiToken){
  	// 如果携带的参数有中文的话需要使用encodeURI转换为字符串,否则报错
    let decName = window.encodeURI(item.docName)
    const data = {
      //小程序配置路径
      path: '/pages/im/im',
      // 需要携带的参数
      query: `id=${item.id}&token=${this.apiToken}&groupID=${item.roomCode}&docName=${decName}`,
          env_version:'trial' // 体验版,除正式版外均需要在微信外浏览器打开才生效
        }
        // 交给后端去做
        // 请求后端API,将参数传入,获取后端返回的小程序链接
        const res = await getUrlScheme(data)
        console.log(res,'获取微信小程序链接');
        if(res.code == '200' || res.code == '0'){
          console.log(res.data);
          // 直接在此唤醒小程序即可
          location.href = res.data
        }else{
          Toast('获取失败')
        }
      }else{
        Toast('未获取到ID或房间号')
      }
    }

小程序唤起H5

前言:因为页面要调用支付,支付授权之后重定向页面会携带query参数,为了方便判断是否授权,所以尽量不要使用?传参

step1

这里解释下为什么不直接在页面使用web-view 组件

  • web-view默认铺满全屏,会覆盖其他内容
  • 所以需要新建跳转页面,如下所示
// wxml页面,web-view小程序原生组件,url就是要跳转到的H5页面
<web-view src="{{url}}"></web-view>
onLoad(options) {
  if(!options.url) return false
  // 获取上个页面传过来的url并赋值给data
  this.setData({
    url:options.url
  })
 },

step2

// 在需要的地方加上这个跳转方法即可
// 注意的坑:url不要携带?,如果你携带了小程序不会解析?之后的值,大坑勿入
let url = `https://test.webchicken.com/#/orderPay/${id}/${consultOrderId}/${recipeSn}`
wx.navigateTo({
  // 这里就是step1中新建的page路径
  url: '/pages/out/out?url=' + decodeURIComponent(url),
})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐