微信小程序通过URL传值wx:if的注意点

微信小程序通过URL传值wx:if的注意点

在写微信小程序的时候有些页面大致相同，无非就是多个状态让控件可以编辑隐藏等等，所以页面复用显得方便很多。而且URL传值作为最简单的传值方法，两者相互配合能够完成需求那简直完美

比如有个审核加查看详情的页面，平时查看的时候不需要审核按钮，审核的时候才让底部的按钮显示出来

父页面跳转

wx.navigateTo({
      url: '../checkPage?isCheck=false&checkId=' + 
      				event.currentTarget.dataset.index
})

二级页面wx:if判断是否显示审核按钮，根据微信官方文档的建议，这里使用了block

block wx:if

因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意: <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

代码实现:

<block wx:if="{{isCheck}}">
  <view class="verify">
    <view class="agree" bindtap="verify" data-index="0">同意</view>
    <view class="refuse" bindtap="verify" data-index="1">拒绝</view>
  </view>
</block>

onLoad: function(options) {
    this.setData({
      isCheck: options.isCheck,
    })
  },

这里就会碰到一个问题，就是onLoad取值始终是没有问题的，但是wx:if里的判断一直为真，细心的小伙伴可能发现了，跳转的时候URL经过了URLEncode编码，所以二级页面取到的true和false都是字符串，而wx:if=’{{flag}}‘的flag只要不是’’、null和undefined，都是为真，这样审核按钮不管是true还是false就一直显示了。所以正确的写法应该是下面的这种:

<block wx:if="{{isCheck == 'true'}}">
  <view class="verify">
    <view class="agree" bindtap="verify" data-index="0">同意</view>
    <view class="refuse" bindtap="verify" data-index="1">拒绝</view>
  </view>
</block>