小程序云开发初体验

我在本学期的软件工程课的大作业中第一次接触微信小程序的云开发功能，云开发的模式可以实现一部分的网络功能，腾讯爸爸会给开发者提供一个云存储空间、一个云数据库，开发者可以自己写一些云函数进行上传。我们的本意是开发一个二手交易平台，这个平台需要一个聊天系统，但由于项目太托，到最后也没有搭服务器，无奈之下准备取消这个功能。但鉴于学习小程序的时候第一次写得是贪吃蛇，于是从贪吃蛇的代码中找到了灵感。

实时变化界面的函数setInterval()

作为大二狗，之前只学了C和Java，只在作业的过程中用过少量的js和C#，所以了解得并不深入。此块如有错误请各位前辈批评指正。我们实现实时聊天就必定少不了实时更新界面，不论是网页版的贪吃蛇还是微信小程序版的贪吃蛇，都需要一个计时器，这里选择js中的setInterval()这个函数，它是一个计时器，可以有两个参数，第一个参数是一个函数，第二个参数代表时间，比如var t = setInterval（f(),3000），就是说每隔三秒钟执行一次f()，t代表这个计时器，可以在不用的时候关掉（比如退出聊天页之后），避免过多的资源消耗。进行过微信小程序云开发的人都知道，云开发提供的API可以用一个函数直接访问到数据库，我们结合这些API和计时器，就可以实现实时获取数据库内消息更新的需求，再用最新的数据库信息刷新页面数据，就可以实现实时通信。这似乎回到了上古时代每隔一段时间就向服务器你发送一次请求的机制，但它确实是行之有效的，如果为了省时间，又不影响核心需求，你也可以用这样的形式实现一个聊天室。这种方法为了避免资源的过多消耗，一定会有一个延时，这个延时的绝大部分取决于我们在计时器中设定的时间，延时越长，资源消耗越少，但是用户的体验也会越差。这种实时通信仅仅适用于规模较小的轻量级小程序。

需要注意的点

个人认为仅仅在聊天页进行调用计时器就好了，在onHide()的时候吧计时器关掉。如果你希望保留所有的聊天记录就不得不自己去写云函数，因为微信小程序的云开发对数据库的调用有这样一个限制：当你在本地调用查询的时候，数据库一次最多只能返回20条结果，如果使用云函数的话，一次可以有100条，如果100条无法满足你的需求的话，你可以promise一下分批提取然后再进行手动的排序（这里我没有用到，但是微信小程序的官方文档里是这么写的）。没有申请提升环境资源上限的开发者一个月只能调用20万次云函数，这是相当有限的，所以如果你的小程序像我一样是做作业，最终不会上线，没有申请提升上限的需要，请珍惜这个资源。

我的代码

这个前端的wxml和wxss代码我自己写出来还是比较满意的，至于js可以实现实时聊天没错，但是由于整个平台是几天赶出来的项目，肯定会有一些小问题，也是当时没有来得及完善的问题。比如说偶尔会有消息发送出去了但是消息栏中的内容还没有清空；比如经常会有新消息出来了但是滚动条没有下滑到最底端；比如发消息的延时没有给用户显示消息发送的提醒影响用户体验等等。下面我把自己这个项目中的聊天页的代码放在这里，供大家参考和批评指正：
wxml:

<!--miniprogram/pages/shortChat/shortPage.wxml-->
<scroll-view class='chat' scroll-y='true' scroll-top='{{topScroll}}'><view class='message' wx:for='{{messageList}}' wx:forindex='i' wx:for-item='messageList'><image class='image_{{messageList.speaker==myID}}' src='{{messageList.speaker==myID?avatarImg_true:avatarImg_false}}'></image><view class='text_{{messageList.speaker==myID}}'>{{messageList.content}}</view></view>
</scroll-view>
<view class='input'><input value='{{input_value}}' class='inputarea' bindinput='input'></input><view class='submit' bindtap='send'>发送</view>
</view>

