小程序系列之web-view的页面引入交互实现方案

小程序系列之web-view的页面引入交互实现方案

需求如下:

小程序商城引入web-view页面,要求web-view呈现的H5页面里面带上一个"返回首页"按钮,点击重新返回小程序首页。

解决方案如下:

根据微信小程序文档,web-view自动撑满全屏,并且覆盖当前页面所有组件。

H5项目页面中添加按钮代码和JS代码 (本来预计判断当前运行环境，是否显示当前按钮， 但是我们这个项目本身暂时不需要进行判断， 如果需要判断是否显示， 可以在js中先判断当前运行环境， 如果不是小程序环境 给div元素隐藏。)

<div class="backHome" style="position:fixed;left:13px;bottom:13px;width:48px;height:48px;background-color:red;border-radius:3px;z-index:999999;line-height:48px;text-align:center;">首页</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
 $(".backHome").click(function () {
                      wx.miniProgram.getEnv(function (res) {
                console.log(res.miniprogram)
            })
            wx.miniProgram.switchTab({ url: '/pages/home/home' })
        });
</script>

注意:

微信小程序中webview跳转到小程序， 必须引入微信jssdk （注意:使用navigateTo redirectTo 或 switchTab需要jsssdk 版本1.3.2） 。
`

`

补充:

wx.miniProgram.postMessage是小程序向页面发送消息,是指会在特定时机（小程序后退、组件销毁、分享）触发并收到消息，暂时没能找出用postMessage做返回首页的解决方案。
`

谨以此文献给正在开发岗位上奋斗爬坑的有志青年! 共勉