评论

[填坑手册]小程序web-view组件实战与踩坑

小小web-view,大大真滋味

首先,根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件,如果你的个人开发者,可以跳过这篇文章。

一、使用web-view以及它的好处

1、己方账号(第三方)与小程序openId/UnionId的关联绑定,实现免登陆

比如你是某门户网站S,你要识别自己小程序上的用户与网站用户的关系,你可以通过三种方法绑定关系,公众号,小程序源生,小程序web-view内嵌跳转三种方法

2、内嵌H5的富文本,减少重复开发

比如你是门户网站,社区,以往有大量的新闻和帖子,里面带了各种css样式的富文本,小程序源生是无法直接读取的,需要大量转化,这时候直接内嵌这些H5新闻,大大降低开发成本

3、热更新,减少发布审核

某些需要经常更新的内容、公告、活动页,内嵌H5可以减少频繁提交小程序审核

二、小程序功能赋权

为H5提供各种小程序才有的功能,比如录音,扫一扫等。

注意事项

  1. 多场景判断,建议使用官方API: wx.miniProgram.getEnv
  2. H5唤醒一些小程序API有一定的延时,0.3~1秒
  3. 请调用小程序专用的JSSDK,同一个jssdk,但是webview的功能收到限制,和之前微信打开H5有所不同
  4. 小程序自动获取加载H5的title
  5. H5中iframe的url必须也是业务域名
  6. web-view一定是撑满全屏的,自定义顶部菜单,悬浮的都没用

三、小程序和H5之前的互相通讯

1、 从小程序 ==>> h5

小程序控制H5,可以直接用src路径传参的形式,比如

<!--  小程序端 HTML -->
<web-view  src="//URL?a=param1&b=param2"></web-view>

避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent。

2、 从 H5 ==>> 小程序

这里我们知道bindmessage是小程序用来监听H5的推送的内容,但是这里不大不小的坑!就是它的三个出发场景:

  • 小程序后退:使用接口名 wx.miniProgram.navigateTo,wx.miniProgram.navigateBack,wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发
  • 分享:这个就是当你点分享小程序的时候,会接受到H5之前发送的postMessage
  • 组件销毁,web-view组件销毁,类似 wx.miniProgram.redirectTo 都会触发。
<!--  小程序端 HTML -->
<web-view bindmessage="handleGetMessage"  src="{{openUrl}}"></web-view>
// 小程序端 JS -->
Page({
  /**
   * 页面的初始数据
   */
  data: {
    openUrl: "",
  },
  /**
   * 获取请求数据
   */
  handleGetMessage: function (e) {
    console.log(e.detail.data);
    }
  },
})
<!-- h5端 HTML和JS -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
    data: {
        link: "//test.com",
        title: "一起学习,一起进步"
    }
});
//wx.miniProgram.redirectTo({
//  url:"/pages/inner/index?source=123"
//})
wx.miniProgram.navigateBack({delta: 1})
</script>

注意事项

  1. 那些H5控制小程序的跳转路径必须是“/”开头,如 “/pages/xxx/xxx”,且路径必须在app.json里有,地址错误的话,有时不报错。
  2. postMessage的json必须是data开始,不然接收不到数据。

四、bindmessage接收到消息有3个重要特性(重点)

  1. 接收可以是H5之前几分钟前发送postMessage,不一定是即刻发出的。

  2. 之前发出的 postMessage的DATA信息会累加,当触发bindmessage接收的时候是一个数组。

  3. 当bindmessage 再次 接收到数据,之前发送的数据不会被清空,将累加一起返回,获取时要判断好数组的角标

五、Tips

1、在IDE工具中如何调试H5


可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。

2、内嵌H5缓存问题

web-view加载的H5具有很重的缓存,如果需要调试,可以通过在url后面加时间戳的方式解决。

3、小程序关闭,H5背景音乐仍然在播放问题

小程序已经关闭,但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性:

visibilitychange:页面可见性状态

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

var statusBeforeHide = true; //初始化页面的状态
var music = document.getElementById("xxx");
// 更改音乐播放状态
function setChangeMusic() {
    if (document[hiddenProperty]) {
        // 页面隐藏
        if (statusBeforeHide) {
            music.pause(); // 暂停
        }
    } else {
        // 页面显示
        if (statusBeforeHide) {
            music.play() //如果statusBeforeHide是true, 继续播放
        }
    }
}

let hiddenProperty = ('hidden' in document) ? 'hidden'
        : ('webkitHidden' in document) ? 'webkitHidden'
            : ('mozHidden' in document) ? 'mozHidden' : null;
if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    let onVisibilityChange = () => {
        //console.log('visibilityChange');
        setChangeMusic();
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
    console.log("不支持这个api");
}

总结,web-view还是非常实用的组件,且用且珍惜~

往期回顾:

最后一次编辑于  2020-07-06  
点赞 13
收藏
评论

