当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序实现即时通信聊天功能的实例代码

微信小程序如何实现即时通信聊天功能

  • 发布时间:
  • 作者:码农之家
  • 点击:126

这篇文章主要知识点是关于微信小程序、聊天功能、即时通信聊天功能、微信小程序实现聊天对话(文本、图片)功能 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

移动网页设计与开发:HTML5+CSS3+JavaScript
  • 类型:移动开发大小:30.2 MB格式:PDF作者:Peter Gasston
立即下载

微信小程序实现即时通信聊天功能的实例代码

项目背景:小程序中实现实时聊天功能

一、服务器域名配置

配置流程

微信小程序实现即时通信聊天功能的实例代码

配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html

二、nginx中配置反向代理加密websocket(wss)

upstream websocket{
 hash $remote_addr consistent;
 server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30s;
}
server {
 listen 80;
 server_name www.xxxx.cn;
 rewrite ^(.*)$ https://$host$1 permanent;
}
server
 { 
 listen 443;
  server_name www.xxxx.cn;
  ssl on;
  root /home/wwwroot/yzcp;
  index index.php index.html index.htm;
  ssl_certificate /usr/local/nginx/conf/cert/1526060965511.pem;#这里是服务端证书路径
  ssl_certificate_key /usr/local/nginx/conf/cert/1526060965511.key;#这里是密钥路径
  ssl_session_timeout 5m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;
  ssl_verify_client off;
 #隐藏index.php
  location / {
 #index index.php;
 deny 127.0.0.1;
   if (!-e $request_filename) {
    #一级目录
    rewrite ^(.*)$ /index.php?s=$1 last;
    break;
   }
   #wss配置
   client_max_body_size 100m;
   proxy_redirect off;
   proxy_pass http://websocket;#反向代理转发地址
   proxy_set_header Host $host;# http请求的主机域名
   proxy_set_header X-Real-IP $remote_addr;# 远程真实IP地址
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之后转发之前的IP地址
   proxy_read_timeout 604800s;#websocket心跳时间,默认是60s
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "Upgrade";
  }
  location ~ .+\.php {
   fastcgi_pass unix:/tmp/php-cgi.sock;
   fastcgi_index index.php;
   include fastcgi_params;
   set $path_info "";
   set $real_script_name $fastcgi_script_name;
    if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {
    set $real_script_name $1;
    set $path_info $2;
   }
   fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
   fastcgi_param SCRIPT_NAME $real_script_name;
   fastcgi_param PATH_INFO $path_info;
  }
 
  #防盗链开始
  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
 {
 expires  30d;
 }
 location ~ .*\.(js|css)?$
 {
 expires  12h;
 }
 access_log /home/wwwlogs/www1537ucn.log;
 }

三、安装swoole

编译安装:

wget http://pecl.php.net/get/swoole-1.9.3.tgz  //下载swoole 
tar -zvxf swoole-1.9.3.tgz  //解压swoole
cd swoole-1.9.3/;  //进入swoole
/usr/local/php54/bin/phpize;  //生成configure
./configure --with-php-config=/usr/local/php/bin/php-config
make && make install   //安装
cd /phpstudy/server/php/lib/php/extensions/no-debug-non-zts-20121212 //查看是否安转上了swoole.so (注意:此文件下边都是你安装的拓展)
vim /phpstudy/server/php/etc/php.ini  //在php.ini添加extension=swoole.so加入到文件最后一行
lnmp restart; //重启nginx 
php -m; //查看phpinfo,这时候swoole拓展已经装上了

四、服务器端运行程序

1、创建server.php放到项目的根目录即可

<?php
//实例化一个swoole的websocket服务监听本机的9501端口
$server = new swoole_websocket_server("服务器IP", 9090);
//只需要绑定要监听的ip和端口。如果ip指定为127.0.0.1,则表示客户端只能位于本机才能连接,其他计算机无法连接。
//端口这里指定为9090,可以通过netstat查看下该端口是否被占用。如果该端口被占用,可更改为其他端口,如9502,9503等。
$server->on('open', function (swoole_websocket_server $server, $request) {
 echo "你好连接成功{$request->fd}\n";
});
$server->on('message', function (swoole_websocket_server $server, $frame) {
 foreach($server->connections as $key => $fd) {
  $user_message = $frame->data;
  $server->push($fd, $user_message);
 }
});
$server->on('close', function ($ser, $fd) {
 echo "client {$fd} closed\n";
});
$server->start();
?>

