微信小程序通過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>