小程序开发 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在不同平台的实现细节也有差别,我顿时没有了怨念。

 标签: 前端开发, 小程序

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章