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

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.页面代码：

 <swiper indicator-dots="{ {indicatorDots}}"
         autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
       <block wx:for="{ {imgUrls}}">
         <swiper-item>
            <navigator url="{ {item.link}}" hover-class="navigator-hover">
             <image src="{ {item.url}}" class="slide-image" width="355" height="150"/>
            navigator>
         swiper-item>
       block>
 swiper>
 <block>
     <input type="text" class="input-text" bindchange="setInputValue"  placeholder="请输入你要咨询的内容"/>
     <button bindtap="getgetinputSEnd" class="input-button">发送button>
 block>
 <view class="chat-area">
     <view wx:for="{ {msgs}}" wx:for-index="idx" wx:for-item="itemName">
         <view class="say-title">
             <block wx:if="{ {idx%2 != 0}}"><text class="red-font">客服：text>block>
             <block wx:if="{ {idx%2 == 0}}"><text class="green-font">你：text>block>
         view>
         <view class="say-content">
             <block wx:if="{ {itemName.type == 'video'}}">
                 <video src="{ {itemName.msg}}">video>
             block>
             <block wx:if="{ {itemName.type == 'voice'}}">
                 <audio src="{ {itemName.msg}}" controls loop>audio>
             block>
             <block wx:if="{ {itemName.type == 'image'}}">
                 <image src="{ {itemName.msg}}">image>
             block>
             <block wx:if="{ {itemName.type == 'text'}}">
                 <text>{ {itemName.msg}}text>
             block>
         view>
     view>
 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. 样式代码

 .slide-image{
     width: 100%;
 }
 .input-text{
 border:1px solid #abcdef;
 width:88%;
 background:#ddd;
 line-height:100%;
 text-indent: 0.5rem;
 margin:1rem auto;
 height:40px;
 }
 .input-button{
 background:#48C23D;
 margin:0.5rem 5%;
 color:#fff;
 }
 .chat-area{
     width: 90%;
     margin:0.5rem 5%;
     border:1px solid #ddd;
     background:#eee;
     font-size: 1rem;
 }
 .red-font{
     color:#DC143C;
 }
 .green-font{
     color:#48C23D;
 }
 .say-content{
 font-size:80%;
 width:80%;
 margin:0.5rem 5%;
 }

3. js代码

 //test.js
 //获取应用实例
 var app = getApp();
 Page({
   data: {
       imgUrls: [
        {
           link:'/pages/index/index',
           url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
        },{
           link:'/pages/logs/logs',
           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
        },{
           link:'/pages/test/test',
           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        }
     ],
     indicatorDots: true,
     autoplay: true,
     interval: 5000,
     duration: 1000,
     msgs:[],
     inputdata:'',
     userInfo: {}
   },

   onLoad: function () {
     console.log('onLoad test');
     console.log(this.data.msgs);
   },

   getgetinputSEnd:function(){
       var input = this.data.inputdata;
       var that = this;
       var msgs = that.data.msgs;
       msgs.push({msg:input,'type':'text'});
       //--------------------------------- 微信数据请求

       wx.request({
         url: 'http://test.com:8080/test/socket.php',  //服务器更改
         data: {
           msg:input
         },
         header: {
             'Content-Type': 'application/json'
         },
         success: function(res) {
           msgs.push({msg:res.data.content,'type':res.data.msgType});
           that.setData({msgs:msgs});
           console.log(res.data)
         }
       })

   },
   setInputValue:function(e){
       console.log(e.detail);
       this.data.inputdata = e.detail.value;
   }

 })

。。有服务器可省略。。

4. 服务器端代码

 $params = $_REQUEST;

 $msg = $params['msg'];
 $content = array();
 switch ($msg) {
     case '1':
     case '美女':
         $content['msgType'] = 'image';
         $content['content'] = 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=ae4df4ec878ba61ec0eecf2f713497cc/43a7d933c895d143b233160576f082025aaf074a.jpg';
         break;
     case '2':
     case '音乐':
         $content['msgType'] = 'voice';
         $content['content'] = 'http://www.w3school.com.cn/i/song.mp3';
         break;
     case '3':
     case '视频':
         $content['msgType'] = 'video';
         $content['content'] = 'http://www.w3school.com.cn//i/movie.ogg';
         break;
     case '4':
     case '笑话':
         $content['msgType'] = 'text';
         $content['content'] = '一男子在闹市骑摩托撞昏了一个陌生的老汉! 男子惊吓的不知所措!围观群众越来越多!突然,该男抱住老汉,声泪俱下的喊道:“爹,你等着我,我这就去给...';
         break;
     default:
         $content['msgType'] = 'text';
         $content['content'] = '您发送的指令不在识别范围内：
                                你可以选择
                                  1 美女
                                  2 音乐
                                  3 视频
                                  4 笑话 ';
         break;
  }
  echo json_encode($content);