小程序webview参数丢失问题

最近小程序开放了识别二维码功能，公司为了做客户引流要做一个项目，就是在小程序里放一个二维码，客户可以长按识别二维码。实现的方式有三种。

• wx.previewImage
• webview 中嵌入
• image 标签展示

因为wx.previewImage 需要预览，并且会有黑色背景，image 标签展示虽然简单，但是有识别后不能跳转的问题，所以综合比较下来我们决定使用webview 中嵌入的方式来实现，代码如下：

//wxml
<web-view src="{{`https://www.xxx/#/qrcode?code_id=${code_id}`}}"></web-view>

//js
Page({
  data: {
    code_id: ""
  },
  onLoad(option) {
    const code_id = option.code_id;
    this.setData({ code_id });
  }
});

代码很简单，就是后端生成scheme（如果对schema不懂的同学可以看这个文档）。前端传入code_id作为参数请求接口获取二维码。于是上线一天后，测试反应有个别客户没有显示二维码，后端查了log发现code_id都有，但是前端就是不显示，而且出问题的概率是10%左右，应该是兼容性问题。最后通过查阅资料，将代码进行如下修改：

//wxml
<web-view wx:if="{{link}}" src="{{link}}"></web-view>

//js
Page({
  data: {
    link: ""
  },
  onLoad(option) {
    const code_id = option.code_id;
    const link = 'https://scrm-wx.weiling.cn/h5/minappwebviewqrcode-h5/#/qrcode?code_id='+encodeURIComponent(code_id);
    this.setData({ link });
  }
});

通过以上的修改，就不会有问题了，于是做出以下分析：
个别手机存在webview地址没有code_id的情况下就直接渲染了，这时候webview页面因为没有code_id就出错了。于是就声明了link变量，直到code_id有值了才给link赋值，并加了wx:if的判断，只有link有值的情况下才渲染webview，保证了webview在渲染的时候link确保带上了code_id参数。