小程序用web-view到入外部h5

项目需求，要在小程序里面引入一个外部的h5播放页面

web-view

组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面

1
<web-view src="https://mp.weixin.qq.com/"></web-view>

话不多说，说说要达到的效果，首先我们在另外的一个页面点击播放以后，传入一个id进入web-view的页面里面,然后web-view页面通过不同的id来打开不同的外部网站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
  * 页面的初始数据
  */
 data: {
   webSrc: "https://xxxxxx/index1.html?xxx=1",
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   if (options.id > 0){
     WebUrl = this.data.webSrc + "&xxxx=" + options.id;
   }
   this.setData({
     webSrc: WebUrl
   })
 },
1
<web-view src='{{webSrc}}' ></web-view>

感觉这样没用什么问题，可是效果就是出不来。

反复找了好久，没找的问题，然而下面这样写就出来了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
  * 页面的初始数据
  */
 data: {
   webSrc: "",
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   var WebUrl = "https://book.gzdaze.com/index1.html?isFull=1";
   if (options.id > 0){
     WebUrl = WebUrl + "&bookId=" + options.id;
   }
   this.setData({
     webSrc: WebUrl
   })
 },

对没错，这样写就可以动态跳转到相应的页面。

具体的原因我也不知道，这得问开发者了。我猜测是首先加载的时候，webSrc写入到页面，然后web-view发现有HTTPS，然后就自动加载外部h5了，后面再改变网址就不生效了，毕竟他已经加载了外部页面。而下面的这种写法则是加载data的时候，传入到页面的是空值，web-view没用检测到合法地址，则不加载页面，到加载onLoad的时候，动态改变webUrl加载到页面，然后web-view发现有合法地址，然后加载外部h5