wxss:

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}.chat{position: fixed;top: 0rpx;width: 100%;overflow: scroll;height: 90%;}.message{width: 100%;
}.image_true{margin: 10rpx;float: right;width: 80rpx;height: 80rpx;border-radius: 40rpx;background-color: red;
}.text_true{margin-top: 15rpx;margin-bottom: 10rpx;padding: 3%;display: block;width: 520rpx;float: right;border: 1rpx black solid;border-radius: 5rpx;color: black;background-color: white;word-break: break-all;
}.image_false{margin: 10rpx;float: left;width: 80rpx;height: 80rpx;border-radius: 40rpx;background-color: red;
}.text_false{margin-top: 15rpx;margin-bottom: 10rpx;padding: 3%;display: block;width: 520rpx;float: left;border: 1rpx black solid;border-radius: 5rpx;color: white;background-color: #66ffcc;word-break: break-all;
}.input{width: 100%;height: 10%;background-color: #66ffcc;position: fixed;bottom: 0rpx;overflow: scroll;
}.inputarea{width: 495rpx;height: 6%;margin-top: 2%;background-color: white;padding-left: 20rpx;border-radius: 20rpx;position: fixed;bottom: 2%;left: 4%;
}.submit{border: 4rpx white solid;height: 6%;width: 140rpx;color: white;font-size: 100%;line-height: 200%;border-radius: 20%;position: fixed;right: 4%;bottom: 2%;text-align: center;
}

js:

