526互联

H5跳回微信小程序页面

发布时间 2024-01-12 10:33:23作者: 逢生博客

目录

官方文档

JSSDK

// web-view下的页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

uniapp H5 跳转微信小程序页面

H5

  • App.vue 引入 jweixin-1.3.2.js
onLaunch(option) {
  // #ifdef H5
  const script = document.createElement('script')
  script.src = 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js'
  script.type = 'text/javascript'
  document.body.appendChild(script)
  // #endif

}
  • index.vue 跳转小程序页并带上参数
jumpMiniPage() {
  const token = ''
  const id = 1
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {
      wx.miniProgram.navigateTo({
        url: `/pages/payment/index?token=${token}&id=${id}`
      })
    }
  })
}

微信小程序

  • 通过 web-view 加载 H5
  • /pages/index/index
<view>
  <web-view src="{{url}}"></web-view>
</view>

data: {
  baseUrl: 'https://域名',
  url: null
},
onLoad(options) {
  console.log(options)
  const {token, id} = options
  const {baseUrl} = this.data
  if(token !== undefined) {
    // 将 token 与 id 传回H5页面	
    this.setData({url: `${baseUrl}?token=${token}&id=${id}`})
  } else {
    this.setData({url: baseUrl})
  }
},
  • /pages/payment/index 页面
data: {
  token: null,
  id: null
},
onLoad(options) {
  console.log(options)
  this.setData({...options})
  const {token, id} = options
  // 小程序业务逻辑

},
jumpIndexPage() {
  const {token, id} = this.data
  wx.redirectTo({
    url: `/pages/index/index?token=${token}&id=${id}`
  })
}