本項(xiàng)目使用 Gorilla WebSocket 作為聊天室后臺(tái) , Gorilla WebSocket 基于Go語(yǔ)言開(kāi)發(fā)，提供的demo實(shí)例中有聊天室源碼，不需要任何修改就能生成一個(gè)聊天室項(xiàng)目(包含后臺(tái)+web前臺(tái))

一、聊天室服務(wù)搭建步驟:

如果不想搭建服務(wù)器，可以跳過(guò)這個(gè)步驟，直接使用我的服務(wù)

1：安裝 golang , 安裝1.6以上版本，低版本問(wèn)題較多。注:下載golang需要翻墻

安裝Gorilla WebSocket模塊

1. go get github.com/gorilla/websocket

啟動(dòng)聊天室

1. $ go get github.com/gorilla/websocket
2. $ cd `go list -f '{{.Dir}}' github.com/gorilla/ websocket/examples/chat`
3. $ go run *.go

3：web客戶端

1. 訪問(wèn):http://ip:8080

二、微信小程序客戶端

1：將文件正確導(dǎo)入開(kāi)發(fā)者工具目錄。注意，websockets.js 文件地址。服務(wù)器域名，端口號(hào)，如：url: http://121.42.51.70:8080  Git clone https://github.com/ericzyh/wechat-chat.git

2：使用微信web開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目

3：修改服務(wù)地址 wechat-chat/utils/websockets.js 行1

三、小程序開(kāi)發(fā)問(wèn)題 （Q&A）

如何通過(guò)js獲取到某個(gè)組件? （發(fā)送消息后，清空輸入框）  A:

text存英文超過(guò)屏幕寬度后，會(huì)出現(xiàn)橫向滾動(dòng)條?  A: 和css一樣加上樣式:word-break:break-all;

四、todo

1：發(fā)送消息后，清空輸入框  2：名字可點(diǎn)擊，實(shí)現(xiàn)1v1通訊  3：加入聊天間

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

模板條件列表渲染完成模擬公眾號(hào)自動(dòng)回復(fù)

先看下效果

話不多說(shuō) 直接上代碼  1.頁(yè)面代碼：

1. <swiper indicator-dots="{{indicatorDots}}"
2. autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
3. <block wx:for="{{imgUrls}}">
4. <swiper-item>
5. <navigator url="{{item.link}}" hover-class="navigator-hover">
6. <image src="{{item.url}}" class="slide-image" width="355" height="150"/>
7. </navigator>
8. </swiper-item>
9. </block>
10. </swiper>
11. <block>
12. <input type="text" class="input-text" bindchange="setInputValue" placeholder="請(qǐng)輸入你要咨詢的內(nèi)容"/>
13. <button bindtap="getgetinputSEnd" class="input-button">發(fā)送</button>
14. </block>
15. <view class="chat-area">
16. <view wx:for="{{msgs}}" wx:for-index="idx" wx:for-item="itemName">
17. <view class="say-title">
18. <block wx:if="{{idx%2 != 0}}"><text class="red-font">客服：</text></block>
19. <block wx:if="{{idx%2 == 0}}"><text class="green-font">你：</text></block>
20. </view>
21. <view class="say-content">
22. <block wx:if="{{itemName.type == 'video'}}">
23. <video src="{{itemName.msg}}"></video>
24. </block>
25. <block wx:if="{{itemName.type == 'voice'}}">
26. <audio src="{{itemName.msg}}" controls loop></audio>
27. </block>
28. <block wx:if="{{itemName.type == 'image'}}">
29. <image src="{{itemName.msg}}"></image>
30. </block>
31. <block wx:if="{{itemName.type == 'text'}}">
32. <text>{{itemName.msg}}</text>
33. </block>
34. </view>
35. </view>
36. </view>

頁(yè)面中 使用了 模板的

條件渲染 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=1476197490824  列表渲染：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html?t=1476197492981

2. 樣式代碼

1. .slide-image{
2. width: 100%;
3. }
4. .input-text{
5. border:1px solid #abcdef;
6. width:88%;
7. background:#ddd;
8. line-height:100%;
9. text-indent: 0.5rem;
10. margin:1rem auto;
11. height:40px;
12. }
13. .input-button{
14. background:#48C23D;
15. margin:0.5rem 5%;
16. color:#fff;
17. }
18. .chat-area{
19. width: 90%;
20. margin