H5页面唤起小程序 & 小程序唤醒H5并携带参数

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),
})