15 个评论

  • 探索者
    探索者
    2020-03-09

    「1、己方账号(第三方)与小程序openId/UnionId的关联绑定,实现免登陆」


    这里的意思是:小程序绑定了公众号,小程序内嵌该公众号下的H5链接,小程序登录之后,再进入该H5链接,用户信息是相通的是吗?


    2020-03-09
    赞同 1
    回复 5
    • 圣殿骑士
      圣殿骑士
      2020-03-09
      emmm。。。比如说你的微博账号是A,你的小程序openId是B,你在小程序内嵌微博A的登录页面,输入微博A的账号,绑定关联后,你以后再打开小程序,就等于登录A的微博账号,这样使用微博小程序的时候,就不需要再输入微博账号密码了
      2020-03-09
      回复
    • 探索者
      探索者
      2020-03-09回复圣殿骑士
      明白,谢谢
      2020-03-09
      回复
    • plmm
      plmm
      2020-11-03回复圣殿骑士
      请问是怎么样绑定关联的?
      2020-11-03
      回复
    • 圣殿骑士
      圣殿骑士
      2020-11-07回复plmm
      你需要在微信开发平台注册账号,https://open.weixin.qq.com/cgi-bin/frame?t=home/mp_tmpl&lang=zh_CN。 然后通过获取unionId  存在本地进行比较,每个用户的unionId是不会变的
      2020-11-07
      回复
    • 嘻嘻嘻
      嘻嘻嘻
      2020-12-03
      这样做体验不好,有h5的登录态 跳转页面 网络不好白屏
      2020-12-03
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-03-09

    收藏点赞。

    都会经验谈。

    2020-03-09
    赞同 1
    回复
  • 北岛
    北岛
    01-27

    请问web-view页面可以显示插屏广告吗?

    01-27
    赞同
    回复
  • 银华小顽皮
    银华小顽皮
    01-19

    多谢,接下来来踩坑,希望不迷路。。,

    01-19
    赞同
    回复 1
  • 那只叫禾一的兔子溜得太快了
    那只叫禾一的兔子溜得太快了
    2020-12-16

    请问楼主,webview里面发出的请求,url也必须在小程序设定的request白名单里吗?

    2020-12-16
    赞同
    回复
  • 😄
    😄
    2020-12-03

    小程序渲染h5页面是出现多个滚动条是什么原因

    2020-12-03
    赞同
    回复 1
    • 圣殿骑士
      圣殿骑士
      2020-12-04
      小程序渲染h5页面? 你说的是内嵌web-view的情况吧,你可以看做就是微信直接打开H5,你先检查下 微信直接打开有没有多个滚动条,如果没有,那么看下是不是H5宽度被压缩产生的?
      2020-12-04
      回复
  • xy
    xy
    2020-11-02

    bindmessage 这个方法是有点坑的 ... 通信不是实时的 必须要满足那场景

    2020-11-02
    赞同
    回复 1
    • 圣殿骑士
      圣殿骑士
      2020-12-04
      对,不是实时的,必须满足文档里说的三个场景
      2020-12-04
      回复
  • 林
    2020-09-28

    真鸡肋,只能打开自己公司的页面

    2020-09-28
    赞同
    回复
  • Lion Heart คิดถึง
    Lion Heart คิดถึง
    2020-07-23

    能请教几个问题吗?

    1、如果我h5中有支付的功能 那小程序里是不能用jssdk支付的,需要调用小程序的支付 这时候我可以再h5页面里调用小程序的支付吗 还是先跳回到小程序 支付完成后再跳回来?

    2、在页面里直接用web-view 打开时 ios里没有左上角的返回按钮 有啥好的方法吗 除了用中间页跳转的方法


    2020-07-23
    赞同
    回复 5
    • 圣殿骑士
      圣殿骑士
      2020-07-23
      1、我们支付都是直接小程序源生的,内嵌的话,没试过,不过感觉路径有点长,操作起来有些奇怪,如果一定要这样做的话,就像你说的,通过postMessage然后跳转回小程序,再调回去。但是还有些奇怪
      2、如果直接打开是有源生home按钮的,如果是其他地方跳转,是有返回的呀! 当然你也可以通过web-view内嵌页面JSSDK 跳转。
      2020-07-23
      回复
    • xy
      xy
      2020-11-02
      我司的解决方案 web-view调用支付的时候 会跳转到小程序页面
      小程序整个页面是空白的 在onload的时候处理支付 然后再把支付成功参数回调给url
      2020-11-02
      回复
    • 邓疯疯 
      邓疯疯 
      2020-11-23回复xy
      请问支付成功后如何返回给url呢?后退的时候没法带参数啊,如果重新加载webview页面,那之前打开过的页面路径也没有了。
      2020-11-23
      回复
    • xy
      xy
      2020-11-25回复邓疯疯 
      h5跳转支付的时候把回调的url拼接到小程序路径里 支付成功 然后返回web-view页面 在web-view页onload里 刷新src链接为支付成功带过来的链接
      2020-11-25
      回复
    • xy
      xy
      2020-11-25回复邓疯疯 
      2020-11-25
      回复
  • aholy
    aholy
    2020-07-06

    文章有错误吧,jssdk是同一个。不区分公众号还是小程序。

    2020-07-06
    赞同
    回复 2
    • 圣殿骑士
      圣殿骑士
      2020-07-06
      没表述清楚,是同一个jssdk,但是webview的功能收到限制,和之前微信打开H5有所不同
      2020-07-06
      回复
    • aholy
      aholy
      2020-07-08回复圣殿骑士
      赞。理解一致,表述现在也一致了。我看到社区两个写webview的帖子都是同样一句话简述。虽然我们理解,但初学者可能会不好理解,特别对于没有做过公号网页开发者。
      2020-07-08
      回复

正在加载...

登录 后发表内容