2、由于swoole_server只能运行在CLI模式下,所以不要试图通过浏览器进行访问,这样是无效的,我们在命令行下面执行,注意一定要找到php的绝对路径php  server.php  (这行代码的意思是,把程序在服务器跑起来)

注意:php server.php命令运行后,下面的黑框关闭后将无法聊天。所以一般使用命令:nohup php server.php &

微信小程序实现即时通信聊天功能的实例代码

五、客户端

1、网页代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>聊天</title>
 <style type="text/css">
  #show{
   width: 600px;
   height: 300px;
   overflow-y: scroll;
  }
  .my-message{
   background-color: rgba(105, 105, 105, 0.64);
   color: #9e0505;
   width: 200px;
   float: right;
   padding: 10px;
  }
  .other-message{
   background-color: rgba(105, 105, 105, 0.64);
   color: #9e0505;
   width: 200px;
   float: left;
   padding: 10px;
  }
 </style>
</head>
<body>
 <div id="show"></div>
 <div class="panel">
  内容:<textarea id="content"></textarea>
  收信人:<input type="text" id="touser">
  <input type="button" id="send-btn" value="发送">
  <input type="button" id="close-btn" value="关闭">
 </div>
</body>
<script src="__PUBLIC__/js/jquery-1.10.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
 var socket = new WebSocket("wss://域名");
 $("#close-btn").click(function () {
  socket.close();
 })
 $("#send-btn").click(function () {
  var touser = $("#touser").val();
  var content = $("#content").val();
  var htmlstr = "<div><p class='my-message'>我:"+content+"</p></div>";
  $("#show").append(htmlstr);
  socket.send(content+"@"+touser);
 })
 socket.onmessage = function (p1) {
  var htmlstr = "<div><p class='other-message'>"+p1.data+"</p></div>";
  $("#show").append(htmlstr);
 }
</script>
</html>

2、小程序端的代码

Uitls/websocket.js:

var url = 'wss://www.xxx.cn';//服务器地址
function connect(user, func) {
 wx.connectSocket({
 url: url,
 header: { 'content-type': 'application/json' },
 success: function () {
  console.log('websocket连接成功~')
 },
 fail: function () {
  console.log('websocket连接失败~')
 }
 })
 wx.onSocketOpen(function (res) {
 wx.showToast({
  title: 'websocket已开通~',
  icon: "success",
  duration: 2000
 })
 //接受服务器消息
 wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据
 });
 wx.onSocketError(function (res) {
 wx.showToast({
  title: 'websocket连接失败,请检查!',
  icon: "none",
  duration: 2000
 })
 })
}
//发送消息
function send(msg) {
 wx.sendSocketMessage({
 data: msg
 });
}
module.exports = {
 connect: connect,
 send: send
}

JS:

