云开发私人实时聊天室说明 在最开始开发小程序时，本人和团队成员实现小程序的聊天室时遇到一些困难，查阅了一些资料，有些讲得太泛，有些讲的太难，在一个阶段克服了这个困难后，收获了很多，对整个流程也熟悉了很多，在这里记录自己的一个思路，希望也能对开发新手有帮助。 项目基本配置 1.项目创建及云开发配置： 官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/quick-start/miniprogram.html PS：注意云函数目录是否为此样式：[图片] 若是普通目录样式记得在project.config.json中配置加入： [图片] 2.添加包colorui，用于样式使用，并在app.wxss中导入改包 [图片][图片] 3.在pages下新建文件夹index和新建page：index [图片] 聊天室静态页面 最终呈现的效果： 自己： [图片] 对方： [图片] 1. wxml 整体结构： [图片] 整一个页面说白了就是由一个scroll-view和一个回复框组成，scroll-view中由消息数组构成，消息的内容可以自己定义（时间，头像，消息内容等等） 具体源码： <!-- scroll-view来实现页面拖动 --> <scroll-view id='page' scroll-into-view="{{toView}}" upper-threshold="100"   scroll-y="true" enable-back-to-top="true" class="message-list">   <!-- 每一条消息 -->   <view class="cu-chat" wx:for="{{3}}" wx:key="index" id="row_{{index}}">     <!-- 自己发出的消息 -->     <block wx:if="{{false}}">       <block wx:if="{{true}}">         <view class="datetime" style="width:100%">2021-11-16 18:10</view>       </block>       <view class="cu-item self"         style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">         <view class="main">           <view class="content bg-green shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx">             <text style="font-size:33rpx">这是一条消息</text>           </view>         </view>         <view class="cu-avatar radius center"           style="background-image: url({{useravatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"           bindtap="go_myinfo"></view>       </view>     </block>      <!-- 对方发出的消息 -->      <block wx:else>       <block wx:if="{{true}}">         <view class="datetime" style="width:100%">2021-11-16 19:10</view>       </block>       <view class="cu-item"         style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">           <view class="cu-avatar radius center"             style="background-image: url({{match_avatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">           </view>         <view class="main">           <view class="content bg-white shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx">             <text style="font-size:33rpx">这是对面的一条消息</text>           </view>          </view>       </view>     </block>   </view> </scroll-view> <!-- 回复框 --> <view class="reply cu-bar">   <!-- 输入框 -->   <view class="opration-area">     <input type="text" bindinput="getContent" value="{{textInputValue}}" maxlength="300" cursor-spacing="10"       style="width: 544rpx; height: 64rpx; display: block; box-sizing: border-box;"></input>   </view>   <!-- 发送按钮 -->   <button class="cu-btn bg-green shadow" bindtap='sendMsg'     style="width: 150rpx; height: 64rpx; display: flex; box-sizing: border-box; left: -22rpx; top: 0rpx; position: relative">发送</button> </view> 2. wxss一些样式的配置，具体就不详细叙述了，见源码： /*消息窗口*/ .message-list { margin-bottom: 54px; } ​ /*文本输入或语音录入*/ .reply .opration-area { flex: 1; padding: 8px; } ​ /*回复文本框*/ .reply input { background: rgb(252, 252, 252); height: 36px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; padding-left: 3px; } ​ /*回复框*/ .reply { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; position: fixed; bottom: 0; width: 100%; height: 108rpx; border-top: 1px solid rgb(215, 215, 215); background: rgb(245, 245, 245); } ​ /*日期*/ .datetime { font-size: 10px; padding: 10px 0; color: #999; text-align: center; } 到此，静态的页面就已经做好啦，现在主要的难题也是数据部分，下面将先讲述数据库chatroom的设计及解释，最后进行js的代码编写。 数据库创建及设计1.数据库表创建：在编辑器打开云开发控制台，点击数据库，再点击集合名称右边加号，创建一个集合名称为chatroom的表。 [图片][图片] [图片] [图片] 2.chatroom设计具体页面如图： [图片] 其中， _id为记录创建时自动创建的标识属性，即主键 _openid和match_openid代表了自身和对方 records为一个对象数组，每个对象的属性分别是： msgText：消息属性（此案例中只有text属性，即文本，可自扩展为图片、音频等） openid：发送人的标识 sendTime：消息创建时间 sendTimeTS：消息创建时的时间戳（用于做时间比较，判断时间显示） showTime：消息是否显示时间 textContent：具体文本内容 其中， records：array类型， records中的记录：object类型 records中的sendTimeTS：number类型 records中的showTime：boolean类型 其余全为string类型 PS： 1、openid和match_openid可标识一个聊天室，是唯一不变的； 2、用户本身的openid是有可能在记录中的match_openid位置上的，谁发起了这个聊天室，openid这个位置就是那个发起用户的openid，所以在开发中，想要获取自己和所有其他人的聊天室，要查每条记录中的openid或者match_openid与自身openid是否匹配。 3.权限设置因为该表中的记录，非记录创建者也可以进行读写，这里的权限记得设置，不然会出问题： [图片] [图片] [图片] 具体功能实现（JS写法）1.先配置Page.data：6个属性，如有需要可自行扩展 [图片] chats存储数据库表中的records的所有信息； textInputValue是输入框内容。 2.绑定数据库表onChange函数： [图片] [图片] 这里的onChange输出e是这样的： [图片] type=init，获取了数据库表中该记录的所有内容，在这里将js中的chats进行赋值即可； 另外，当该记录内容变化时，type是update类型 3.wxml修改，wx-for将chats显示，以及一些判断和内容显示的设置： [图片] 到此，显示效果就有啦 [图片] 接下来，就是信息的添加了，下面将显示如何添加新信息到数据库 4.发送信息 先获取输入框内容： [图片] [图片] 发送函数： 增加一条信息，就是在records数组中加一条记录，所以在函数内部要对新纪录的属性进行一些赋值和判断等。 对showTime的处理： [图片] 消息空白处理： [图片] 对消息内的所有属性进行一个打包处理： [图片] 存储记录，并滑动页面： [图片] 最后，清空消息框内容 [图片] 发送一条消息，最终效果如图： [图片][图片] js源码const app = getApp() const db = wx.cloud.database() const _ = db.command const chatroomCollection = db.collection("chatroom") var util = require('../../utils/util.js'); ​ Page({ ​  data: {    //这里的openid和match_openid应该是在上一级页面传进来的属性，这里由于只有聊天室所以暂时设置为一些固定值，用于测试    openid:'',    match_openid:'',    //这里的avatar是头像，具体传参方式自己设定，这里暂时设置为固定值，用于测试    useravatar:'',                          match_avatar:'',    chats:[],    textInputValue:'' }, ​  onReady() {    var that = this    //查询openid和match_openid所标识的唯一聊天室    chatroomCollection.where({        _openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)),        match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid))     })      //绑定onChange，直观而言即表中该记录发生变动时，调用该函数     .watch({        onChange: this.onChange.bind(this),        onError(err) {          console.log(err)       }     }) }, ​ ​  //数据库表onchange绑定函数  onChange(e) {    let that = this    //type="init"的情况：初始化聊天窗口信息    if (e.type == "init") {      that.initchats(e.docs[0].records)   }    //type="update"的情况：records中增加了一条记录    else {      //在chats数组中增加该新消息      let i = that.data.chats.length      const new_chats = [...that.data.chats]      if (e.docs.length)        new_chats.push(e.docs[0].records[i])      this.setData({        chats: new_chats     })   } }, ​  initchats(records) {    this.setData({      chats: records   })    //跳转到页面底部    this.goBottom() }, ​  //获取输入文本  getContent(e) {    this.data.textInputValue = e.detail.value }, ​  sendMsg(){    let that = this    //show代表了数据库表中的showTime属性，是否显示消息时间    var show = false    //无记录时，true    if (this.data.chats.length == 0)      show = true    //判断上下两条消息的时间差决定是否显示时间，这里设置了2分钟：120000毫秒，可自行修改    else {      if (Date.now() - this.data.chats[this.data.chats.length - 1].sendTimeTS > 120000)        show = true   } ​    const _ = db.command    //消息空白处理    if (!that.data.textInputValue) {      wx.showToast({        title: '不能发送空白信息',        icon: 'none',     })      return   } ​    //消息内容赋值    const doc = {      openid: that.data.openid,      msgText: "text",      textContent: that.data.textInputValue,      sendTime: util.formatTime(new Date()),      sendTimeTS: Date.now(),      showTime: show,   } ​    //添加数据库表中该记录的records数组，并跳转页面到底部    chatroomCollection.where({        _openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)),        match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid))     })     .update({        data: {          records: _.push(doc)       }     })     .then(res => {        that.goBottom()     }) ​    //消息设空    that.setData({      textInputValue: ""   }) }, ​  goBottom() {    wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {      if (rect) {        // 使页面滚动到底部        wx.pageScrollTo({          scrollTop: rect.height + 4       })     }   }).exec() }, }) 其中，util.js内容如下： const formatTime = date => {  const year = date.getFullYear()  const month = date.getMonth() + 1  const day = date.getDate()  const hour = date.getHours()  const minute = date.getMinutes()  const second = date.getSeconds() ​  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}` } ​ const formatNumber = n => {  n = n.toString()  return n[1] ? n : `0${n}` } ​ module.exports = {  formatTime } ​ 一个简单的demo就完成了，大家有什么问题欢迎随时q我。 -----------完结撒花----------

技术文章写作规范 来源： GitHub - ruanyf/document-style-guide: 中文技术文档的写作规范，by阮一峰 前言 最近在写文章会想一篇好的文章是不是和写语文作文一样有规范呢？所以就在网上看到阮一峰老师的写的这篇中文技术文档写作规范，觉得真的写得很好，这里就和大家分享一下。 但是阮老师写的是技术文档规范，个人觉得文章的话如果整得太严肃的话或许不太好，不过一些结构，表达还是要注意得，像代码用 md 代码块， uml 图等等会好一点，当然这是个人爱好，这里给大家转载一些我觉得在平时写文章要注意一下的几个点，有兴趣的可以直接去看阮老师的正文！ 标题 层级 标题分为四级。 一级标题：文章的标题 二级标题：文章主要部分的大标题 三级标题：二级标题下面一级的小标题 四级标题：三级标题下面某一方面的小标题 下面是示例。 [代码]# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 [代码] 原则 （1）一级标题下，不能直接出现三级标题。 示例：下面的文章结构，缺少二级标题。 [代码]# 一级标题 ### 三级标题 [代码] （2）标题要避免孤立编号（即同级标题只有一个）。 示例：下面的文章结构，[代码]二级标题 A[代码]只包含一个三级标题，完全可以省略[代码]三级标题 A[代码]。 [代码]## 二级标题 A ### 三级标题 A ## 二级标题 B [代码] （3）下级标题不重复上一级标题的名字。 示例：下面的文章结构，二级标题与下属的三级标题同名，建议避免。 [代码]## 概述 ### 概述 [代码] （4）谨慎使用四级标题，尽量避免出现，保持层级的简单，防止出现过于复杂的章节。 如果三级标题下有并列性的内容，建议只使用项目列表（Item list）。 示例：下面的结构二要好于结构一。结构一适用的场景，主要是较长篇幅的内容。 [代码]结构一 ### 三级标题 #### 四级标题 A #### 四级标题 B #### 四级标题 C 结构二 ### 三级标题 **（1）A** **（2）B** **（3）C** [代码] 文本 字间距 （1）全角中文字符与半角英文字符之间，应有一个半角空格。 [代码]错误：本文介绍如何快速启动Windows系统。 正确：本文介绍如何快速启动 Windows 系统。 [代码] （2）全角中文字符与半角阿拉伯数字之间，有没有半角空格都可，但必须保证风格统一，不能两种风格混杂。 [代码]正确：2011年5月15日，我订购了5台笔记本电脑与10台平板电脑。 正确：2011 年 5 月 15 日，我订购了 5 台笔记本电脑与 10 台平板电脑。 [代码] 半角的百分号，视同阿拉伯数字。 [代码]正确：今年我国经济增长率是6.5%。 正确：今年我国经济增长率是 6.5%。 [代码] （3）英文单位若不翻译，单位前的阿拉伯数字与单位符号之间，应留出适当的空隙。 [代码]例1：一部容量为 16 GB 的智能手机 例2：1 h = 60 min = 3,600 s [代码] （4）半角英文字符和半角阿拉伯数字，与全角标点符号之间不留空格。 [代码]错误：他的电脑是 MacBook Air 。 正确：他的电脑是 MacBook Air。 [代码] 句子 （1）避免使用长句。 不包含任何标点符号的单个句子，或者以逗号分隔的句子构件，长度尽量保持在 20 个字以内；20～29 个字的句子，可以接受；30～39 个字的句子，语义必须明确，才能接受；多于 40 个字的句子，任何情况下都不能接受。 [代码]错误：本产品适用于从由一台服务器进行动作控制的单一节点结构到由多台服务器进行动作控制的并行处理程序结构等多种体系结构。 正确：本产品适用于多种体系结构。无论是由一台服务器（单一节点结构），还是由多台服务器（并行处理结构）进行动作控制，均可以使用本产品。 [代码] 逗号分割的长句，总长度不应该超过 100 字或者正文的 3 行。 （2）尽量使用简单句和并列句，避免使用复合句。 [代码]并列句：他昨天生病了，没有参加会议。 复合句：那个昨天生病的人没有参加会议。 [代码] （3）同样一个意思，尽量使用肯定句表达，不使用否定句表达。 [代码]错误：请确认没有接通装置的电源。 正确：请确认装置的电源已关闭。 [代码] （4）避免使用双重否定句。 [代码]错误：没有删除权限的用户，不能删除此文件。 正确：用户必须拥有删除权限，才能删除此文件。 [代码] 变化程度的表示法 数字的增加要使用“增加了”、“增加到”。“了”表示增量，“到”表示定量。 [代码]增加到过去的两倍 （过去为一，现在为二） 增加了两倍 （过去为一，现在为三） [代码] 数字的减少要使用“降低了”、“降低到”。“了”表示增量，“到”表示定量。 [代码]降低到百分之八十 （定额是一百，现在是八十） 降低了百分之八十 （原来是一百，现在是二十） [代码] 不能用“降低 N 倍”或“减少 N 倍”的表示法，要用“降低百分之几”或“减少百分之几”。因为减少（或降低）一倍表示数值原来为一百，现在等于零。 参考链接 产品手册中文写作规范, by 华为 写作规范和格式规范, by DaoCloud 技术写作技巧在日汉翻译中的应用, by 刘方 简体中文规范指南, by lengoo 文档风格指南, by LeanCloud 豌豆荚文案风格指南, by 豌豆荚 中文文案排版指北, by sparanoid 中文排版需求, by W3C 为什么文件名要小写？, by 阮一峰 Google Developer Documentation Style Guide, by Google

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]

循环数组的时候可以直接用wx:for-index的值，毕竟是数组下标。 但是如果循环的是对象的话获取的就是属性名而不是循环次数了，这时应该怎么办？ Vue里可以直接v-for="(val,key,index) in obj"里获取index，微信里有没有办法获取？

氛享ACUT提供了校园内学生需要的多种功能平台，如闲置交易、快递外卖代拿、问题求助、实习求职等等。为学生提供了一个方便快捷的信息平台，创造了一个更多元化的沟通平台。