Web-vue组件(微信小程序)

案例实现:模拟

步骤一:创建相关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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容