// pages/socks/socks.js
const app = getApp()
var websocket = require('../../utils/websocket.js');
var utils = require('../../utils/util.js');
Page({
 /**
 * 页面的初始数据
 */
 data: {
 newslist: [],
 userInfo: {},
 scrollTop: 0,
 increase: false,//图片添加区域隐藏
 aniStyle: true,//动画效果
 message: "",
 previewImgList: []
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function () {
 var that = this
 if (app.globalData.userInfo) {
  this.setData({
  userInfo: app.globalData.userInfo
  })
 }
 //调通接口
 websocket.connect(this.data.userInfo, function (res) {
  // console.log(JSON.parse(res.data))
  var list = []
  list = that.data.newslist
  list.push(JSON.parse(res.data))
  that.setData({
  newslist: list
  })
 })
 },
 // 页面卸载
 onUnload() {
 wx.closeSocket();
 wx.showToast({
  title: '连接已断开~',
  icon: "none",
  duration: 2000
 })
 },
 //事件处理函数
 send: function () {
 var flag = this
 if (this.data.message.trim() == "") {
  wx.showToast({
  title: '消息不能为空哦~',
  icon: "none",
  duration: 2000
  })
 } else {
  setTimeout(function () {
  flag.setData({
   increase: false
  })
  }, 500)
  websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl + '" }')
  this.bottom()
 }
 },
 //监听input值的改变
 bindChange(res) {
 this.setData({
  message: res.detail.value
 })
 },
 cleanInput() {
 //button会自动清空,所以不能再次清空而是应该给他设置目前的input值
 this.setData({
  message: this.data.message
 })
 },
 increase() {
 this.setData({
  increase: true,
  aniStyle: true
 })
 },
 //点击空白隐藏message下选框
 outbtn() {
 this.setData({
  increase: false,
  aniStyle: true
 })
 },
 //发送图片
 chooseImage() {
 var that = this
 wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
  // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  var tempFilePaths = res.tempFilePaths
  // console.log(tempFilePaths)
  wx.uploadFile({
   url: 'wss://www.xxx.cn', //服务器地址
   filePath: tempFilePaths[0],
   name: 'file',
   headers: {
   'Content-Type': 'form-data'
   },
   success: function (res) {
   if (res.data) {
    that.setData({
    increase: false
    })
    websocket.send('{"images":"' + res.data + '","date":"' + utils.formatTime(new Date()) + '","type":"image","nickName":"' + that.data.userInfo.nickName + '","avatarUrl":"' + that.data.userInfo.avatarUrl + '"}')
    that.bottom()
   }
   }
  })
  }
 })
 },
 //图片预览
 previewImg(e) {
 var that = this
 //必须给对应的wxml的image标签设置data-set=“图片路径”,否则接收不到
 var res = e.target.dataset.src
 var list = this.data.previewImgList //页面的图片集合数组
 //判断res在数组中是否存在,不存在则push到数组中, -1表示res不存在
 if (list.indexOf(res) == -1) {
  this.data.previewImgList.push(res)
 }
 wx.previewImage({
  current: res, // 当前显示图片的http链接
  urls: that.data.previewImgList // 需要预览的图片http链接列表
 })
 },
 //聊天消息始终显示最底端
 bottom: function () {
 var query = wx.createSelectorQuery()
 query.select('#flag').boundingClientRect()
 query.selectViewport().scrollOffset()
 query.exec(function (res) {
  wx.pageScrollTo({
  scrollTop: res[0].bottom // #the-id节点的下边界坐标
  })
  res[1].scrollTop // 显示区域的竖直滚动位置
 })
 },
})

WXML:

<!--pages/socks/socks.wxml-->
<view class="news" bindtap='outbtn'>
<view class="chat-notice" wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入聊天室</view>
<view class="historycon">
<scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}">
<block wx:for="{{newslist}}" wx:key>
 <!-- 历史消息 -->
<!-- <view class="chat-news">
<view >
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
<text class="name">{{ item.nickName }}{{item.date}}</text>
</view>
<view class='you_left'>
<block wx:if="{{item.type=='text'}}">
<view class='new_txt'>{{item.content}}</view>
</block>
<block wx:if="{{item.type=='image'}}">
<image class="selectImg" src="{{item.images}}"></image>
</block>
</view>
</view> -->
<view>{{item.date}}</view>
<!--自己的消息 -->
<view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}">
<view >
<text class="name">{{ item.nickName }}</text>
<image class='new_img' src="{{userInfo.avatarUrl}}"></image>
</view>
<view class='my_right'>
<block wx:if="{{item.type=='text'}}">
<view class='new_txt'>{{item.content}}</view>
</block>
<block wx:if="{{item.type=='image'}}">
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
</block>
</view>
</view>
<!-- 别人的消息 -->
<view class="chat-news" wx:else>
<view >
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
<text class="name">{{ item.nickName }}</text>
</view>
<view class='you_left'>
<block wx:if="{{item.type=='text'}}">
<view class='new_txt'>{{item.content}}</view>
</block>
<block wx:if="{{item.type=='image'}}">
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
</block>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
<view id="flag"></view>
<!-- 聊天输入 -->
<view class="message">
<form bindreset="cleanInput" class="sendMessage">
<input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input>
<view class="add" bindtap='increase'>+</view>
<button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button>
</form>
<view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">
<view class="image" bindtap='chooseImage'>相册 </view>
</view>
</view>

