web-view组件
承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。
微信小程序使用webview直接加载要注意哪些事项？
- 必须要在小程序后台使用管理员添加业务域名；
- h5页面跳转至小程序的版本必须是1.3.1以上；
- 微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上
- h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。
案例实现: 模拟
步骤一： 创建相关H5文件
- 在h5站点目录myapp中创建相关文件
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>
// 在需要调用JS接口的页面引入如下JS文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<button class="btn">跳转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服务器
json-server db.json --static ./public
步骤三： 在小程序的某个页面中，比如 show.wxml
<web-view src="http://localhost:3000"></web-view>
