在接入小程序過(guò)程中會(huì)遇到需要將 H5 頁(yè)面集成到小程序中情況钩杰，今天我們就來(lái)聊一聊怎么把 H5 頁(yè)面塞到小程序中双泪。
本篇文章將會(huì)從下面這幾個(gè)方面來(lái)介紹：
- 小程序承載頁(yè)面的前期準(zhǔn)備
- 小程序如何承載 H5
- 小程序和 H5 頁(yè)面如何通訊
- 小程序和 H5 頁(yè)面的相互跳轉(zhuǎn)
小程序承載頁(yè)面的前期準(zhǔn)備
首先介紹下我們?cè)谟眯〕绦虺休d頁(yè)面之前需要做些什么景描。
第一步當(dāng)然就是 先有一個(gè) H5 地址 啦裕坊，支付寶這邊對(duì) H5 地址的要求如下：
- 僅支持 https 開(kāi)頭的地址
- 不支持 IP 地址及端口號(hào)
- 不支持重定向頁(yè)面
第二步就是要 將H5 頁(yè)面地址配置到支付寶的白名單 里面坝撑，這一步必不可少的蜂厅；如果不配置的話愉择，后面在訪問(wèn)小程序的時(shí)候會(huì)遇到頁(yè)面訪問(wèn)受限的報(bào)錯(cuò)劫乱，詳見(jiàn) ??[web-view頁(yè)面訪問(wèn)受限]
具體步驟可以參考[配置 H5 域名]织中，下面我簡(jiǎn)單寫(xiě)一下：
- 登陸小程序詳情界面 -> 找到 開(kāi)發(fā)設(shè)置 -> H5 域名配置 -> 點(diǎn)擊 添加
- 按照上面的匹配規(guī)則提示進(jìn)行操作
- 1、下載校驗(yàn)文件
- 2衷戈、把下載下來(lái)的校驗(yàn)文件放到 H5 地址域名的根目錄下面
- 3狭吼、在域名地址里輸入 H5 地址
- 4、點(diǎn)擊圖片中的 點(diǎn)擊這里 進(jìn)行校驗(yàn)
- 5殖妇、校驗(yàn)通過(guò)之后就可以添加了
小程序如何承載 H5
前期準(zhǔn)備完成后刁笙，我們就可以在小程序中去嵌入 H5 頁(yè)面了，嵌入的步驟非常簡(jiǎn)單谦趣，需要用到的組件是 web-view 疲吸，在 web-view 組件的 src 屬性中傳入 H5 的頁(yè)面地址，就可以在小程序里面訪問(wèn) H5 頁(yè)面了前鹅，代碼示例如下：
<view class="page">
<web-view
src="https://render.alipay.com/p/s/web-view/index"
></web-view>
</view>
web-view 組件在使用過(guò)程中需要注意：
- 每個(gè)小程序界面只能設(shè)置一個(gè) web-view 摘悴，也就是只能設(shè)置一個(gè) H5 頁(yè)面
- web-view 組件會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面
- 個(gè)人類型的小程序不支持使用這個(gè)組件
另外，如果有小伙伴沒(méi)有完成前面配置 H5 域名步驟的話舰绘，也沒(méi)有關(guān)系蹂喻；在調(diào)試階段，我們可以在小程序開(kāi)發(fā)工具上選擇忽略 web-view 域名合法性檢查捂寿，這樣就不會(huì)有報(bào)錯(cuò)的情況了叉橱。詳細(xì)操作步驟參考??[小程序如何忽略域名校驗(yàn)]
?? 劃重點(diǎn)：每次 H5 域名配置完成之后，都需要重新上線一個(gè)版本者蠕，版本上線之后窃祝，新配置的才會(huì)生效。
小程序和 H5 頁(yè)面如何通訊
小程序承載 H5 頁(yè)面后只是第一步踱侣，我們?cè)趯?shí)現(xiàn)部分功能上更多會(huì)遇到的就是如何實(shí)現(xiàn)數(shù)據(jù)在小程序和 H5 頁(yè)面之間進(jìn)行傳輸粪小，此時(shí)就要用到 onMessage 屬性和 postMessag 方法了。
注意： 小程序和 H5 數(shù)據(jù)傳輸是需要 H5 先發(fā)消息給小程序抡句，小程序接收到消息后再發(fā)消息給 H5探膊。
H5 端方法代碼如下：
- 需要注意在 H5 頁(yè)面使用 my.postMessage 和 my.onMessage 方法時(shí)必須要引入 https://appx/web-view.min.js （此鏈接僅支持在支付寶客戶端內(nèi)訪問(wèn)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webview與小程序通信</title>
</head>
<body>
<button onclick="send()">發(fā)送</button>
<button onclick="isminiapp()">判斷是否在小程序內(nèi)</button>
<button onclick="onmessage()">開(kāi)始監(jiān)聽(tīng)小程序發(fā)送的消息</button>
<button onclick="getminiappid()">我要調(diào)用小程序獲取APPID的API</button>
<!-- h5 log 工具方便在小程序內(nèi)查看h5的log-->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
</script>
<!--引入https://appx/web-view.min.js， 如該 H5 頁(yè)面需要同時(shí)在非支付寶客戶端內(nèi)使用待榔，為避免該請(qǐng)求404逞壁，可參考以下寫(xiě)法 -->
<script>
if (navigator.userAgent.indexOf('AlipayClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<script>
//發(fā)送消息
function send() {
my.postMessage({
name: "h5發(fā)送測(cè)試web-view"
});
}
//監(jiān)聽(tīng)小程序發(fā)給H5頁(yè)面的消息
function onmessage() {
my.onMessage = function (e) {
console.log(e);
}
}
//判斷是否在小程序內(nèi)
function isminiapp() {
my.getEnv(function (res) {
console.log(res.miniprogram) // true
});
}
//H5內(nèi)通過(guò)通信獲取APPID（先給小程序發(fā)送消息，表示H5內(nèi)需要APPID）
function getminiappid() {
my.postMessage({
name: "getappid"
});
}
</script>
</body>
</html>
小程序端接收方法：
<!-- .axml -->
<view>
<web-view id="web-view-1" src="..." onMessage="test"></web-view>
</view>
// 小程序頁(yè)面對(duì)應(yīng)的 page.js 聲明 test 方法锐锣，
// 由于 page.axml 里的 web-view 組件設(shè)置了 onMessage="test",
// 當(dāng)頁(yè)面里執(zhí)行完 my.postMessage 后腌闯，test 方法會(huì)被執(zhí)行
Page({
onLoad(e){
this.webViewContext = my.createWebViewContext('web-view-1');
},
test(e){
my.alert({
content:JSON.stringify(e.detail),
});
this.webViewContext.postMessage({'sendToWebView': '1'});
},
});
小程序和 H5 頁(yè)面的相互跳轉(zhuǎn)
了解完通訊之后，我們?cè)賮?lái)看看另外一個(gè)功能雕憔，即小程序和 H5 頁(yè)面怎么相互跳轉(zhuǎn)姿骏。
小程序和 H5 頁(yè)面跳轉(zhuǎn)分為兩種情況，分別是：
- 從 A 小程序的 a 頁(yè)面（ H5 承載頁(yè)面）跳轉(zhuǎn)到 A 小程序的 b 頁(yè)面
- 從 A 小程序的 a 頁(yè)面（ H5 承載頁(yè)面）跳轉(zhuǎn)到 B 小程序的 b 頁(yè)面
同一個(gè)小程序頁(yè)面跳轉(zhuǎn)
這種情況跳轉(zhuǎn)比較簡(jiǎn)單斤彼，只要在 H5 頁(yè)面里面引入 https://appx/web-view.min.js 后分瘦，直接使用my.navigateTo 或者是 my.redirectTo 進(jìn)行跳轉(zhuǎn)就可以了蘸泻。
代碼如下：
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<!-- 如該 H5 頁(yè)面需要同時(shí)在非支付寶客戶端內(nèi)使用，為避免該請(qǐng)求404嘲玫，可參考以下寫(xiě)法 -->
<!-- 請(qǐng)盡量在 html 頭部執(zhí)行以下腳本 -->
<script>
if (navigator.userAgent.indexOf('AliApp') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<script>
my.navigateTo({url: '../get-user-info/get-user-info'});
</script>
不同小程序頁(yè)面跳轉(zhuǎn)
不同小程序頁(yè)面的跳轉(zhuǎn)邏輯是這樣的：H5 頁(yè)面告訴 A 小程序說(shuō)我要跳轉(zhuǎn) B 小程序啦悦施，A 小程序接到指令后執(zhí)行跳轉(zhuǎn)到 B 小程序的命令。
代碼如下：
H5 頁(yè)面代碼
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<!-- 如該 H5 頁(yè)面需要同時(shí)在非支付寶客戶端內(nèi)使用去团，為避免該請(qǐng)求404抡诞，可參考以下寫(xiě)法 -->
<!-- 請(qǐng)盡量在 html 頭部執(zhí)行以下腳本 -->
<script>
if (navigator.userAgent.indexOf('AliApp') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<script>
// 網(wǎng)頁(yè)向小程序 postMessage 消息
my.postMessage({name:"跳轉(zhuǎn)B小程序"});
// 接收來(lái)自小程序的消息。
my.onMessage = function(e) {
console.log(e); // {'sendToWebView': '1'}
}
// 判斷是否運(yùn)行在小程序環(huán)境里
my.getEnv(function(res) {
console.log(res.miniprogram) // true
});
my.startShare();
</script>
小程序代碼：
<!-- .axml -->
<view class="page">
<web-view
id="web-view-1"
src="https://render.alipay.com/p/s/web-view/index"
onMessage="test"
></web-view>
</view>
// 小程序頁(yè)面對(duì)應(yīng)的 page.js 聲明 test 方法渗勘，
// 由于 page.axml 里的 web-view 組件設(shè)置了 onMessage="test",
// 當(dāng)頁(yè)面里執(zhí)行完 my.postMessage 后沐绒，test 方法會(huì)被執(zhí)行
Page({
onLoad(e) {
this.webViewContext = my.createWebViewContext('web-view-1');
},
test(e) {
my.navigateToMiniProgram({
appId: 'B小程序的appid',
path: 'pages/index/index?p=1&q=2',
query: {
a: 'foo',
b: 'bar',
},
success: function (res) {
console.log(res);
},
fail: function (err) {
console.log(err);
}
});
this.webViewContext.postMessage({ sendToWebView: '1' });
},
});
其他問(wèn)題分享
這邊給寫(xiě)一下對(duì)接 web-view 過(guò)程中可能會(huì)遇到的一些問(wèn)題：
- [web-view如何調(diào)用H5支付]
- [web-view的title怎么設(shè)置]
- [web-view頁(yè)面可以使用自定義組件嗎]
- [web-view承載的H5緩存與小程序緩存如何操作]
- [web-view組件支持刷新當(dāng)前頁(yè)面嗎]
- [已設(shè)置web-view的H5域名，但是訪問(wèn)H5仍出現(xiàn)頁(yè)面訪問(wèn)受限]
希望對(duì)大家接入有所幫助~
以上就是關(guān)于「小程序如何嵌入 H5 頁(yè)面」的所有內(nèi)容了旺坠，是不是這么一看還挺簡(jiǎn)單的乔遮，一起來(lái)試試吧，有問(wèn)題歡迎在評(píng)論區(qū)溝通交流取刃。