WXSS:

/* pages/socks/socks.wxss */
page {
background-color: #f7f7f7;
height: 100%;
}
/* 聊天内容 */
.news {
padding-top: 30rpx;
text-align: center;
/* height:100%; */
box-sizing:border-box;
}
#flag{
margin-bottom: 100rpx;
height: 30rpx;
}
.chat-notice{
text-align: center;
font-size: 30rpx;
padding: 10rpx 0;
color: #666;
}
.historycon {
height: 100%;
width: 100%;
/* flex-direction: column; */
display: flex;
border-top: 0px;
}
/* 聊天 */
.chat-news{
width: 100%;
overflow: hidden;
}
.chat-news .my_right {
float: right;
/* right: 40rpx; */
padding: 10rpx 10rpx;
}
.chat-news .name{
margin-right: 10rpx;
}
.chat-news .you_left {
float: left;
/* left: 5rpx; */
padding: 10rpx 10rpx;
}
.selectImg{
display: inline-block;
width: 150rpx;
height: 150rpx;
margin-left: 50rpx;
}
.my_right .selectImg{
margin-right: 80rpx;
}
.new_img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
vertical-align: middle;
margin-right: 10rpx;
}
.new_txt {
max-width: 300rpx;
display: inline-block;
border-radius: 6rpx;
line-height: 60rpx;
background-color: #95d4ff;
padding: 5rpx 20rpx;
margin: 0 10rpx;
margin-left: 50rpx;
}
.my_right .new_txt{
margin-right:60rpx;
}
.you{
background-color: lightgreen;
}
.my {
border-color: transparent transparent transparent #95d4ff;
}
.you {
border-color: transparent #95d4ff transparent transparent;
}
.hei{
margin-top: 50px;
height: 20rpx;
}
.history {
height: 100%;
margin-top: 15px;
padding: 10rpx;
font-size: 14px;
line-height: 40px;
word-break: break-all;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
z-index: -1;
}
/* 信息输入区域 */
.message{
position: fixed;
bottom:0;
width: 100%;
}
.sendMessage{
display: block;
height: 80rpx;
padding: 10rpx 10rpx;
background-color: #fff;
border-top: 2rpx solid #eee;
border-bottom: 2rpx solid #eee;
z-index:3;
}
.sendMessage input{
float:left;
width: 66%;
height: 100%;
line-height: 80rpx;
border-bottom: 1rpx solid #ccc;
padding:0 10rpx;
font-size: 35rpx;
color: #666;
}
.sendMessage view{
display: inline-block;
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 60rpx;
text-align: center;
color: #999;
border: 1rpx solid #ccc;
border-radius: 50%;
margin-left: 10rpx;
}
.sendMessage button {
float: right;
font-size: 35rpx;
}
.increased{
width:100%;
/* height: 150rpx; */
padding: 40rpx 30rpx;
background-color: #fff;
}
.increased .image{
width: 100rpx;
height: 100rpx;
border: 3rpx solid #ccc;
line-height: 100rpx;
text-align: center;
border-radius: 8rpx;
font-size:35rpx;
}
@keyframes slidedown {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
.slidedown {
animation: slidedown 0.5s linear ;
}
.slideup {
animation: slideup 0.5s linear ;
}
@keyframes slideup {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

总结

以上所述是小编给大家介绍的微信小程序实现即时通信聊天功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

微信小程序实现聊天对话(文本、图片)功能

本文实例为大家分享了微信小程序实现聊天对话功能的具体代码,供大家参考,具体内容如下

这是我实际项目线上的代码, 或许有些不足 || 和你的需求不符合。 

上图:

微信小程序实现聊天对话(文本、图片)功能

to_news.wxml

<!--pages/index/to_news/to_news.wxml-->
<view class='tab'>
 <view class='lan'>{{tabdata.title}}</view>
 <view class='tent'>
  <text>{{tabdata.attribute_attribute}}</text>
  <text class='fl_r '>{{tabdata.num}}</text>
 </view>
 <view class='xiahuaxian1'></view>
 <view>
  <text class='fabu'>发布时间: {{tabdata.time_agree}}</text>
 </view>
</view>
<view class='news'>
 <view class='xiahuaxian1 xiahuaxia'></view>
 <view class='new_top_txt'>您正在与{{tabdata.nickname}}进行沟通</view>
 <view class="historycon">
  <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="history" wx:for="{{centendata}}" wx:key=''>
   <view>
    <text class='time'>{{item.time}}</text>
   </view>
   <block wx:if="{{item.is_show_right ==1}}">
    <view class='my_right'>
     <view class='page_row'>
      <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
      <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
      <view wx:if='{{!item.is_img}}' class='sanjiao my'></view>
      <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>
       <image class='new_img' wx:if='{{item.show_rignt == "是自己的内容,显示在右边,右边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>
     </view>
    </view>
   </block>
   <block wx:else>
    <view class='you_left'>
     <view class='page_row'>
      <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_owner,head_owner"}}' src='{{item.head_owner}}'></image>
       <image class='new_img' wx:if='{{item.show_rignt == "不是自己的内容,显示在左边,左边渲染 nickname_open,head_open"}}' src='{{item.head_open}}'></image>
      <view wx:if='{{!item.is_img}}' class='sanjiao you'></view>
      <text wx:if='{{!item.is_img}}' class='new_txt'>{{item.content}}</text>
      <image wx:if='{{item.is_img}}' src='http://sz800800.cn/Uploads/{{item.content}}' class='new_imgtent'></image>
     </view>
    </view>
   </block>
  </scroll-view>
 </view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
 <input type="emoji" bindinput="bindChange" confirm-type="done" value='{{news_input_val}}' placeholder="" />
 <button catchtap="add">发送</button>
 <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
 <image bindtap="upimg1" class='jia_img' src='../../../images/jia_img.png'></image>
</view>

to_news.js

// pages/index/to_news/to_news.js
var app = getApp();
var util = require("../../../utils/util.js")
var message = '';
var text = '';
var user = {};
var length;
var zx_info_id;
var openid_talk;
Page({
 data: {
  news: '',
  scrollTop: 0,
  message: '',
  text: text,
  centendata: '',
  nickName: '',
  avatarUrl: '',
  news_input_val:'',
  tabdata: ''
 },
 bindChange: function (e) {
  message = e.detail.value
 },
 //事件处理函数
 add: function (e) {
  var that = this
  var data = {
   program_id: app.jtappid,
   openid: app._openid,
   zx_info_id: zx_info_id,
   content: message,
   openid_talk:openid_talk
  }
  util.request('pg.php/ZXinfo/session_submit', 'post', data, '正在加载数据', function (res) {
   if (res.data.state == 1) {
    var a = true;
    that.loaddata(a);
    that.setData({
     news_input_val:''
    })
    message = ''
   } else {
    wx.showToast({
     title: '网络错误,请稍后',
    })
   }
  })
 },
 
 onLoad: function (options) {
  openid_talk = options.openid_talk;
  zx_info_id = options.zx_info_id;
  console.log(openid_talk)
  //调用应用实例的方法获取全局数据
  this.setData({
   zx_info_id: zx_info_id,
   nickName: app.nickName,
   avatarUrl: app.avatarUrl,
  });
  this.loaddata()
 },
 // 页面加载
 loaddata: function (a) {
  var that = this;
  var is_img = true;
  var data = {
   program_id: app.jtappid,
   openid: app._openid,
   zx_info_id: zx_info_id,
   openid_talk: openid_talk
  }
  util.request('pg.php/ZXinfo/session_page', 'post', data, '', function (res) {
   if (res.data.k1) {
    res.data.k1.time_agree = util.js_date_time(res.data.k1.time_agree)
   }
   for (var i = 0; i < res.data.k2.length; i++) {
    res.data.k2[i].time = util.js_date_time(res.data.k2[i].time)
    var n = res.data.k2[i].content.charAt(res.data.k2[i].content.length - 1);
    switch (n) {
     case 'g':
      res.data.k2[i].is_img = is_img
      break;
     default:
    }
   }
   that.setData({
    tabdata: res.data.k1,
    centendata: res.data.k2.reverse()
   })
   wx.setNavigationBarTitle({ title: that.data.tabdata.nickname });
   if (a) {
    setTimeout(function () {
      that.bottom()
    }, 500);
   }
  })
  setTimeout(function () {
   if (that.data.centendata.length != length) {
    length = that.data.centendata.length
   }
   that.loaddata()
  }, 3000);
  
 },
 // 获取hei的id节点然后屏幕焦点调转到这个节点
 bottom: function () {
  var query = wx.createSelectorQuery()
  query.select('#hei').boundingClientRect()
  query.selectViewport().scrollOffset()
  query.exec(function (res) {
   wx.pageScrollTo({
    scrollTop: res[0].bottom // #the-id节点的下边界坐标
   })
   res[1].scrollTop // 显示区域的竖直滚动位置
  })
 },
 // 选择图片并把图片保存 
 upimg1: function () {
  var that = this;
  wx.chooseImage({
   success: function (res) {
    var data = {
     program_id: app.jtappid,
     openid: app._openid,
     zx_info_id: zx_info_id,
    }
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
     url: 'pg.php/ZXinfo/session_submit', //提交信息至后台
     filePath: tempFilePaths[0],
     name: 'content', //文件对应的参数名字(key)
     formData: data, //其它的表单信息
     success: function (res) {
      var a = true;
      that.loaddata(a);
      message = ''
     }
    })
   }
  })
 }
})