Page({/*** 页面的初始数据*/data: {topScroll: 100000000000000000,input_value: '',goodID: '',myID: '',anotherID: '',avatarImg_true: '',avatarImg_false: '../../images/another_avatar.jpg',messageList: [],count: 0,timer: '',imageCloudPath: '',goodName: '',anotherName: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {if(options.type == 1){this.setData({avatarImg_true: getApp().globalData.avatarUrl,myID: getApp().globalData.openid,anotherID: options.userID,goodID: options.goodID,imageCloudPath: options.imagePath,goodName: options.goodName,anotherName: options.userNickName})}if (options.type == 2) {this.setData({avatarImg_true: getApp().globalData.avatarUrl,myID: getApp().globalData.openid,anotherID: options.id,goodID: options.goodID,imageCloudPath: options.imagePath,goodName: options.goodName,anotherName: options.userNickName})}const db = wx.cloud.database()db.collection('user').where({_openid: this.data.anotherID}).get({success: res=>{console.log(res.data[0].avatar)this.setData({ avatarImg_false: res.data[0].avatar})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var _this = thisthis.data.timer = setInterval(function () {const db = wx.cloud.database()const _ = db.commandvar chat = db.collection('chat').limit(100).where(_.or([{goodID: _this.data.goodID,speaker: _this.data.myID,listenner: _this.data.anotherID},{goodID: _this.data.goodID,speaker: _this.data.anotherID,listenner: _this.data.myID}])).orderBy('time', 'desc')chat.get({success: res => {var list = []list = res.dataconsole.log(list)for(var i=0;i<list.length/2;i++){var tmp = list[i]list[i] = list[list.length-i-1]list[list.length-i-1] = tmp}_this.setData({messageList: list,})if(_this.data.count<res.data){_this.setData({topScroll: 100000000000000000,count: _this.data.messageList.length})}console.log(_this.data.topScroll)}})}, 3000)},/*** 生命周期函数--监听页面隐藏*/onHide: function () {clearInterval(this.data.timer)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {clearInterval(this.data.timer)},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},input: function(e){this.setData({input_value: e.detail.value})},send: function(){console.log('input: '+this.data.input_value);if(this.isEmpty(this.data.input_value)){wx.showToast({title: '不支持发送空消息',icon: 'none',duration: 2000})return;}wx.showLoading({title: '发送中',})wx.cloud.callFunction({name: 'send',data:{goodID: this.data.goodID,speaker: this.data.myID,listenner: this.data.anotherID,content: this.data.input_value,time: new Date().valueOf(),speakerName: getApp().globalData.nickName,listennerName: this.data.anotherName,imageCloudPath: this.data.imageCloudPath,hasRead: false,goodName: this.data.goodName},success: res=>{console.log(res)},fail: function(){wx.showToast({title: '消息未发送',icon: 'none',duration: 2000})}})this.setData({input_value: ''})wx.hideLoading()},isEmpty: function (str) {if (str == null) return true;return str.replace(/\s/g, '').length == 0;}
})

云函数：send（新手使用的话上传之前别忘了安装依赖，具体步骤官方文档里写得很清楚）

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {try{await db.collection('chat').add({data:{goodID: event.goodID,speaker: event.speaker,listenner: event.listenner,content: event.content,time: event.time,hasRead: event.hasRead,speakerName: event.speakerName,listennerName: event.listennerName,imageCloudPath: event.imageCloudPath,goodName: event.goodName}})return 'true'}catch(e){console.log(e)}
}

写在最后

由于当时在赶项目，微信小程序的异步问题我们并没有解决得很好（promise老会出错），所以聊天数据库中有很多冗余的东西，希望大家喷这一块不要喷得太惨。
由于我写js并不是很多，写出的代码难免会不漂亮，还请各位前辈和大佬多多谅解和指正，谢谢。

小程序云开发无服务器实现实时通信相关推荐

获取服务器时间的软件如何修改时间,小程序云开发获取服务器时间
在实际开发过中,我们需要获取服务器时间,来保证时间的准确性,这里主要介绍使用使用云函数来获取服务器时间 // 云函数入口文件 const cloud = require('wx-server-sdk ...
微信小程序云开发 serverData() 服务器时间本地解析
服务器端时间用serverData()构造. 云数据库端的date类型数据,获取后的类型为object,无法直接显示到前端, 需要使用.get()方法读取查询的数据,格式化后显示到前端. 1.数据库添 ...
2021微信小程序云开发学习路线【视频加笔记】
从零开始学习小程序开发,小程序云开发的学习资料和路线!!想入门小程序请看下面内容~ 包括:云数据库,云函数,云托管,小程序云开发和服务器开发的项目实战,零基础学习JavaScript,小程序语法,cm ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
node.js 微信小程序部署服务器_微信小程序云开发环境部署，及添加数据
点击蓝字关注我们今天在漫无目的逛CSDN的时候,一篇关于微信公众号云开发的文章引起了我的注意.据介绍,小程序云开发简称tcb,是腾讯爸爸给我们提供的基于腾讯云的云服务器.目前云开发已包含云数据库, ...
小程序云开发实现微信支付，不需要搭建服务器
一.开发微信支付功能一定要架设服务器吗? 2019年的最后一天,舍得叔叔沉浸在探索的兴奋中,验证了微信小程序云开发也能优雅实现微信支付!小程序的目标是建立一个"serverless" ...
微信小程序服务器错误错误码404,微信小程序云开发错误代码大全
微信小程序云开发错误代码大全发布时间:2019-11-12编辑:三思转载阅读(1542) 以下记录的是微信小程序云开发常出现的错误. 错误码含义 -1通用错 ...
小程序云开发用买云服务器吗,小程序云开发要买服务器吗
小程序云开发要买服务器吗内容精选换一换简要介绍BreakDancer是一个C++软件包,可提供下一代配对末端测序读取的全基因组结构变异检测.它包括两个补充程序,BreakDancerMax预测五 ...
php访问微信云数据库,第三方服务器php获取微信小程序云开发access_token和云数据库...
微信小程序云开发开放了http api,可以从第三方访问云服务了.方便很多.云服务的后台,可以用PC端写了. 流程大概就是通过appid,appkey获得access_token,这个access_t ...

小程序云开发无服务器实现实时通信

我的第一篇博客——小程序云开发无服务器实现实时通信