微信小程序中通過web-view加載html頁面前提條件:
1、必須申請認證企業(yè)賬號狂打,配置業(yè)務域名
2、必須發(fā)好調(diào)用的html頁面服務
3混弥、同時服務必須是https的服務
微信開發(fā)者工具開發(fā)調(diào)試可以取消https校驗和業(yè)務域名的校驗趴乡。
調(diào)試取消https校驗和業(yè)務域名的校驗
一、小程序頁面向html頁面?zhèn)鲄?shù)
1蝗拿、在發(fā)好https的頁面服務上面直接拼接
?serial=fa5329afeb5e51cca760c0ed82a7451f&testParam1=1&testParam2=2
<web-view src="http://localhost:9889/gisaddrsel/singleAddrLocate/addressLocate_test.html?serial=fa5329afeb5e51cca760c0ed82a7451f&testParam1=1&testParam2=2" bindmessage="getMessageFromH5" />
2晾捏、在對應的html服務中,初始化通過window.location.href獲取請求哀托。
獲取拼接參數(shù):window.location.href.split("?")[1]
3惦辛、測試傳參截圖
小程序 => html
二、html頁面向小程序頁面?zhèn)鲄?shù)
1仓手、html頁面需要引入wx的js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2胖齐、在需要回傳的地方玻淑,調(diào)用wx.miniProgram.postMessage。
function sendParamByH5(){
wx.miniProgram.navigateBack({delta: 1})
wx.miniProgram.postMessage({
data: {
testParam1: "1",
testParam2: "2",
testParam3: "3"
}
})
}
3补履、在web-view中引用的html觸發(fā)了小程序后退、組件銷毀就會觸發(fā)bindmessage
<web-view bindmessage="getMessageFromH5" src="http://localhost:9889/gisaddrsel/singleAddrLocate/addressLocate_test?testParam1=1&testParam2=2" />
4剿另、小程序中:
Page({
data: {
},
onLoad() {
},
getMessageFromH5(e){
if (e && e.detail && e.detail.data) {
console.log(e.detail)
}
}
})
5箫锤、測試回傳截圖
html => 小程序