to_news.wxss

/* pages/index/to_news/to_news.wxss */
 
page {
 background-color: #f7f7f7;
}
 
.tab {
 padding: 20rpx 20rpx 40rpx 50rpx;
 height: 20%;
 background-color: white;
}
 
.tab .tent {
 font-size: 33rpx;
 margin-bottom: 30rpx;
}
.jia_img{
 height: 80rpx;
 width: 90rpx;
}
.new_imgtent{
  height: 180rpx;
 width: 190rpx;
}
.tab .fabu {
 font-size: 33rpx;
 margin-top: 30rpx;
 margin-bottom: 30rpx;
}
 
.xiahuaxia {
 width: 80%;
 text-align: center;
 margin: 0 auto;
 position: relative;
 top: 60rpx;
}
 
.time {
 text-align: center;
 padding: 5rpx 20rpx 5rpx 20rpx;
 width: 200rpx;
 font-size: 26rpx;
 background-color: #E8E8E8;
}
 
.new_top_txt {
 width: 50%;
 position: relative;
 top: 38rpx;
 text-align: center;
 margin: 0 auto;
 font-size: 30rpx;
 color: #787878;
 background-color: #f7f7f7;
}
 
/* 聊天内容 */
 
.news {
 margin-top: 30rpx;
 text-align: center;
 margin-bottom: 150rpx;
}
 
