作者： 老葛 亚艾元软件
首页有一个搜索框，这里有一个重要的知识点，是获取用户的输入数据并跳转到搜索页面。
首页部分，搜索模板：
<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处理一下用户输入，这样才能解决中文字符问题。