小程序模板网

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

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

 
 
 

本项目使用 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-area{
  19. width: 90%;
  20. margin


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17963.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询