🌞

第一个微信小程序:快速查询界面的规划和布置

快速查询界面的布置

查询页面的组成:1个搜索框表单输入,一个搜索按钮,后面还有一堆快捷查询的搜索按钮,用户点击这些按钮可以快速访问相应的动词变位。页面中搜索的html代码直接从weui的示例中挑选即可,而有些特殊的则是查询按钮,当按下这个按钮时需要呼出picker,于是需要将picker标签包围在button周围:

  <view class="weui-cells__title">快速查询</view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__bd">
        <input class="weui-input" placeholder="请输入单词" bindinput="input_word_conj" />
      </view>
    </view>
  </view>

  <view class="button-sp-area">
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <button type="primary">查询</button>
    </picker>
  </view>

picker绑定的是bindchange,同样在js文件中需要有相应的函数:

  bindPickerChange: function(e) {
    var idx_shitai = e.detail.value;
    console.log(idx_shitai);
    idx_shitai = parseInt(idx_shitai) + 2;
    this.setData({
      idx_shitai: idx_shitai
    })
    var search_word = this.data.input_word_conj;
    //下接
}

picker中需要有对应的显示范围,即range,这边需要在js文件的data中定义:

Page({
  data: {
    array: ['直陈式 复合过去时 Indicatif Passé composé', '直陈式 现在时 Indicatif Présent', '直陈式 未完成过去时 Indicatif Imparfait', '直陈式 愈过去时 Indicatif Plus-que-parfait', '直陈式 简单过去时 Indicatif Passé simple', '直陈式 先过去时 Indicatif Passé antérieur', '直陈式 简单将来时 Indicatif Futur', '直陈式 先将来时 Indicatif Futur antérieur', '直陈式 最近将来时 Indicatif Futur proche', '条件式 现在时 Conditionnel Présent', '条件式 过去时 Conditionnel Passé', '虚拟式 现在时 Subjonctif Présent', '虚拟式 未完成过去时 Subjonctif Imparfait', '虚拟式 愈过去时 Subjonctif Plus-que-parfait', '虚拟式 过去时 Subjonctif Passé', '命令式 Impératif Présent', '分词 Participe Présent & Passé'],
},

如果用户没有输入内容而直接按的搜索,那么将弹出一个toast,下面这段在bindPickerChange函数中。在toast中image的优先级将高于icon,这里将会显示一个感叹号。此外,最后将执行exp函数,这个函数将查找search_word在数据表中的位置:

    //上接
if (search_word == null) {
      wx.showToast({
        title: '请输入内容!',
        image: '/style/gantanhao.png',
        icon: 'sucess',
        duration: 1000,
        mask: true,
      })
      return;
    }

    this.exp(search_word);
}

查询输入的search_word,这里的代码和默写界面的查找非常相像,但是又有不同。大致逻辑是这样的:首先将遍历数据表中word列的所有数据(即单词本身),并且将这些数据以字符串的方式连接成数组,然后用indexOf来查询search_word在这个数组中第一次出现的位置,这里的idx就是一个数字。接下来的事情就和默写界面几乎一样:

  exp: function(search_word) {
    var i;
    var temp_txt = [];
    for (i in list.conjAnswer) {
      temp_txt = temp_txt.concat(list.conjAnswer[i].word)
    }
    var idx = temp_txt.indexOf(search_word);

    if (idx == -1) {
      wx.showToast({
        title: '暂时没有收录',
        image: '/style/gantanhao.png',
        icon: 'sucess',
        duration: 1000,
        mask: true,
      })
      return;
    }
    switch (this.data.idx_shitai) {
      case 2:
        var random_shitai_chinois = "直陈式 复合过去时";
        var word_je = list.conjAnswer[idx];
        var word_tu = list.conjAnswer[idx + 1];
        var word_il = list.conjAnswer[idx + 2];
        var word_nous = list.conjAnswer[idx + 3];
        var word_vous = list.conjAnswer[idx + 4];
        var word_ils = list.conjAnswer[idx + 5];
        var shitai_je = word_je["fuhe_guoqushi"];
        var shitai_tu = word_tu["fuhe_guoqushi"];
        var shitai_il = word_il["fuhe_guoqushi"];
        var shitai_nous = word_nous["fuhe_guoqushi"]
        var shitai_vous = word_vous["fuhe_guoqushi"];
        var shitai_ils = word_ils["fuhe_guoqushi"];
        break;
//省略
}

快速查询点选

有了上述的工作成果,这里不难实现,每个按钮只需要这样的三行就能搞定:

  etre: function() {
    this.tap_word("être");
  },

  avoir: function () {
    this.tap_word("avoir");
  },

  faire: function () {
    this.tap_word("faire");
  },

这里再加上一个tap_word函数,它做的事情和读取input框框内的输入值差不多:

  tap_word: function(tap_word) {
    var input_word_conj = tap_word;
    this.setData({
      input_word_conj: tap_word
    })
    console.log(input_word_conj);
  },

最终给用户反馈结果的显示方式依旧不变,使用了 wx.showModal,详情请见第一个微信小程序:默写界面的规划和布置

感谢您的使用! 如有任何疑问和建议,欢迎联系我的邮箱:[email protected]xd.red 或者搜索并关注公众号:uniquelabcn 直接发送反馈。

updatedupdated2020-01-252020-01-25