[技術博客]微信小程序開發中遇到的兩個問題的解決

IDE介紹

微信web開發者工具

前端語言

微信小程序使用的語言爲wxml和wss，使用JSON以及js邏輯進行頁面之間的交互。與網頁的html和css略有不一樣，微信小程序在此基礎上添加了本身的改進，變得更加具備微信特點。

實現添加標籤時自動聯想

前端wxml中採用了wx:if來控制標籤是否顯示。咱們在js中定義了一個大的字典來存放每一個變量，而且在每一個變量中跟了一個布爾值來判斷是否顯示。

wxml代碼中首先對搜索的聯想結果判斷了是否顯示，而且對標籤也判斷了是否顯示。wxml代碼以下：

<input type='text' class = "ipsel" confirm-type='search' bindinput='input1' bindconfirm='confirm1' bindblur='noblur'  value = "{{tei}}"></input>

<view wx:for="{{hosList}}" wx:for-item="h">

  <view data-text =  "{{h.name}}" wx:if="{{h.show}}" catchtap='clicsho'>{{h.name}}</view>

</view>

   <view class="comment-btn">
      
        <button 
    
            wx:for="{{riderCommentList}}" 
            wx:for-item="item" 
            wx:key="item.index"  
            bindtap="checkboxChange" 
            data-value="{{item.value}}" 
            data-index="{{index}}"  
            checked="{{item.selected}}"
            class="btn {{item.selected ? 'btn-selected' : ''}}" 
            wx:if = "{{item.selected}}">
            {{item.title}}❌
        </button>
        
    </view>

在js邏輯中，咱們每次獲得輸入框中的文字有變化，就調用input1函數，在這個函數中，咱們將讀到的數據存進this.data中，而且根據這個進行搜索。

input1: function (e) {
    this.setData
      ({
        tei: e.detail.value
      })
    this.serch(e.detail.value)
  },

搜索過程以下：咱們在標籤列表中按照關鍵詞搜索serch域，若是找到了，那麼將這個標籤的布爾值賦值爲true，這樣他就會顯示在標籤裏。

serch: function (key) {
    var that = this;
    var arr = [];
    console.log("assss"+key)
    for (let i in that.data.hosList1) {
      that.data.hosList1[i].show = false;
      if (that.data.hosList1[i].serch.indexOf(key) > 0) {
        that.data.hosList1[i].show = true;
        arr.push(that.data.hosList1[i])
      }
    }
    console.log(arr)
    this.setData({
      hosList: arr,
    })
  },

點擊搜索結果後，把顯示的全部聯想結果關掉，並將輸入框中內容清空，同時，將選擇的標籤的布爾域設置爲true。

clicsho: function (e) {
    var that = this;
    console.log(e);
    var tti = e.currentTarget.dataset.text;
    for(var i = 0; i< that.data.riderCommentList.length; i++)
    {
      if (that.data.riderCommentList[i].value == tti)
      {
        let string = "riderCommentList["+i+"].selected";
        that.setData
        ({
            [string]: true,
        })
      }
    }
    this.setData
      ({
        tei: "",
        hosList: []
      })
  },

解決前端頁面傳參時保留字沒法傳遞問題

前端頁面傳參時，經過json.stringify來傳遞參數，這個時候，若是遇到了傳遞的字符串中存在&、!等狀況的時候，傳遞過去的值就會在此處斷掉，致使進入下一個頁面報錯。

var para = JSON.stringify(can);
wx.navigateTo({
    url: '../homeson/homeson?info=' + para,
})

解決方法

傳參前加入下面代碼：

para = encodeURIComponent(para)

下一頁面調用前加入下面代碼：

var kk = decodeURIComponent(options.info)
this.data.info = JSON.parse(kk);

經過encodeURIComponent能夠將字符串中的保留字進行編碼，用特定的編碼替換，從而在參數傳遞過程當中解決保留字沒法傳遞問題，decodeURIComponent能夠將編碼後的保留字替換回來，從而在顯示的時候按照傳遞前進行顯示。