微信小程序websocket聊天组件
一、自动机器人回复
打开咨询页面，展示咨询次数最多的问题
上图页面的实现，第一个问题是在js里面写死
wxml部分
<view style="overflow:auto;height: 87vh;">
<view class='message'>
<view class="message_time">
<view class="time">{{time}}view>
view>
<block wx:for="{{contentItem}}" wx:key="id">
<view wx:if="{{item.adminseq}}" class="admin_item">
<view wx:if="{{item.adminseq==6}}" class="admin_item_img">
<image src='{{item.adminsrc}}' mode="widthFix">image>
view>
<view wx:if="{{item.adminseq==6}}" class="admin_item_content">
<view selectable="true" class="write">{{item.message}}view>
view>
<view wx:if="{{item.adminseq==6}}" class="admin_all">
<block wx:for="{{question}}" wx:key="item">
<view style="" bindtap="clickQuery" data-question="{{item}}" class="admin_question">
<view class="label">
{{item}}
view>
<image class="right_jiantou" src="../../images/jiantou.png">image>
view>
block>
view>
<view class="answer_info" style="margin-bottom: 30rpx;">
<view wx:if="{{!(item.adminseq==6)}}">
<view wx:if="{{item.answer}}" class="admin_item one_answer">
<view class="admin_item_img">
<image src='{{adminsrc}}' mode="widthFix">image>
view>
<view wx:if="{{!(item.adminseq==6)}}" class="admin_item_content">
<view selectable="true" class="write">{{item.answer}}view>
view>
view>
<view wx:if="{{item.question.length>=2}}" class="admin_all ">
<view wx:if="{{!(item.adminseq==6)}}" class="admin_item_img">
<image src='{{adminsrc}}' mode="widthFix">image>
view>
<view class="admin_question_more ">
<block wx:for="{{questionJi}}" wx:key="item">
<view class="admin_question selcet_answer">
<view class="label" bindtap="clickQuery" data-question="{{item}}">
{{item}}
view>
<image class="right_jiantou" src="../../images/jiantou.png">image>
view>
block>
view>
view>
view>
view>
view>
<view wx:if="{{item.userseq}}" class="user_item" style="margin-bottom: 40rpx;margin-top:30rpx;">
<view>
<view class="user_item_img">
<image src='{{usersrc}}' mode="widthFix">image>
view>
<view class="user_item_content">
<view selectable="true" class="write">{{item.message}}view>
view>
view>
view>
block>
view>
<view class='fixed_nav'>
<view style='bottom:{{input_bottom}}rpx;'>
<view class='fixed_nav_input'>
<input type='text' value='{{message}}' maxlength="200" cursor-spacing="7" selection-start="10" bindinput="messageInput" />
view>
<button class="fixed_nav_send" bindtap='sendMessage'>发送button>
view>
view>
view>
js部分
Page({
data: {
time: h + ':' + m,
title: '智能医生',
input_bottom: 0,
windowHeight: 0,
message: null,
question: [],
questionJi: [],
answer: [],
length: 0,
messageAll: [],
sendFlag: true,
usersrc: "../../images/cat.jpeg",
adminseq: 0,
userseq: 0,
adminid: null,
adminsrc: '../../images/jiqiren.png',
contentItem: [{
adminseq: 6,
adminsrc: "../../images/jiqiren.png",
message: '请问您哪里不舒服？'
}, {
userseq: 469,
usersrc: "../../images/cat.jpeg",
message: "头晕眼花"
}]
},
/**
* 生命周期函数--监听页面加载
*/
// 带过来用户的seq
onLoad: function(options) {
console.log(this.data.contentItem)
this.setData({
windowHeight: wx.getSystemInfoSync().windowHeight
})
console.log(this.data)
app.gwRequest({
url: 'AIDoctor/getHotQuestion',
data: {
}
}).then(res => {
console.log(res);
var messageAllInfo = res.ds;
var question = this.data.question;
for (var i = 0; i < messageAllInfo.length; i++) {
this.setData({
question: messageAllInfo[i].question
})
question.push(messageAllInfo[i].question)
}
this.setData({
question: question,
// messageAll: messageAll,
})
console.log(this.data.question)
app.gwRequest({
url: 'AIDoctor/getQuestionDetail',
data: {
seq: '1'
}
}).then(res => {
console.log(res);
});
},
onShow: function() {
var user = wx.getStorageSync('user') || '';
console.log(user.seq)
var seq = user.seq;
console.log(seq)
this.setData({
userseq: seq
})
},
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
inputFocus(e) {
console.log(e, '键盘弹起')
var inputHeight = 0
if (e.detail.height) {
inputHeight = e.detail.height;
var input_bottom = e.detail.height * 2
}
console.log(e.detail.height)
this.setData({
inputHeight: inputHeight,
input_bottom: input_bottom
})
},
inputBlur() {
console.log('键盘收起')
this.setData({
input_bottom: 0
})
},
sendMessage: function() {
var email = this.data.message; //将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
console.log(email);
if (email == null) {
return;
}
this.setData({
data: email
})
var content = [{
userseq: this.data.userseq,
usersrc: this.data.usersrc,
message: this.data.message
}];
console.log(this.data.userseq);
this.setData({
message: null,
contentItem: this.data.contentItem.concat(content)
})
console.log(this.data.contentItem)
app.gwRequest({
url: 'AIDoctor/fuzzyQuestion',
data: {
condition: email
}
}).then(res => {
if(res.code==0){
}
console.log(res);
var questionJi=[];
var messageAll = res.ds;
for(var i=0;i<messageAll.length;i++){
var question = messageAll[i].question
questionJi.push(question)
}
this.setData({
questionJi: questionJi
})
console.log(this.data.questionJi)
if(messageAll.length==1){
questionJi=[]
}
if (messageAll.length == 2) {
messageAll[0].answer = '';
}
var content = [{
adminseq: 7,
src: this.data.adminsrc,
question: questionJi,
answer: messageAll[0].answer
}];
var length = res.ds.length;
console.log(length)
this.setData({
length:length,
messageAll: messageAll,
contentItem: this.data.contentItem.concat(content)
})
console.log(this.data.contentItem)
console.log(this.data.messageAll)
console.log(this.data.messageAll.length)
});
},
/**
* 获取表单值
*/
messageInput: function(e) {
this.setData({
message: e.detail.value
})
if (this.data.message.length > 0) {
this.setData({
sendFlag: false
})
} else {
this.setData({
sendFlag: true
})
}
},
clickQuery: function(e) {
console.log(e)
var email = e.currentTarget.dataset.question; //将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
console.log(email);
this.setData({
data: email
})
var content = [{
userseq: this.data.userseq,
usersrc: this.data.usersrc,
message: e.currentTarget.dataset.question
}];
console.log(this.data.userseq)
this.setData({
message: null,
contentItem: this.data.contentItem.concat(content)
})
var condition = e.currentTarget.dataset.question;
app.gwRequest({
url: 'AIDoctor/fuzzyQuestion',
data: {
condition: condition
}
}).then(res => {
console.log(res);
var messageAll = res.ds
console.log(messageAll[0].answer)
console.log(messageAll.length);
var content = [{
adminseq: 7,
adminsrc: this.data.adminsrc,
answer: messageAll[0].answer
}];
var length = res.ds.length;
console.log(length);
this.setData({
length:length,
contentItem: this.data.contentItem.concat(content),
messageAll: messageAll
})
console.log(this.data.messageAll)
console.log(this.data.contentItem)
});
}
})
上面部分是自动回复功能实现的全部代码（自动回复机器人）
实现过程中遇到的问题（踩坑过程）：
1.实现输入在右边，回复在左边，问一个问题，左边回复一句，开始时出现问一个问题左边回复的时候在一个地方改变回答的内容并没有问一个问题回复一句。
解决方法：实际上聊天功能wxml部分就是写2个contentItem: [{adminseq: 6,adminsrc: "../../images/jiqiren.png",message: '请问您哪里不舒服？'}, {userseq: 469,usersrc: "../../images/cat.jpeg",message: "头晕眼花"}]把用户输入的问题和机器人回复的答案写在一个数组里。
用户输入的问题
sendMessage: function() {
var email = this.data.message; //将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
console.log(email);
if (email == null) {
return;
}
this.setData({
data: email
})
var content = [{
userseq: this.data.userseq,
usersrc: this.data.usersrc,
message: this.data.message
}];
console.log(this.data.userseq);
this.setData({
message: null,
contentItem: this.data.contentItem.concat(content)
})
2.实现问问题查数据库单条的时候以气泡的形式回复，大于1条的时候以选项的形式展示。
写自动回复即左边部分写2个
<view class="answer_info" style="margin-bottom: 30rpx;">
<view wx:if="{{!(item.adminseq==6)}}">
<view wx:if="{{item.answer}}" class="admin_item one_answer">
<view class="admin_item_img">
<image src='{{adminsrc}}' mode="widthFix">image>
view>
<view wx:if="{{!(item.adminseq==6)}}" class="admin_item_content">
<view selectable="true" class="write">{{item.answer}}view>
view>
view>
<view wx:if="{{item.question.length>=2}}" class="admin_all ">
<view wx:if="{{!(item.adminseq==6)}}" class="admin_item_img">
<image src='{{adminsrc}}' mode="widthFix">image>
view>
<view class="admin_question_more ">
<block wx:for="{{questionJi}}" wx:key="item">
<view class="admin_question selcet_answer">
<view class="label" bindtap="clickQuery" data-question="{{item}}">
{{item}}
view>
<image class="right_jiantou" src="../../images/jiantou.png">image>
view>
block>
view>
view>
view>
view>
二、1对1聊天
wxml部分
<view id='msg-{{index}}' wx:if="{{item.userseq}}" class="user_item">
<view class="user_item_img">
<image src='{{usersrc}}' mode="widthFix">image>
view>
<view wx:if="{{item.message}}" class="user_item_content">
<view class="write">{{item.message}}view>
view>
<image wx:if="{{item.imageUrl}}" style="max-width:150px;max-height:120px" src="{{imageUrl}}" class="send_image">image>
view>
<view wx:if="{{item.doctorWXSeq}}" class="admin_item">
<view class="admin_item_img">
<image src='{{adminsrc}}' mode="widthFix">image>
view>
<view wx:if="{{item.message}}" class="admin_item_content">
<view selectable="true" class="write">{{item.message}}view>
view>
<image wx:if="{{item.imageUrl}}" style="max-width:150px;max-height:120px" src="imageUrl" class="send_image">image>
<view>
view>
view>
view>
view>
<view style='width: 100%; height: 2vh;'>view>
scroll-view>
<view class='zezhao' wx:if='{{cross}}' bindtap='add_icon_click' id='2'>view>
<view class='{{cross?"in_voice_icon":""}}'>
<view class="sendmessage" style='bottom:{{input_bottom}}rpx;'>
<view class='fixed_nav'>
<view>
<view class='fixed_nav_input'>
<input type='text' confirm-type="send" adjust-position="{{false}}" bindfocus="inputFocus" bindblur="inputBlur" value='{{message}}' maxlength="200" cursor-spacing="7" selection-start="10" bindinput="messageInput" bindtap='click_input' />
view>
<image class="upload_image" bindtap='add_icon_click' id='1' src="../../images/add.png">image>
<button class="fixed_nav_send" bindtap='sendMessage'>发送button>
view>
view>
view>
<view wx:if='{{cross}}' class='item'>
<view>
<image bindtap='image_click' class='img' src='../../images/choose_picture.png'>image>
<view class='text'>相册view>
view>
<view class="phone_image">
<image bindtap='phone_click' class='img' src='../../images/take_photos.png'>image>
<view class='text'>拍照view>
view>
view>
view>
js部分
var socketOpen = false;
Page({
/**
* 页面的初始数据
*/
data: {
title: '',
input_bottom: 0,
bottom: 0,
toView: '',
imageUrl: [],
socketOpen: false,
inputHeight: '',
scrollTop: 0,
userseq: 0,
doctorWXSeq: '',
message: null,
question: [],
answer: [],
messageAll: [],
sendFlag: true,
usersrc: "../../images/cat.jpeg",
adminsrc: '../../images/jiqiren.png',
contentItem: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 刷新组件
this.refresh = this.selectComponent("#refresh")
console.log(options);
var doctorwxseq = options.doctorWXSeq;
var nickname = options.nickname;
var title=nickname.substring(0,1)+"医生"
this.setData({
title:title
})
console.log(title);
console.log(doctorwxseq)
this.setData({
doctorWXSeq: doctorwxseq
})
console.log(this.data.userseq)
// 页面渲染完成
var _self = this;
wx.onSocketOpen(function (res) {
socketOpen = true;
console.log('WebSocket连接已打开！')
})
wx.onSocketError(function (res) {
socketOpen = false;
console.log('WebSocket连接打开失败，请检查！')
})
wx.onSocketMessage(function (res) {
var t = _self.data.message;
console.log(res);
t.push(res.data)
_self.setData({
message: t,
})
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭！')
socketOpen = false;
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function(e) {
console.log(this.data.doctorWXSeq)
this.chatBuild();
var that = this;
var doctorseq= that.data.doctorWXSeq;
var user = wx.getStorageSync('user') || '';
console.log(user.seq)
var seq = user.seq;
console.log(seq)
that.setData({
userseq: seq
})
app.gwRequest({
url: 'chatMessage/getMessageDetail',
data: {
toSeq: doctorseq,
seq: seq,
messageNum:2
}
}).then(res => {
console.log(res);
var messageList = res.ds
var content=[];
for (var i = 0; i < messageList.length;i++){
var userseq=[];
var message=[];
if (messageList[i].sendUser == seq){
userseq = messageList[i].sendUser
message = messageList[i].content
console.log(messageList[i].sendUser)
console.log(message)
content = [{
userseq: userseq, src: this.data.usersrc, message: message
}]
this.setData({
contentItem: this.data.contentItem.concat(content)
})
}
var doctorWXSeq=[];
if (messageList[i].sendUser == doctorseq) {
doctorWXSeq = messageList[i].sendUser
message = messageList[i].content
console.log(messageList[i].sendUser)
console.log(message)
content = [{
doctorWXSeq: doctorWXSeq, src: this.data.adminsrc, message: message
}]
this.setData({
contentItem: this.data.contentItem.concat(content)
})
}
}
})
},
onReady: function () {
// 页面渲染完成
var _self = this;
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭！')
socketOpen = false;
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
wx.closeSocket();
wx.onSocketClose(function (res) {
console.log('WebSocket连接已关闭！')
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
wx.closeSocket();
wx.onSocketClose(function (res) {
console.log('WebSocket连接已关闭！')
})
},
//触摸开始
handletouchstart: function (event) {
console.log(event);
this.refresh.handletouchstart(event)
},
//触摸移动
handletouchmove: function (event) {
this.refresh.handletouchmove(event)
},
//触摸结束
handletouchend: function (event) {
this.refresh.handletouchend(event)
},
//触摸取消
handletouchcancel: function (event) {
this.refresh.handletouchcancel(event)
},
//页面滚动
onPageScroll: function (event) {
this.refresh.onPageScroll(event)
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
var contentItem = [];
this.setData({
contentItem: contentItem
})
setTimeout(() => { this.refresh.stopPullRefresh() }, 3000);
var doctorseq = this.data.doctorWXSeq;
var seq=this.data.userseq;
app.gwRequest({
url: 'chatMessage/getMessageDetail',
data: {
toSeq: doctorseq,
seq: seq,
messageNum: 10
}
}).then(res => {
console.log(res);
var messageList = res.ds
var content = [];
for (var i = 0; i < messageList.length; i++) {
var userseq = [];
var message = [];
if (messageList[i].sendUser == seq) {
userseq = messageList[i].sendUser
message = messageList[i].content
console.log(messageList[i].sendUser)
console.log(message)
content = [{
userseq: userseq, src: this.data.usersrc, message: message
}]
this.setData({
contentItem: this.data.contentItem.concat(content)
})
}
var doctorWXSeq = [];
if (messageList[i].sendUser == doctorseq) {
doctorWXSeq = messageList[i].sendUser
message = messageList[i].content
console.log(messageList[i].sendUser)
console.log(message)
content = [{
doctorWXSeq: doctorWXSeq, src: this.data.adminsrc, message: message
}]
this.setData({
contentItem: this.data.contentItem.concat(content)
})
}
}
})
},
chatBuild: function () {
var that = this;
var user = wx.getStorageSync('user') || '';
console.log(user.seq)
var userseq = user.seq;
console.log(userseq)
that.setData({
userseq: userseq
})
var utoken = wx.getStorageSync('utoken');
console.log(that.data);
console.log(that.data.userseq);
console.log(that.data.doctorWXSeq);
// 医生seq 用户seq +"/"+ that.data.userseq+"/"+ that.data.doctorWXSeq
wx.connectSocket({
url: app.globalData.wsip + "/" + that.data.userseq + "/" + that.data.doctorWXSeq
});
wx.onSocketMessage(function (event) {
var separator = "|";
var words = event.data.split(separator);
for (var i = 6; i < words.length; i++) {
words[1] += separator + words[i];
}
var content = [{ doctorWXSeq: that.data.doctorWXSeq, src: that.data.adminsrc, message: words[5] }];
that.setData({
contentItem: that.data.contentItem.concat(content)
})
console.log(that.data.contentItem);
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
click_input: function(){
this.setData({
cross: false,
input_bottom: 0
})
},
// 选择相册照片 /online/miniapp/
image_click: function() {
var that=this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0];
console.log(res);
app.gwUploadRequest({
url: 'chatMessage/uploadChatPicture',
data: {
path: tempFilePaths
}
}).then(res => {
console.log(res);
var imageUrl=res.map.fileUrl;
console.log(imageUrl)
var content = [{ userseq: that.data.userseq, src: that.data.usersrc, imageUrl: imageUrl }];
that.setData({
contentItem: that.data.contentItem.concat(content)
})
console.log(that.data.contentItem)
that.setData({
imageUrl: imageUrl
})
})
}
})
},
// 选择相机拍照 /online/miniapp/chatMessage/uploadChatPicture
phone_click: function() {
var that=this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths[0]
console.log(tempFilePaths);
app.gwUploadRequest({
url: 'chatMessage/uploadChatPicture',
data: {
path:tempFilePaths
}
}).then(res => {
console.log(res);
var imageUrl = res.map.fileUrl;
console.log(imageUrl)
var content = [{ userseq: that.data.userseq, src: that.data.usersrc, imageUrl: imageUrl }];
that.setData({
contentItem: that.data.contentItem.concat(content)
})
console.log(that.data.contentItem)
that.setData({
imageUrl: imageUrl
})
})
},
})
},
// 聚焦
inputFocus(e) {
console.log(e, '键盘弹起')
var inputHeight = 0
if (e.detail.height) {
inputHeight = e.detail.height;
var input_bottom= e.detail.height*2
}
console.log(e.detail.height)
this.setData({
inputHeight: inputHeight,
input_bottom: input_bottom
})
console.log(this.data.contentItem)
},
pageScrollToBottom: function () {
wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {
if (rect) {
// 使页面滚动到底部
console.log(rect.height);
wx.pageScrollTo({
scrollTop: rect.height
})
}
}).exec()
},
inputBlur() {
console.log('键盘收起')
this.setData({
cross: false,
input_bottom: 0
})
},
sendMessage: function (e) {
sendSocketMessage(this.data.message);//向服务器发送数据
var email = this.data.message;//将要发送的信息和内容拼起来，以便于服务端知道消息要发给谁
console.log(email);
if(email==null) {
return;
}
// this.sendSocketMessage
this.setData({
data: email
})
var content = [{ userseq:this.data.userseq,src: this.data.usersrc, message: this.data.message }];
this.setData({
message: null,
contentItem: this.data.contentItem.concat(content),
})
console.log(this.data.contentItem.length);
console.log(this.data.toView)
// 存缓存
wx.setStorage({
key: "key",
data: this.data.contentItem,
success: function (res) {
console.log(res);
},
fail: function (log) {
console.log(log);
},
complete: function (com) {
console.log(com);
}
})
},
/**
* 获取表单值
*/
messageInput: function (e) {
this.setData({
message: e.detail.value
})
if (this.data.message.length > 0) {
this.setData({
sendFlag: false
})
}
else {
this.setData({
sendFlag: true
})
}
},
// 点击加号
add_icon_click: function (e) {
console.log(e.target.id)
// e.target.id == 1 点击加号 ==2 点击 X
if (e.target.id == 2) {
this.setData({
cross: false,
input_bottom: 0
})
} else if (e.target.id == 1) {
this.setData({
cross: true,
input_bottom: 240
})
}
},
back: function(e){
console.log(this.data)
var userseq=this.data.userseq;
var toseq = this.data.doctorWXSeq
console.log(userseq)
app.gwRequest({
url: 'chatMessage/updateMessageRead',
type: 'post',
data: {
seq: userseq,
toSeq: toseq
}
}).then(res => {
console.log(res);
})
}
})
function sendSocketMessage(sendMessage) {
if (socketOpen) {
wx.sendSocketMessage({
data: sendMessage,
success: function (data) {
console.log(data);
}
})
} else {
console.log("请先建立连接")
}
}
1对1聊天和自动回复部分的页面部分差不多都是写2个
1.在真机测试的时候点击输入框唤起键盘的时候输入框部分不会随着键盘的弹起而随之弹起。
问题原因：标题部分用的 是自定义组件，导致顶部标题也成了页面的一部分，阻止了输入框的弹起。
解决办法：只能自己写一个点击事件用来获取键盘弹起的高度然后赋值给输入框。
在data里定义一个全局变量，在获取焦点的时候吧键盘弹起的高度赋值给输入框使其底部弹起，在失去焦点的时候赋值为0，使其收起。
<view class="sendmessage" style='bottom:{{input_bottom}}rpx;'>
// 获得焦点
inputFocus(e) {
console.log(e, '键盘弹起')
var inputHeight = 0
if (e.detail.height) {
inputHeight = e.detail.height;
var input_bottom= e.detail.height*2
}
this.setData({
inputHeight: inputHeight,
input_bottom: input_bottom
})
},
//失去焦点
inputBlur() {
console.log('键盘收起')
this.setData({
cross: false,
input_bottom: 0
})
},
2.点击加号唤起弹窗再点击输入框唤起键盘然后再点击加号会出现加号下面的弹窗选项部分虽然弹起正常但是输入框会下降的到底。
问题原因：因为输入框部分自定义写了点击事件用来唤起键盘，导致了点击加号触发唤起弹窗的同时，input输入框失去了焦点，键盘消失，高度变成了0，导致输入框下降到底部造成页面错位。
解决办法：在键盘被唤起的时候点击加号不让他唤起弹窗，使其获得输入框部分的高度为0的事件。
// 点击加号、
点击加号id=1唤起弹窗，id=2关闭弹窗
add_icon_click: function (e) {
console.log(e.target.id)
// e.target.id == 1 点击加号 ==2 点击 X
if (e.target.id == 2) {
this.setData({
cross: false,
input_bottom: 0
})
} else if (e.target.id == 1) {
this.setData({
cross: true,
input_bottom: 240
})
}
},
同时在点击输入框的时候把点击加号唤起的弹窗关闭并且高度设置为0
click_input: function(){
this.setData({
cross: false,
input_bottom: 0
})
},
3.websocket 唤起连接要卸载onLoad里在进入页面的时候就调用方法
onLoad: function(options) {
// 页面渲染完成
var _self = this;
wx.onSocketOpen(function (res) {
socketOpen = true;
console.log('WebSocket连接已打开！')
})
wx.onSocketError(function (res) {
socketOpen = false;
console.log('WebSocket连接打开失败，请检查！')
})
wx.onSocketMessage(function (res) {
var t = _self.data.message;
console.log(res);
t.push(res.data)
_self.setData({
message: t,
})
})
wx.onSocketClose(function (res) {
console.log('WebSocket 已关闭！')
socketOpen = false;
})
},
function sendSocketMessage(sendMessage) {
if (socketOpen) {
wx.sendSocketMessage({
data: sendMessage,
success: function (data) {
console.log(data);
}
})
} else {
console.log("请先建立连接")
}
}
三、聊天列表左滑删除
<view class="del" catchtap="del" data-index="{{index}}" data-toseq="{{item.toSeq}}">删除view>
data: {
startX: 0, //开始坐标
startY: 0,
},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this.data.message.forEach(function (v, i) {
if (v.isTouchMove)//只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
message: this.data.message
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.message.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
message: that.data.message
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
del: function (e) {
console.log(e)
var toseq=e.currentTarget.dataset.toseq;
var userseq= this.data.userseq
console.log(toseq)
console.log(this.data.userseq)
app.gwRequest({
url: 'chatMessage/deleteMessage',
type: 'post',
data: {
toSeq: toseq,
seq: userseq
}
}).then(res => {
console.log(res);
})
this.data.message.splice(e.currentTarget.dataset.index, 1)
this.setData({
message: this.data.message
})
}
一、Nginx代理配置
nginx无需安装下载就可以用,配置文件在conf文件夹下的CONF 文件 (.conf)
location ^~ /customweb {
proxy_pass http://www.fyweather.com/customweb;//代理地址
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
在要用的地方添加
const hosturl = "http://localhost:8800/weChatWebMain";//代理地址
// "https://www.fyweather.com/weChatWebMain";//原地址
把用到原地址的地方全部用代理地址替换，小程序里直接写这串地址:
Url =hosturl+ "/mapData/" + AreaCode + "_" + TownCode + ".json?t=" + (new Date()).getTime();
需要把html文件放到nginx的html文件夹下面 访问的时候直接用**http://localhost:8800+nginx目录下的文件夹名字（后面加上需要传递的参数）**进行测试：
http://localhost:8800/MeteoMonitor/autoStation.html?AreaCode=GANSU&TownCode=LUQU&ElemType=tem&mapStation=1&time=1568688253566#wechat_redirect
$(function () {
zoom=1;
}
二、如果在方法内部写的zoom=1打印的是undefined，这时要么写成局部变量，要么写成全局变量，否则是无意地
$(function () {
var zoom=1;//局部变量
}
var zoom=0;//全局变量
$(function () {
zoom=1;
}