- 聊天窗口,如何才能够在进入聊天页面时,像微信聊天一样,直接在页面底部看到最新的消息?
大家好!我这几天在做一个聊天的功能,遇到了一个问题:每次进入聊天页面,聊天的消息都是从最上面的最旧消息开始显示,需要手动下滑到最底部查看最新消息,所以,请问一下,如何才能够在进入聊天页面时,像微信聊天一样,直接在页面底部看到最新的消息?是需要在wxml页面还是wxss页面设置?设置哪一项?非常感谢! [图片] wxml页面代码: <block class="overflow"> <view wx:for="{{messageList}}" wx:key="messageList"> <view class="rightBox" wx:if="{{item.openId === visitorId}}" data-msg="{{index}}" id='msg_{{index}}'> <view> <view class="createTime_R">{{item.createTime}}</view> <view class="right_message" wx:if="{{item.type=='text'}}">{{item.content}}</view> <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/> </view> <image class="icon" src="{{icon_R}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" /> </view> <view class="leftBox" wx:if="{{item.openId === serverId}}" data-msg="{{index}}" id='msg_{{index}}'> <image class="icon" src="{{icon_L}}" mode="widthFix" style="width: 100rpx; height: 80rpx;" /> <view> <view class="createTime_L">{{item.createTime}}</view> <view class="left_message" wx:if="{{item.type=='text'}}">{{item.content}} </view> <image src="{{item.content}}" wx:if="{{item.type=='image'}}" class="image_content" mode="widthFix" bindlongpress="tp_save_img" data-fileid="{{item.content}}"/> </view> </view> </view> <view class="overflow_a"> </view> </block> <view class="sends"> <image class="sends_a" src="{{imgUrl}}" bind:tap="sendImage" /> <textarea class="sends_b" type="text" maxlength="-1" bindblur="message_blur" auto-height="true" value="{{content}}"></textarea> <view class="sends_c" bind:tap="send">发送</view> </view> wxss页面代码: page { padding-top: 20rpx; padding-bottom: 20rpx; } .overflow{ position: fixed; top: 300rpx; width: 710rpx; overflow: scroll; /*auto hidden scroll*/ } .overflow_a{ margin-bottom: 110rpx; } .sends{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 100rpx; position: fixed; bottom: 0rpx; left: 0rpx; background-color: white; } .sends_a{ width: 60rpx; height: 50rpx; margin: 0rpx 20rpx; } .sends_b{ width: 500rpx; border: solid black 1rpx; border-radius: 10rpx; margin: 0rpx 20rpx 0rpx 0rpx; } .sends_c{ padding: 10rpx 30rpx; } .icon{ margin: 10rpx 0rpx 0rpx 0rpx; } .rightBox{ display: flex; flex-direction: row; align-items: center; justify-content: flex-end; margin: 10rpx 20rpx 0rpx 0rpx; } .leftBox{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin: 10rpx 0rpx 0rpx 20rpx; } .right_message{ width: 600rpx; text-align: right; padding: 0rpx 10rpx; } .left_message{ width: 600rpx; text-align: left; padding: 0rpx 10rpx; } .image_content{ width: 600rpx; } .createTime_L{ font-size: x-small; text-align: center; } .createTime_R{ font-size: xx-small; text-align: center; } js页面代码: onLoad(){ let that = this; let title = wx.getStorageSync('from'); that.setData({ title, }); let visitorId=''; //来访者的openid let serverId=''; //客服的openid let my_openId = app.globalData.user_data.openid; //拿到 本人 的openid let visitor_Id = wx.getStorageSync('visitor_Id'); //拿到 来访者 的openid,可能为空 if (my_openId == "oi6wV5Gn558x5madg" || my_openId == "oi6wV5qMAYQmm8To") { //识别出本人的openid是客服人员时 serverId = my_openId; //本人的openid赋值给serverId,即赋值给客服id visitorId = visitor_Id; //对方的openid赋值给来访者的openid } else { //识别出本人是来访者时 if (title=="法律咨询") { serverId = "oi6wV558x5madg"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 } else if (title=="能力提升") { serverId = "oi6wV5HGqMAYQmm8To"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 } else if (title=="心理咨询") { serverId = "oi6wV5HGMSMAYQmm8To"; //对客服的openid赋值 visitorId = my_openId; //将本人的openid赋值给来访者 }; }; that.setData({ serverId, visitorId, }); wx.cloud.callFunction({ //这里调用云函数查询对话 name:"messageList", data:{ $url:"message", //云函数路由参数 visitorId:visitorId, //本人的openid serverId:serverId, //客服的openid } }).then(res=>{ let arr = res.result.data; // console.log("arr:",arr); let userInfo = { //app.globalData.user_data; 就是来访者的个人信息 gender:app.globalData.user_data.gender, id_name:app.globalData.user_data.id_name, openid:app.globalData.user_data.openid, phone_no:app.globalData.user_data.phone_no, orgaId:app.globalData.user_data.orgaId, orgaName:app.globalData.user_data.orgaName, unitId:app.globalData.user_data.unitId, unitName:app.globalData.user_data.unitName, user_name:app.globalData.user_data.user_name, }; if(arr.length === 0){ //进行判断,如果没有数据则创建一个聊天 wx.cloud.database().collection("message") .add({ data:{ Message:[], serverId, userInfo, }} ) } }); }, onReady: function () { let that = this; let visitorId = that.data.visitorId; //本人的openid,来访者 let serverId = that.data.serverId; //客服的openid let watch = db.collection('message') .where({ _openid:_.eq(visitorId), serverId:_.eq(serverId), }) .watch({ onChange: (snapshot)=> { //只要数据发生变化就会调用此方法 that.setData({ messageList:snapshot.docs[0].Message, //将最新的聊天数据放到data中渲染 }); console.log("onReady:",snapshot.docs[0].Message); }, onError: function(err) { console.error('the watch closed because of error', err) } }); },
03-08 - wx.createInnerAudioContext().stop() 无法停止音乐播放的解决办法?
代码如下: tap_audio_play() { let that = this; let audio = that.data.audio; let show_audio = that.data.show_audio; if (show_audio == true) { const innerAudioContext = wx.createInnerAudioContext({ useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项 }); innerAudioContext.src = audio.fileID; innerAudioContext.play() // 播放 that.setData({ show_audio:false }) } else if (show_audio == false) { const innerAudioContext = wx.createInnerAudioContext({ useWebAudioImplement: false }); innerAudioContext.src = audio.fileID; innerAudioContext.stop() // 停止 innerAudioContext.destroy() // 释放音频资源 that.setData({ show_audio:true }) }; }, 使用.stop()无法停止 音频的播放,即使加了.destroy()也不会停止播放,而且每点击一次,音频就会增加一次播放,几个音频叠加播放,声音很混乱,也无法停止! 使用两个函数,一个播放音乐,一个停止音乐也不行! 开发者工具和真机都无法停止音乐播放! 请帮忙解决! 微信开发者工具:Stable 1.06.2401020, 调试基础库3.3.4,
02-26 - 怎么能获取云存储中指定文件夹中的全部文件的cloudID?
由于开发需要,需要获取云存储中文件夹下的所有文件的fileID和文件名称,借鉴其他网友的代码,但是总是提示找不到模块,无法获取到fileID,请各位大神帮忙指点一下! 云函数代码如下: const cloud = require('wx-server-sdk') cloud.init({ env: 'xly-8g***8633b4d' }) // 使用当前云环境 const CloudBase = require("@cloudbase/manager-node"); const {storage} = new CloudBase(); // 云函数入口函数 exports.main = async (event, context) => { const getList = await storage.listDirectoryFiles("zcfagui/"); console.log(getList); return { getList, } } 函数无法执行,总是报错,报错日志如下: { "errorCode": -1, "errorMessage": "Runtime.ImportModuleError: Error: Cannot find module '@cloudbase/manager-node'\nRequire stack:\n- /var/user/index.js\n- /var/runtime/node16/UserFunction.js\n- /var/runtime/node16/Runtime.engine.js\n- /var/runtime/node16/bootstrap.js\n at Object.module.exports.load (/var/runtime/node16/UserFunction.js:34:13)\n at Runtime.handleOnce (/var/runtime/node16/Runtime.engine.js:85:38)\n at Timeout._onTimeout (/var/runtime/node16/Runtime.engine.js:54:12)\n at listOnTimeout (node:internal/timers:557:17)\n at processTimers (node:internal/timers:500:7)", "statusCode": 443 } 云函数文件截图如下: [图片] 请各位大神指点!
01-23 - 如何解决downloadFile无法下载文件问题?
使用云开发的微信小程序,在使用wx.downloadFile功能下载文件时,提示: [读取文件/文件夹警告] 无法读取 cloud://xly-8g7p2-1309545976/files/援助申请表.doc 文件或文件夹不在白名单中, 上传时会被忽略, 在真机上可能无法读取。 导致,无法实现下载功能,请问如何解决? 程序代码如下: wx.downloadFile({ url: 'cloud://xly-8g7pc311a74a6-法律援助申请表.doc',//文件路径 success: function (res) { const filePath = res.tempFilePath wx.openDocument({ filePath: filePath, showMenu: true, success: function (res) { console.log('打开文档成功') } }) } });
2023-12-04 - 如何解决“页面鉴权失败”问题?
[图片] [图片] 如图所示,微信云开发 云后台 一直提示 “页面鉴权失败”,请问如何解决? 非常感谢!
2023-10-08 - 如何解决:上传并部署:云端安装依赖(不上传node_modules),一直失败问题?
开发者工具RC1.06.2308291,win11操作系统。 由于开发需要,需使用node-xlsx模块,处理excel 这几天,部署云函数时,选择 上传并部署:云端安装依赖(不上传node_modules),一直失败,云函数代码包211MB。请问如何解决?
2023-09-15 - 如何解决wx.request网络请求失败问题?postman测试是成功的。二者有何区别?
1.微信开发者工具1.06.2307260版 2.使用wx.request发送网络请求,总是反馈失败,返回“message 不能为空”。但是,使用postman工具发送网络请求却是可以请求成功,正确返回data. 3. wx.request({ url: 'https://wsgh.dl***.org/hymgr/app/checkEDL', method:'post', header:{ 'content-type': 'application/json', // 默认值 }, data:{ 'message':'1NCtDCPIK8LrG5yAe3r1g6R6micSjV/f+z2r+OmG0RdBedSSsP7J8k8dLzdL0bWl', }, success (res) { console.log(res.data) } }) 报错提示:{data: null, info: "message 不能为空", success: false, result: "error"} 4.postman测试成功画面如下: [图片] 希望能够给予指导,解决该问题!
2023-08-16 - 如何解决苹果手机不显示日期问题?
如图所示,在页面中加入了时间和日期显示,在安卓手机上可以正常显示时间,但是苹果手机却不显示,请问如何解决? [图片] [图片] var that = this; var now = new Date(); var a = now.getFullYear(); var b = now.getMonth() + 1; var c = now.getDate(); //日期15 var year = now.getFullYear(); var month = now.getMonth() + 1; var date = now.getDate(); //日期15 var day = now.getDay(); //星期数 if (month < 10) { month = "0" + month }; if (date < 10) { date = "0" + date }; var date1 = new Date(a, parseInt(b) - 1, c); var date2 = new Date(a, 0, 1); var d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000); var week_no= Math.ceil( (d + ((date2.getDay() + 1) - 1)) / 7 ); var today= year + "年" + month + "月" + date + "日"; var today_code = year + month + date; var stamp_time_now = now.getTime(); //现在的时间戳 var time_115959 = year + "/" + month + "/" + date + " 11:59:59:999"; var stamp_time_115959 = new Date(time_115959).getTime(); //115959的时间戳 var wic_day; var the_qty; if(stamp_time_now > stamp_time_115959){ //显示 明日 午餐预定 wic_day = '明日'; var stamp_time = new Date(stamp_time_now + 50400000); //第二天的时间 year = stamp_time.getFullYear(); month = stamp_time.getMonth() + 1; date = stamp_time.getDate(); //日期15 day = stamp_time.getDay(); //星期数 today= year + "年" + month + "月" + date + "日"; if (month < 10) { month = "0" + month }; if (date < 10) { date = "0" + date }; nextday_code = year + month + date; that.setData({ day: day, today:today, wic_day:wic_day, });
2022-02-25 - 如何解决云数据库查询结果缺少数据问题?
如下图所示,使用云开发,在数据库中已有7条数据,但是通过db.collection('audit_e').limit(10).get({})或db.collection('audit_e').where().get({})查询出来的数据就是不全,总是丢数据,找不到问题所在。请问我错在哪里?该如何解决? [图片] [图片]
2022-02-25 - wx.exitMiniProgram() 提示not a function
请问一下,wx.exitMiniProgram()这个API在使用时提示not a function,是怎么回事?是否影响正常使用? [图片]
2022-02-11