微信小程序之七(聊天室)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/han_cui/article/details/54425779

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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  1. .slide-image{  
  2.     width100%;  
  3. }  
  4. .input-text{  
  5. border:1px solid #abcdef;  
  6. width:88%;  
  7. background:#ddd;  
  8. line-height:100%;  
  9. text-indent0.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.     width90%;  
  20.     margin:0.5rem 5%;  
  21.     border:1px solid #ddd;  
  22.     background:#eee;  
  23.     font-size1rem;  
  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
 在CODE上查看代码片派生到我的代码片
  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
 在CODE上查看代码片派生到我的代码片
  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);  

展开阅读全文

没有更多推荐了,返回首页