.img_null {
 height: 60rpx;
}
 
.l {
 height: 5rpx;
 width: 20%;
 margin-top: 30rpx;
 color: #000;
}
 
/* 聊天 */
 
.my_right {
 float: right;
 position: relative;
 right: 40rpx;
}
 
.you_left {
 float: left;
 position: relative;
 left: 5rpx;
}
 
.new_img {
 width: 100rpx;
 height: 100rpx;
 border-radius: 50%;
}
 
.new_txt {
 width: 380rpx;
 border-radius: 7px;
 background-color: #95d4ff;
 padding: 0rpx 30rpx 0rpx 30rpx;
}
 
.sanjiao {
 top: 20rpx;
 position: relative;
 width: 0px;
 height: 0px;
 border-width: 10px;
 border-style: solid;
}
 
.my {
 border-color: transparent transparent transparent #95d4ff;
}
 
.you {
 border-color: transparent #95d4ff transparent transparent;
}
 
.sendmessage {
 background-color: white;
 width: 100%;
 position: fixed;
 bottom: 0rpx;
 display: flex;
 flex-direction: row;
}
 
.sendmessage input {
 width: 80%;
 height: 40px;
 background-color: white;
 line-height: 40px;
 font-size: 14px;
 border: 1px solid #d0d0d0;
 padding-left: 10px;
}
 
