微信小程序之七（聊天室）

wechat-chat

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

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

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

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

2. 安装Gorilla WebSocket模块

   go get github.com/gorilla/websocket
   

3. 启动聊天室

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

4. web客户端
   访问:http://ip:8080

二、微信小程序客户端

将文件正确导入开发者工具目录。注意，websockets.js 文件地址。服务器域名，端口号，如：url: http://121.42.51.70:8080

1. git clone https://github.com/ericzyh/wechat-chat.git

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

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

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

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

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

3. 有没有办法在view里通过js动态加入view？
   A:

四、todo

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

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

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

先看下效果

话不多说 直接上代码

1.页面代码：

[html]  view plain  copy

 

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. 样式代码

[css]  view plain  copy

 

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:0.5rem 5%;  
21.     border:1px solid #ddd;  
22.     background:#eee;  
23.     font-size: 1rem;  
24. }  
25. .red-font{  
26.     color:#DC143C;  
27. }  
28. .green-font{  
29.     color:#48C23D;  
30. }  
31. .say-content{  
32. font-size:80%;  
33. width:80%;  
34. margin:0.5rem 5%;  
35. }  

3. js代码

[javascript]  view plain  copy

 

1. //test.js  
2. //获取应用实例  
3. var app = getApp();  
4. Page({  
5.   data: {  
6.       imgUrls: [  
7.        {  
8.           link:'/pages/index/index',  
9.           url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'   
10.        },{  
11.           link:'/pages/logs/logs',  
12.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'   
13.        },{  
14.           link:'/pages/test/test',  
15.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   
16.        }   
17.     ],  
18.     indicatorDots: true,  
19.     autoplay: true,  
20.     interval: 5000,  
21.     duration: 1000,  
22.     msgs:[],  
23.     inputdata:'',  
24.     userInfo: {}  
25.   },  
26.   
27.   onLoad: function () {  
28.     console.log('onLoad test');  
29.     console.log(this.data.msgs);  
30.   },  
31.   
32.   getgetinputSEnd:function(){  
33.       var input = this.data.inputdata;  
34.       var that = this;  
35.       var msgs = that.data.msgs;   
36.       msgs.push({msg:input,'type':'text'});  
37.       //--------------------------------- 微信数据请求  
38.        
39.       wx.request({  
40.         url: 'http://test.com:8080/test/socket.php',  //服务器更改
41.         data: {  
42.           msg:input  
43.         },  
44.         header: {  
45.             'Content-Type': 'application/json'  
46.         },  
47.         success: function(res) {  
48.           msgs.push({msg:res.data.content,'type':res.data.msgType});  
49.           that.setData({msgs:msgs});  
50.           console.log(res.data)  
51.         }  
52.       })  
53.        
54.   },  
55.   setInputValue:function(e){  
56.       console.log(e.detail);  
57.       this.data.inputdata = e.detail.value;  
58.   }  
59.   
60. })  

。。有服务器可省略。。

4. 服务器端代码

[php]  view plain  copy

 

1. <?php  
2.   
3. $params = $_REQUEST;  
4.   
5. $msg = $params['msg'];  
6. $content = array();  
7. switch ($msg) {  
8.     case '1':  
9.     case '美女':  
10.         $content['msgType'] = 'image';  
11.         $content['content'] = 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=ae4df4ec878ba61ec0eecf2f713497cc/43a7d933c895d143b233160576f082025aaf074a.jpg';  
12.         break;  
13.     case '2':  
14.     case '音乐':  
15.         $content['msgType'] = 'voice';  
16.         $content['content'] = 'http://www.w3school.com.cn/i/song.mp3';  
17.         break;  
18.     case '3':  
19.     case '视频':  
20.         $content['msgType'] = 'video';  
21.         $content['content'] = 'http://www.w3school.com.cn//i/movie.ogg';  
22.         break;    
23.     case '4':  
24.     case '笑话':  
25.         $content['msgType'] = 'text';  
26.         $content['content'] = '一男子在闹市骑摩托撞昏了一个陌生的老汉! 男子惊吓的不知所措!围观群众越来越多!突然,该男抱住老汉,声泪俱下的喊道:“爹,你等着我,我这就去给...';  
27.         break;        
28.     default:  
29.         $content['msgType'] = 'text';  
30.         $content['content'] = '您发送的指令不在识别范围内：  
31.                                你可以选择   
32.                                  1 美女   
33.                                  2 音乐  
34.                                  3 视频  
35.                                  4 笑话 ';  
36.         break;  
37.  }   
38.  echo json_encode($content);