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