You are here

Drupal8+微信小程序:8,棋谱搜索功能的实现

作者: 老葛 亚艾元软件

首页有一个搜索框,这里有一个重要的知识点,是获取用户的输入数据并跳转到搜索页面。

   首页部分,搜索模板:

    <view>

        <view>

            <view>

                <view>

                    <!--<icon type="search" size="14"></icon>-->

                    <input type="text" bindinput="inputTyping" bindconfirm="search" placeholder="棋谱搜索" value="{{inputVal}}" />

 

                </view>

 

 

            </view>

<button type="default" size="mini" plain="true" bindtap="search" hover-class="qipu-button-hover">

             搜索

</button>

 

        </view>

</view>

   这里重点部分:

<input type="text" bindinput="inputTyping" bindconfirm="search" placeholder="棋谱搜索" value="{{inputVal}}" />

 

对应的js

var app = getApp()

Page({

    data: {

        inputShowed: false,

        inputVal: ""

    },

    showInput: function () {

        this.setData({

            inputShowed: true

        });

    },

    showInput: function () {

        this.setData({

            inputShowed: true

        });

    },

    hideInput: function () {

        this.setData({

            inputVal: "",

            inputShowed: false

        });

    },

    clearInput: function () {

        this.setData({

            inputVal: ""

        });

    },

    inputTyping: function (e) {

      this.setData({

        inputVal: e.detail.value

      });

  //console.log(e.detail.value)

    },

    search: function () {

      wx.navigateTo({

        url: '/pages/search/search?keys=' + this.data.inputVal

      })

    },

  onLoad: function () {

    console.log('onLoad')

    var that = this

  }

})

  这段代码,也是从示例中复制过来的,我做了相应的修改。搜索框里面,用户输入的信息,可以通过bindinput="inputTyping",传递给逻辑层。当按了Enter键的时候, 调用逻辑层的search方法。如果用户点击了搜索按钮,也是调用逻辑层的search方法。

   在搜索页面,这是对应的实现:

Search.js

Page({

  data: {

keys:'',

    page: 0,

    pageSize: 10,

    hasMoreData: true,

    items: []

  },

  inputTyping: function (e) {

    this.setData({

        keys: e.detail.value

    });

//console.log(e.detail.value)

  },  

  search: function () {

    var that = this;

console.log(that.data.keys)

    wx.request({

          url: 'http://chess.yaiyuan.com/jsonsearch/' + that.data.keys + '?page=' + that.data.page,

          method: 'GET',

          success:function(res) {

  var nodelist = res.data

  var itemsTem = that.data.items

 

  if (nodelist.length < that.data.pageSize) {

that.setData({

  hasMoreData: false,

                  items: itemsTem.concat(nodelist)

                })

  }else{

that.setData({

  hasMoreData: true,

  page: that.data.page + 1,

                  items: itemsTem.concat(nodelist)

                })      

  }     

  //console.log(that.data.items)

          }

    })

  },

  searchNew: function () {

this.setData({

      page: 0,

      pageSize: 10,

      hasMoreData: true,

      items: []

})

    this.search()

  },

  onReachBottom: function() {

    // Do something when page reach bottom.

//this.getArticles();

if (this.data.hasMoreData) {

this.search()

} else {

wx.showToast({

  title: '没有更多数据',

})

}

  },  

  onLoad: function (options) {

    //console.log('onLoad')

    //var keys = options.keys || '';

    this.setData({

keys:options.keys

    })

    if(this.data.keys != ''){

  this.search();

}


  }

})

对应模板文件:

<view>

 

<view>

 

        <view>

            <view>

                <view>

                        <input type="text" bindinput="inputTyping" bindconfirm="searchNew" placeholder="棋谱搜索" value="{{keys}}" />

 

                </view>

 

 

            </view>

<button type="default" size="mini" plain="true" bindtap="searchNew" hover-class="qipu-button-hover">

             搜索

</button>

 

        </view>

 

<view class="weui-cells searchbar-result" wx:if="{{keys.length > 0}}">

<block wx:for="{{items}}">

<navigator url="/pages/qipus/qipuitem?uuid={{item.uuid}}" hover-class="weui-cell_active">


            <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image src="{{item.img_url}}" />

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view>{{item.title}}</view>

                        <view>{{item.event}}</view>

 

                    </view>

</navigator>

</block>

</view>  

 

</view>

</view>

   模板文件中,搜索框部分的代码,和首页类似,其它部分,就是根据用户的输入,动态的向服务器发起请求,获取数据,并展示。

   在这里,微信发起http请求的代码,在测试的事后是可以工作的,但是上传到微信端,成为体验版本,在真实的微信上面运行却是不能工作:

'http://chess.yaiyuan.com/jsonsearch/' + that.data.keys + '?page=' + that.data.page,

  搜索不能生效,我经过测试定位,找到了这里,正确的代码应该这样写:

wx.request({

          url: 'https://chess.yaiyuan.com/jsonsearch/' + encodeURIComponent(that.data.keys) + '?page=' + that.data.page,

  需要使用encodeURIComponent处理一下用户输入,这样才能解决中文字符问题。


Drupal版本: