本文相關(guān)視頻為收費教程：收費9.9元，需要的同學(xué)請在此地址查看：http://edu.csdn.net/course/detail/3370

項目功能介紹

人工智能虛擬機(jī)器人“微軟小冰”大家玩過吧，很酷的一個應(yīng)用。發(fā)送文字、語音和圖片都能得到智能的回復(fù)。

那現(xiàn)在我們就用小程序做一個模擬的應(yīng)用，智能聊天機(jī)器人。發(fā)送文字它可以回復(fù)一段話，或一張圖片，是不是有點小酷！

下面是小程序開發(fā)的一個智能聊天機(jī)器人的應(yīng)用界面：

當(dāng)然，這種智能回復(fù)的算法和數(shù)據(jù)庫我們自己肯定是沒有的，所以我們借助于圖靈機(jī)器人的開放API接口來完成我們的功能。

圖靈機(jī)器人接口：http://apistore.baidu.com/apiworks/servicedetail/736.html，在百度API store注冊獲取appkey就可以免費使用了。

智能聊天機(jī)器人的開發(fā)步驟

1、整體框架

很簡單，兩個頁面。兩個tab，并修改window標(biāo)題欄和tabBar的顏色等屬性就好。這個全部在app.json中完成。

2、image組件的使用

image組件介紹：https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html?t=20161122 
image組件的使用與web開發(fā)的image標(biāo)簽的用法類似。這里主要關(guān)注image的mode屬性，它指定圖片的縮放以及裁剪模式，共提供了3種縮放、9種裁剪模式。

3、form表單的使用

表單，將組件內(nèi)的用戶輸入的   提交。

屬性名	類型	說明
report-submit	Boolean	是否返回formId用于發(fā)送模板消息
bindsubmit	EventHandle	攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}
bindreset	EventHandle	表單重置時會觸發(fā)reset事件

當(dāng)點擊 表單中 formType 為 submit  的 <button/> 組件時，會將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。

表單提交的要點：

• 在form內(nèi)的表單組件必須有name屬性。
• 在form內(nèi)的button的 formType 屬性為 submit 。
• form的屬性bindsubmit即為數(shù)據(jù)提交事件綁定的響應(yīng)函數(shù)。

4、wx.request接口的使用

wx.request發(fā)起的是 HTTPS 請求。一個微信小程序，同時只能有5個網(wǎng)絡(luò)請求連接。 
在開發(fā)調(diào)試模式開發(fā)工具沒有做安全檢查，因此是可以請求http的。

1. wx.request({
2. url: 'test.php', //僅為示例，并非真實的接口地址
3. data: {
4. x: '' ,
5. y: ''
6. },
7. header: {
8. 'content-type': 'application/json'
9. },
10. method: 'GET',
11. success: function(res) {
12. console.log(res.data)
13. }
14. })
15.  

了解http的對這個接口參數(shù)應(yīng)該不陌生，首先url為接口地址，data為請求的參數(shù)，header為請求的頭，header中不能設(shè)置header 中不能設(shè)置 Referer。method為請求的方法，包括：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

5、scroll-view組件的使用

scroll-view為可滾動視圖容器。這個主要用于聊天界面在有新的消息時需要自動滾動到最新聊天的位置。它的屬性還是比較多的，參看文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122

屬性名	類型	默認(rèn)值	說明
scroll-x		Boolean	false
scroll-y	Boolean	false	允許縱向滾動
upper-threshold	Number	50	距頂部/左邊多遠(yuǎn)時（單位px），觸發(fā) scrolltoupper 事件
lower-threshold	Number	50	距底部/右邊多遠(yuǎn)時（單位px），觸發(fā) scrolltolower 事件
scroll-top	Number		設(shè)置豎向滾動條位置
scroll-left	Number		設(shè)置橫向滾動條位置
scroll-into-view	String		值應(yīng)為某子元素id，則滾動到該元素，元素頂部對齊滾動區(qū)域頂部
bindscrolltoupper	EventHandle		滾動到頂部/左邊，會觸發(fā) scrolltoupper 事件
bindscrolltolower	EventHandle		滾動到底部/右邊，會觸發(fā) scrolltolower 事件
bindscroll	EventHandle		滾動時觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

這里我們主要用到scroll-y（允許縱向滾動）和scroll-top（設(shè)置豎向滾動條位置）屬性，以完成聊天內(nèi)容的自動下翻。

6、兩個坑

a、更新數(shù)據(jù)同時更新scrollTop，無法達(dá)到效果  需要先更新數(shù)據(jù)，然后更新scrollTop

要這樣寫才可以更新聊天頁面內(nèi)容并將滾動條置于正確的位置

1. this.setData({content:newContent});
2. this.setData({scrollTop:newScrollTop});
3. 而不能寫為下面這樣
4. this.setData({
5. content:newContent,
6. scrollTop:newScrollTop
7. });

b、textarea的value屬性綁定邏輯層的data數(shù)據(jù)段  在邏輯層調(diào)用setData({text:”“})，textarea中數(shù)據(jù)并不會被清空。這個問題還沒找出解決方案，等研究出方法再更新。

關(guān)于這個小程序的開發(fā)過程我錄制了視頻教程，教程是收費的，有需要的可以購買。  我的視頻教程地址：http://edu.csdn.net/course/detail/3370