H5跳回微信小程序页面

目录

• 官方文档
  • JSSDK
• H5 跳转微信小程序页面
  • H5（uniapp）
  • 微信小程序

官方文档

• https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

JSSDK

• https://res.wx.qq.com/open/js/jweixin-1.3.2.js

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

H5 跳转微信小程序页面

H5（uniapp）

• 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}`
  })
}