小程序开发 webview 中无法获取参数的解决方法

小程序开发已经支持 web-view 的跳转，最近开发的一项功能正好APP与小程序均要使用，于是自然想到使用 web-view 的方式。场景是这样的：

用户打开APP/小程序，查看自己个人信息卡片，根据不同的 userid 返回不同的卡片样式。

H5实现

H5实现很简单，直接使用页面类似地址 https://xxx.com/xxx.html?userid=2345。

所以可以看出 2345 这个 userid 是需要我们动态传入的。

小程序实现

小程序中跳转 web-view 需要生成一个新的页面，然后里面嵌入一个 <web-view></web-view> 组件。

所以想当然的可以这样写：

<web-view src="https://xxx.com/xxx.html?userid={{userid}}"></web-view>

其中 userid 我们需要在跳转之前传入，并在当前的 onLoad 中获取一下，代码如下：

/**
  * 页面的初始数据
  */
data: {
  userid: ''
},

/**
  * 生命周期函数--监听页面加载
  */
onLoad: function (option) {
  if (option.userid) {
    this.setData({
      userid: option.userid
    })
  }
},

遇到的问题

使用上面的方法在 iOS 下完美，但是在 Android 下经常会出现 H5 页面没有获取到 userid 的情况。后来思考了一下，应该是 <web-view> 组件在没有取到参数的情况下（也就是 onLoad 没有执行完成）的时候就已经打开了我们的 H5 页面。

解决方法

使用下面的方法测试一下我的猜想。

<block wx:if="{{userid}}">
  <web-view src="https://xxx.com/xxx.html?userid={{userid}}"></web-view>
</block>

使用真机及模拟器测试，均可以正常取到参数了。

PS: 即使腾讯这种级别的公司开发出来的APP在不同平台的实现细节也有差别，我顿时没有了怨念。