小程序使用web-view内嵌页面必看系列

小程序web-view的使用 必看系列踩坑系列

小程序中的页面嵌入，不是使用iframe而是web-view，但是两者的性质都是一样的。

web-view会承载页面的容器，并自动铺满整个小程序页面。

在个人类型的小程序暂不支持使用，因为web-view需要配置服务器域名。

如何配置域名呢，打开微信公众平台小程序找到开发管理中的开发设置，往下找有一个业务域名

记住，小程序只能打开https域名的页面。

小程序中web-view页面传值给h5页面

1.尽量不要直接在web-view中填写页面链接，而是用一个变量赋值。

<web-view src="{{src}}" bindmessage="msgHandler" bindload="loadMsg" />

2.因为我需要把小程序的token传值给h5页面，起初我是直接通过url传值并且只传值了token

data: {
    // src:'http://xxxxxx/xxxx'+'?token='+wx.getStorageSync('token'),
  },

h5页面通过location.href进行获取拿到整个url然后截取拿到需要的token。

var token = location.href.split('token=')[1]

后来有一个bug，就是我在项目切换然后回到本页的时候我的内容并没有跟着项目的切换去改变。

我起初一直以为是生命周期的缘故，于是我在onShow监听页面显示的生命周期中去调用this.onLoad()，

因为onLoad生命周期只加载一次和onShow还是有区别的，并在网上找各种资料去解决好像也并没有解决我的bug。

我在onShow中进行了重新赋值也并没有解决问题，这显然是方向找错了。

onShow() {
   this.onLoad()
   this.setData({
     src:''
   })
   setTimeout(()=>{
    this.setData({
    src:'http://xxxxxx/xxxx'+'?token='+wx.getStorageSync('token')
    },100)
   })
  },

于是在大佬同事的指导下，我在url进行传参的时候除了token我还加了一个随机数。

data: {

    src:'http://xxxxxx/xxxx?num='+Math.random()+'&token='+wx.getStorageSync('token'),

  },

终于是解决了我的bug，因为是服务器也有缓存，在我们切换项目之后传值，我们的url并没有进行改变，所以这个页面也就只读取缓存中的。在添加随机数后，传过去的url是会改变的，服务器也就不会读取缓存而是重新调取接口。这样我每次切换项目，我的h5页面也就会重新获取最新的数据了。

如果你是通过H5进行视频播放的话最好不要用flv格式的，因为小程序的ios不支持flv格式的。

还有一些注意事项请看官方文档web-view | 微信开放文档