[技术博客]微信小程序开发中遇到的两个问题的解决

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可以将编码后的保留字替换回来，从而在显示的时候按照传递前进行显示。