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

最新推荐文章于 2025-04-08 16:03:16 发布

原创

最新推荐文章于 2025-04-08 16:03:16 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序 #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(