web-view組件
承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用。
微信小程序使用webview直接加載要注意哪些事項？
- 必須要在小程序后臺使用管理員添加業(yè)務(wù)域名；
- h5頁面跳轉(zhuǎn)至小程序的版本必須是1.3.1以上；
- 微信分享只可以是小程序的主名稱，如要自定義分享內(nèi)容，需小程序版本在1.7.1以上
- h5的支付不可以是微信公眾號的appid，必須是小程序的appid，而且用戶的openid也必須是用戶和小程序的。
案例實現(xiàn): 模擬
步驟一： 創(chuàng)建相關(guān)H5文件
- 在h5站點目錄myapp中創(chuàng)建相關(guān)文件
db.json
{
"goods": []
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 在需要調(diào)用JS接口的頁面引入如下JS文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<button class="btn">跳轉(zhuǎn)11</button>
<script>
let btn = document.querySelector(".btn")
// btn.addEventListener("click",()=>{
// console.log('btn');
// wx.miniProgram.navigateTo({url: '/pages/index/index'})
// })
btn.addEventListener("click", () => {
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
})
</script>
</body>
</html>
步驟二： 啟動json-server服務(wù)器
json-server db.json --static ./public
步驟三： 在小程序的某個頁面中，比如 show.wxml
<web-view src="http://localhost:3000"></web-view>