.sendmessage button {
 border: 1px solid white;
 width: 18%;
 height: 40px;
 background: #fff;
 color: #000;
 line-height: 40px;
 font-size: 14px;
}
 
.historycon {
 height: 90%;
 width: 100%;
 flex-direction: column;
 display: flex;
 margin-top: 100rpx;
 border-top: 0px;
}
.hei{
 margin-top: 50px;
 height: 20rpx;
}
.history {
 height: 100%;
 margin-top: 15px;
 margin: 10px;
 font-size: 14px;
 line-height: 40px;
 word-break: break-all;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 微信小程序实现同页面取值的实例代码
  • 详解微信小程序冒泡事件及阻止方法
  • 微信小程序视图容器创建轮播图实例
  • 微信小程序中生成带参小程序码流程方法
  • 实现即时通信聊天功能 相关电子书
    学习笔记
    网友NO.220725

    详解微信小程序开发聊天室—实时聊天,支持图片预览

    第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种。第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了。 首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等。点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标点符号可能会报错,比如我就是‘\'报的错,找了半天。 因为有人咨询,所以附上所有小程序代码,地址:https://github.com/chongwenwen/weixin_chat/tree/master 有人说为什么没有utile.js的代码,这个功能只用到websoket.js跟utile.js没有关系哦!还有……

    网友NO.411657

    微信小程序websocket聊天室的实现示例代码

    背景 最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务。小程序本身对http、websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块。 服务端 初始化一个node.js项目,引入ws模块 const webSocket = require('ws'); 创建websocket实例,并设置监听端口 const wss = new webSocket.Server({ port: 3001}); 定义wss实例方法,实现socket监听和信息发布。下面贴上简单的示例: wss.on('connection', function connection(ws, req) { console.log('连接开启') //发生错误 ws.on('error', function error(error) { console.log('error', error); }); //断开连接 ws.on('close', function close(close) { console.log( '已关闭'); }); ws.on('message', function message(message) { ws.send('客户端发来了一条消息') }); //发送消息 ws.send('连接已开启'); ws.send(id + '已连接')}); 这样,一个简单的websocket服务……

    网友NO.882953

    微信小程序websocket实现即时聊天功能

    今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助。 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实时应用上。 因为这里本人是分享小程序,所以就不去深究websocket的底层和协议了,感兴趣的朋友可以去看下websocket协议 建议大家在做之前先看看微信小程序官方提供的api关于websocket的文档,因为微信的websocket接口虽然和HTML5的websocket基本一样但是语法上还是有少许偏差,了解一下还是很有必要的。 话不多说上代码(css代码就不贴了,就是一些简单的聊天样式排版) wxml view scroll-view scroll-y="true" scroll-with-animation="true" scroll-x="false" scroll-into-view="list-{{idx}}" class="twnav" view class='tw……

    网友NO.755080

    详解微信小程序实现仿微信聊天界面(各种细节处理)

    本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下: 下面先来看看效果 为实现这样的效果,首先要解决两个问题: 1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题; 2.键盘弹出或收起时,聊天消息没有自动滚到最底部。 首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种): 1.计算每条消息的最大高度,设置scroll-top=(单条msg最大高度 * msg条数)px。 2.用 将展示msg的目标scroll-view包裹, 通过js获取到该view的实际高度: var that = this;var query = wx.createSelectorQuery();query.select('.scrollMsg').boundingClientRect(function(rect) {that.setData({scrollTop: rect.height+'px';});}).exec(); 3.(推荐)将所有msg都编号如:msg-0,msg-1,msg-2… 直接锁定最后一条msg,滚动到那里。 在scroll-view中添加: scroll-into-view='{{toVie……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    投诉 / 推广 / 赞助:QQ:520161757