案例實(shí)現(xiàn):模擬
步驟一:創(chuàng)建相關(guān)H5文件
1.在H5站點(diǎn)目錄Myapp創(chuàng)建相關(guān)文件db.json
服務(wù)器運(yùn)行的命令: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>
//在需要調(diào)用js接口的頁(yè)面引入如下js文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<button class="btn">這里是h5頁(yè)面圆兵,單擊跳轉(zhuǎn)小程序</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.在微信小程序新建一個(gè)頁(yè)面list.wxml里使用web-vue,嵌入H5鏈接
<web-view src="http://localhost:3000"></web-view>
在小程序index.wxml文件里炼幔,設(shè)置一個(gè)button點(diǎn)擊跳轉(zhuǎn)到新建的頁(yè)面去
<!-- 跳轉(zhuǎn)測(cè)試頁(yè)面 -->
<navigator url="/pages/test/goto">
<button type="primary">跳轉(zhuǎn)到測(cè)試test頁(yè)面</button>
</navigator>