官方文档
- https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
JSSDK
- https://res.wx.qq.com/open/js/jweixin-1.3.2.js
function ready() {
console.log(window.__wxjs_environment === 'miniprogram')
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
ready()
}
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram)
})
H5 跳转微信小程序页面
H5(uniapp)
- App.vue 引入 jweixin-1.3.2.js
onLaunch(option) {
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)
}
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) {
this.setData({url: `${baseUrl}?token=${token}&id=${id}`})
} else {
this.setData({url: baseUrl})
}
},
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}`
})
}