han_cui入门实战《三》聊天室，基于Gorilla WebSocket

本项目使用 Gorilla WebSocket 作为聊天室后台 , Gorilla WebSocket 基于Go语言开发，提供的demo实例中有聊天室源码，不需要任何修改就能生成一个聊天室项目(包含后台+web前台)

一、聊天室服务搭建步骤:

如果不想搭建服务器，可以跳过这个步骤，直接使用我的服务

1：安装 golang , 安装1.6以上版本，低版本问题较多。注:下载golang需要翻墙

安装Gorilla WebSocket模块

1. go get github.com/gorilla/websocket

启动聊天室

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. 访问:http://ip:8080

二、微信小程序客户端

1：将文件正确导入开发者工具目录。注意，websockets.js 文件地址。服务器域名，端口号，如：url: http://121.42.51.70:8080  Git clone https://github.com/ericzyh/wechat-chat.git

2：使用微信web开发者工具导入项目

3：修改服务地址 wechat-chat/utils/websockets.js 行1

三、小程序开发问题 （Q&A）

如何通过js获取到某个组件? （发送消息后，清空输入框）  A:

text存英文超过屏幕宽度后，会出现横向滚动条?  A: 和css一样加上样式:word-break:break-all;

四、todo

1：发送消息后，清空输入框  2：名字可点击，实现1v1通讯  3：加入聊天间

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

模板条件列表渲染完成模拟公众号自动回复

先看下效果

话不多说 直接上代码  1.页面代码：

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="请输入你要咨询的内容"/>
13. <button bindtap="getgetinputSEnd" class="input-button">发送</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>

页面中 使用了 模板的

条件渲染 ：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- 邀请