wechat-chat
本项目使用 Gorilla WebSocket 作为聊天室后台 , Gorilla WebSocket 基于go语言开发,提供的demo实例中有聊天室源码,不需要任何修改就能生成一个聊天室项目(包含后台+web前台)
一、聊天室服务搭建步骤:
如果不想搭建服务器,可以跳过这个步骤,直接使用我的服务
-
安装 golang , 安装1.6以上版本,低版本问题较多。注:下载golang需要翻墙
-
安装Gorilla WebSocket模块
go get github.com/gorilla/websocket
-
启动聊天室
$ go get github.com/gorilla/websocket
$ cd `go list -f '{{.Dir}}' github.com/gorilla/ websocket/examples/chat`
$ go run *.go
-
web客户端
访问:http://ip:8080
二、微信小程序客户端
-
git clone https://github.com/ericzyh/wechat-chat.git
-
使用微信web开发者工具导入项目
-
修改服务地址 wechat-chat/utils/websockets.js 行1
三、小程序开发问题 (Q&A)
-
如何通过js获取到某个组件? (发送消息后,清空输入框)
A:
-
text存英文超过屏幕宽度后,会出现横向滚动条?
A: 和css一样加上样式:word-break:break-all;
-
有没有办法在view里通过js动态加入view?
A:
四、todo
- 发送消息后,清空输入框
- 名字可点击,实现1v1通讯
- 加入聊天间
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
模板条件列表渲染完成模拟公众号自动回复
先看下效果
话不多说 直接上代码
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代码
-
-
- 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. 服务器端代码
- <?php
-
- $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);