案例实现:模拟
步骤一:创建相关H5文件
1.在H5站点目录Myapp创建相关文件db.json
服务器运行的命令:json-server db.json --static ./public
{
"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">这里是h5页面,单击跳转小程序</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>
2.在微信小程序新建一个页面list.wxml里使用web-vue,嵌入H5链接
<web-view src="http://localhost:3000"></web-view>
在小程序index.wxml文件里,设置一个button点击跳转到新建的页面去
<!-- 跳转测试页面 -->
<navigator url="/pages/test/goto">
<button type="primary">跳转到测试test页面</button>
</navigator>