知識林微信小程序實例開發《二》問答機器人，笑話大全
一：問答機器人實例主要功能風格類似聊天窗口用戶發送信息時，調用機器人接口返回回答信息將所有信息記錄到本地存儲中每次打開都顯示最近的問答數據當發送空信息時有相應提示先看 ...
一：問答機器人
實例主要功能
- 風格類似聊天窗口
- 用戶發送信息時，調用機器人接口返回回答信息
- 將所有信息記錄到本地存儲中
- 每次打開都顯示最近的問答數據
- 當發送空信息時有相應提示
先看效果圖
關鍵代碼分析
- 提示信息
wx.showToast({
title: '請輸入您的問題',
icon: 'loading'
});
說明：icon可以接收loading、success（默認）
- 存儲數據到本地
setContent2Storage: function(data) {
wx.setStorage({
key: 'content',
data: data,
success: function(res){
// success
//console.log("=====保存成功=====");
}
})
}
說明：數據存儲是以鍵值對的形式存在，key表示鍵，data表示值，可以是字段串，也可以是對象
- 從本地存儲中取值
loadContent: function() {
var page = this;
wx.getStorage({
key: 'content',
success: function(res){
// success
console.log(res);
page.setData({content:res.data});
}
})
}
說明：上面的setContent2Storeage和loadContent都是屬于自己在本例中的封裝，微信所封裝的方法分別是wx.setStorage和wx.getStorage，通過鍵即可獲取出數據，并將數據設置到page的data中，這樣即可更新頁面中的數據。
-
index.wxml
<view class="main-container">
<scroll-view class="content" scroll-y="true">
<import src="../templates/me-tpl"/>
<import src="../templates/robot-tpl"/>
<block wx:for="{{content}}" wx:key="item">
<template wx:if="{{item.isRobot}}" is="robot-tpl" data="{{item}}"/>
<template wx:if="{{!item.isRobot}}" is="me-tpl" data="{{item}}"/>
</block>
</scroll-view>
<view class="sender-container">
<view style="flex-grow:1">
<input placeholder="輸入您的問題" value="{{q}}" bindinput="inputEvent"/>
</view>
<view>
<button type="primary" bindtap="queryAnswer">發送</button>
</view>
</view>
</view>
說明：在這個實例中增加使用了scroll-view可滾動的視圖容器。詳細說明可參考官方scroll-view，也使用了wx:if用于判斷該使用哪個視圖模板
- 視圖模板
<template name="me-tpl">
<view class="me">
<image src="../imgs/me.png"/>
<view>
<text class="date">{{item.date}}</text>
<text>{{item.text}}</text>
</view>
</view>
</template>
二：笑話大全以上只是貼出了一些相對關鍵的代碼，直接使用無法運行。
機器人的接口參考了聚合數據，也感謝聚合數據為我們提供了各種接口。
本文章源代碼：https://github.com/zsl131/wx-app-study/tree/master/robot
源碼下載：robot.zip
實例主要功能
-
使用
tabbar做底部導航菜單 -
使用
onReachBottom觸發底部事件 -
自定義工具函數放到
util.js中 - 上拉至底部時獲取新數據
- 將新數據組合到原有數據中一起顯示
先看效果圖
關鍵代碼分析
- tabBar的使用
在app.json中增加以下代碼
"tabBar": {
"color": "#888",
"selectedColor": "#444",
"list": [{
"pagePath": "pages/index/index",
"text": "笑話",
"iconPath": "pages/imgs/joke.png",
"selectedIconPath": "pages/imgs/joke2.png"
}, {
"pagePath": "pages/pictures/main",
"text": "趣圖",
"iconPath": "pages/imgs/pic.png",
"selectedIconPath": "pages/imgs/pic2.png"
}]
}
說明：tabBar是一個數據，只能配置至少2個、最多5個tab，tab按數組順序排序，更多詳情說明請參考官方文檔tabBar
- 笑話部份代碼
var util = require("../../utils/util.js");
var app = getApp();
Page({
data:{
jokes:[],
page: 1,
pagesize:15
},
onLoad:function(options){
// 生命周期函數--監聽頁面加載
this.loadJokes();
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數
this.setData({page: this.data.page+1});
this.loadJokes();
},
loadJokes: function() {
var that = this;
var key = app.globalData.appkey;
var url = "http://japi.juhe.cn/joke/content/text.from";
wx.request({
url: url,
data: {
key: key,
page: that.data.page,
pagesize: that.data.pagesize
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 設置請求的 header
success: function(res){
// success
//console.log(res);
that.rebuildData(res.data.result.data);
}
})
},
rebuildData: function(data) {
var tmp_data = [];
for(var i=0; i<data.length; i++) {
var d = data[i];
tmp_data.push({"updatetime":d.updatetime, "content":util.replaceAll(d.content, " ", "\r\n")});
}
//console.log(tmp_data);
//tmp_data = tmp_data.push(this.data.jokes);
this.setData({jokes: this.data.jokes.concat(tmp_data)});
}
})
說明：在這里使用了require來引用外部js，util.replaceAll就是引用的外部函數。this.data.jokes.concat(tmp_data)將原始數據與最新數據組合在一起，實現無刷新顯示。
- util工具類
function replaceAll(source, oldStr, newStr) {
while (source.indexOf(oldStr) >= 0){
source = source.replace(oldStr, newStr);
}
return source;
}
module.exports = {
formatTime: formatTime,
replaceAll: replaceAll
}
- 視圖頁面（比較簡單）
<view class="container">
<import src="../templates/joke-tpl"/>
<block wx:for="{{jokes}}" wx:key="item">
<template is="joke-tpl" data="{{item, index}}"/>
</block>
</view>
- 視圖模板
<template name="joke-tpl">
<view class="single-joke">
<view><view class="num">{{index+1}}</view>{{item.updatetime}}</view>
<text>{{item.content}}</text>
</view>
</template>
以上只是貼出了一些相對關鍵的代碼，直接使用無法運行。
機器人的接口參考了聚合數據，也感謝聚合數據為我們提供了各種接口。
本文章源代碼：https://github.com/zsl131/wx-app-study/tree/master/joke
源碼下載：joke.zip
