完成长按功能

README.md

+# 云开发 quickstart
+
+这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力：
+
+- 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 文档型数据库
+- 文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
+- 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码
+
+## 参考文档
+
+- [云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)
+

cloudfunctions/callback/config.json

+{
+  "permissions": {
+    "openapi": [
+      "customerServiceMessage.send"
+    ]
+  }
+}
\ No newline at end of file

cloudfunctions/callback/index.js

+const cloud = require('wx-server-sdk')
+
+cloud.init({
+  // API 调用都保持和云函数当前所在环境一致
+  env: cloud.DYNAMIC_CURRENT_ENV
+})
+
+// 云函数入口函数
+exports.main = async (event, context) => {
+  console.log(event)
+
+  const { OPENID } = cloud.getWXContext()
+
+  const result = await cloud.openapi.customerServiceMessage.send({
+    touser: OPENID,
+    msgtype: 'text',
+    text: {
+      content: `收到：${event.Content}`,
+    }
+  })
+
+  console.log(result)
+
+  return result
+}

cloudfunctions/callback/package.json

+{
+  "name": "callback",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "~2.3.3"
+  }
+}
\ No newline at end of file

cloudfunctions/echo/config.json

+{
+  "permissions": {
+    "openapi": []
+  }
+}

cloudfunctions/echo/index.js

+const cloud = require('wx-server-sdk')
+
+exports.main = async (event, context) => {
+  // event.userInfo 是已废弃的保留字段，在此不做展示
+  // 获取 OPENID 等微信上下文请使用 cloud.getWXContext()
+  delete event.userInfo
+  return event
+}

cloudfunctions/echo/package.json

+{
+  "name": "echo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "~2.3.3"
+  }
+}
\ No newline at end of file

cloudfunctions/login/config.json

+{
+  "permissions": {
+    "openapi": []
+  }
+}

cloudfunctions/login/index.js

+// 云函数模板
+// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”
+
+const cloud = require('wx-server-sdk')
+
+// 初始化 cloud
+cloud.init({
+  // API 调用都保持和云函数当前所在环境一致
+  env: cloud.DYNAMIC_CURRENT_ENV
+})
+
+/**
+ * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
+ * 
+ * event 参数包含小程序端调用传入的 data
+ * 
+ */
+exports.main = async (event, context) => {
+  console.log(event)
+  console.log(context)
+
+  // 可执行其他自定义逻辑
+  // console.log 的内容可以在云开发云函数调用日志查看
+
+  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息
+  const wxContext = cloud.getWXContext()
+
+  return {
+    event,
+    openid: wxContext.OPENID,
+    appid: wxContext.APPID,
+    unionid: wxContext.UNIONID,
+    env: wxContext.ENV,
+  }
+}
+

cloudfunctions/login/package.json

+{
+  "name": "login",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "~2.3.3"
+  }
+}

cloudfunctions/openapi/config.json

+{
+  "permissions": {
+    "openapi": [
+      "wxacode.get",
+      "subscribeMessage.send",
+      "subscribeMessage.addTemplate",
+      "templateMessage.send",
+      "templateMessage.addTemplate",
+      "templateMessage.deleteTemplate",
+      "templateMessage.getTemplateList",
+      "templateMessage.getTemplateLibraryById",
+      "templateMessage.getTemplateLibraryList"
+    ]
+  }
+}
\ No newline at end of file

cloudfunctions/openapi/index.js

+// 云函数入口文件
+const cloud = require('wx-server-sdk')
+
+cloud.init()
+
+// 云函数入口函数
+exports.main = async (event, context) => {
+  console.log(event)
+  switch (event.action) {
+    case 'requestSubscribeMessage': {
+      return requestSubscribeMessage(event)
+    }
+    case 'sendSubscribeMessage': {
+      return sendSubscribeMessage(event)
+    }
+    case 'getWXACode': {
+      return getWXACode(event)
+    }
+    case 'getOpenData': {
+      return getOpenData(event)
+    }
+    default: {
+      return
+    }
+  }
+}
+
+async function requestSubscribeMessage(event) {
+  // 此处为模板 ID，开发者需要到小程序管理后台 - 订阅消息 - 公共模板库中添加模板，
+  // 然后在我的模板中找到对应模板的 ID，填入此处
+  return '请到管理后台申请模板 ID 然后在此替换' // 如 'N_J6F05_bjhqd6zh2h1LHJ9TAv9IpkCiAJEpSw0PrmQ'
+}
+
+async function sendSubscribeMessage(event) {
+  const { OPENID } = cloud.getWXContext()
+
+  const { templateId } = event
+
+  const sendResult = await cloud.openapi.subscribeMessage.send({
+    touser: OPENID,
+    templateId,
+    miniprogram_state: 'developer',
+    page: 'pages/openapi/openapi',
+    // 此处字段应修改为所申请模板所要求的字段
+    data: {
+      thing1: {
+        value: '咖啡',
+      },
+      time3: {
+        value: '2020-01-01 00:00',
+      },
+    }
+  })
+
+  return sendResult
+}
+
+async function getWXACode(event) {
+  // 此处将获取永久有效的小程序码，并将其保存在云文件存储中，最后返回云文件 ID 给前端使用
+
+  const wxacodeResult = await cloud.openapi.wxacode.get({
+    path: 'pages/openapi/openapi',
+  })
+
+  const fileExtensionMatches = wxacodeResult.contentType.match(/\/([^/]+)/)
+  const fileExtension = (fileExtensionMatches && fileExtensionMatches[1]) || 'jpg'
+
+  const uploadResult = await cloud.uploadFile({
+    // 云文件路径，此处为演示采用一个固定名称
+    cloudPath: `wxacode_default_openapi_page.${fileExtension}`,
+    // 要上传的文件内容可直接传入图片 Buffer
+    fileContent: wxacodeResult.buffer,
+  })
+
+  if (!uploadResult.fileID) {
+    throw new Error(`upload failed with empty fileID and storage server status code ${uploadResult.statusCode}`)
+  }
+
+  return uploadResult.fileID
+}
+
+async function getOpenData(event) {
+  return cloud.getOpenData({
+    list: event.openData.list,
+  })
+}

cloudfunctions/openapi/package.json

+{
+  "name": "openapi",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "wx-server-sdk": "~2.3.3"
+  }
+}

miniprogram/app.js

+//app.js
+App({
+  onLaunch: function () {
+    if (!wx.cloud) {
+      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
+    } else {
+      wx.cloud.init({
+        // env 参数说明：
+        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
+        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
+        //   如不填则使用默认环境（第一个创建的环境）
+        // env: 'my-env-id',
+        traceUser: true,
+      })
+    }
+
+    this.globalData = {}
+  }
+})

miniprogram/app.json

+{
+  "pages": [
+    "pages/index/index"
+  ],
+  "window": {
+    "backgroundColor": "#F6F6F6",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#F6F6F6",
+    "navigationBarTitleText": "云开发 QuickStart",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json",
+  "style": "v2"
+}
\ No newline at end of file

miniprogram/app.wxss

+/**app.wxss**/
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+} 
+
+button {
+  background: initial;
+}
+
+button:focus{
+  outline: 0;
+}
+
+button::after{
+  border: none;
+}
+
+
+page {
+  background: #f6f6f6;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.userinfo, .uploader, .tunnel {
+  margin-top: 40rpx;
+  height: 140rpx;
+  width: 100%;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: none;
+  border-right: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition: all 300ms ease;
+}
+
+.userinfo-avatar {
+  width: 100rpx;
+  height: 100rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+  background-size: cover;
+  background-color: white;
+}
+
+.userinfo-avatar:after {
+  border: none;
+}
+
+.userinfo-nickname {
+  font-size: 32rpx;
+  color: #007aff;
+  background-color: white;
+  background-size: cover;
+}
+
+.userinfo-nickname::after {
+  border: none;
+}
+
+.uploader, .tunnel {
+  height: auto;
+  padding: 0 0 0 40rpx;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+
+.uploader-text, .tunnel-text {
+  width: 100%;
+  line-height: 52px;
+  font-size: 34rpx;
+  color: #007aff;
+}
+
+.uploader-container {
+  width: 100%;
+  height: 400rpx;
+  padding: 20rpx 20rpx 20rpx 0;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.uploader-image {
+  width: 100%;
+  height: 360rpx;
+}
+
+.tunnel {
+  padding: 0 0 0 40rpx;
+}
+
+.tunnel-text {
+  position: relative;
+  color: #222;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.tunnel-text:first-child {
+  border-top: none;
+}
+
+.tunnel-switch {
+  position: absolute;
+  right: 20rpx;
+  top: -2rpx;
+}
+
+.disable {
+  color: #888;
+}
+
+.service {
+  position: fixed;
+  right: 40rpx;
+  bottom: 40rpx;
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 50%;
+  background: linear-gradient(#007aff, #0063ce);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  transition: all 300ms ease;
+}
+
+.service-button {
+  position: absolute;
+  top: 40rpx;
+}
+
+.service:active {
+  box-shadow: none;
+}
+
+.request-text {
+  padding: 20rpx 0;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  word-break: break-all;
+}

miniprogram/components/chatroom/chatroom.js

+const FATAL_REBUILD_TOLERANCE = 10
+const SETDATA_SCROLL_TO_BOTTOM = {
+  scrollTop: 100000,
+  scrollWithAnimation: true,
+}
+
+Component({
+  properties: {
+    envId: String,
+    collection: String,
+    groupId: String,
+    groupName: String,
+    userInfo: Object,
+    onGetUserInfo: {
+      type: Function,
+    },
+    getOpenID: {
+      type: Function,
+    },
+  },
+
+  data: {
+    chats: [],
+    textInputValue: '',
+    openId: '',
+    scrollTop: 0,
+    scrollToMessage: '',
+    hasKeyboard: false,
+  },
+
+  methods: {
+    onGetUserInfo(e) {
+      this.properties.onGetUserInfo(e)
+    },
+
+    getOpenID() { 
+      return this.properties.getOpenID() 
+    },
+
+    mergeCommonCriteria(criteria) {
+      return {
+        groupId: this.data.groupId,
+        ...criteria,
+      }
+    },
+
+    async initRoom() {
+      this.try(async () => {
+        await this.initOpenID()
+
+        const { envId, collection } = this.properties
+        this.db = wx.cloud.database({
+          env: envId,
+        })
+        const db = this.db
+        const _ = db.command
+
+        const { data: initList } = await db.collection(collection).where(this.mergeCommonCriteria()).orderBy('sendTimeTS', 'desc').get()
+
+        console.log('init query chats', initList)
+
+        this.setData({
+          chats: initList.reverse(),
+          scrollTop: 10000,
+        })
+
+        this.initWatch(initList.length ? {
+          sendTimeTS: _.gt(initList[initList.length - 1].sendTimeTS),
+        } : {})
+      }, '初始化失败')
+    },
+
+    async initOpenID() {
+      return this.try(async () => {
+        const openId = await this.getOpenID()
+
+        this.setData({
+          openId,
+        })
+      }, '初始化 openId 失败')
+    },
+
+    async initWatch(criteria) {
+      this.try(() => {
+        const { collection } = this.properties
+        const db = this.db
+        const _ = db.command
+
+        console.warn(`开始监听`, criteria)
+        this.messageListener = db.collection(collection).where(this.mergeCommonCriteria(criteria)).watch({
+          onChange: this.onRealtimeMessageSnapshot.bind(this),
+          onError: e => {
+            if (!this.inited || this.fatalRebuildCount >= FATAL_REBUILD_TOLERANCE) {
+              this.showError(this.inited ? '监听错误，已断开' : '初始化监听失败', e, '重连', () => {
+                this.initWatch(this.data.chats.length ? {
+                  sendTimeTS: _.gt(this.data.chats[this.data.chats.length - 1].sendTimeTS),
+                } : {})
+              })
+            } else {
+              this.initWatch(this.data.chats.length ? {
+                sendTimeTS: _.gt(this.data.chats[this.data.chats.length - 1].sendTimeTS),
+              } : {})
+            }
+          },
+        })
+      }, '初始化监听失败')
+    },
+
+    onRealtimeMessageSnapshot(snapshot) {
+      console.warn(`收到消息`, snapshot)
+
+      if (snapshot.type === 'init') {
+        this.setData({
+          chats: [
+            ...this.data.chats,
+            ...[...snapshot.docs].sort((x, y) => x.sendTimeTS - y.sendTimeTS),
+          ],
+        })
+        this.scrollToBottom()
+        this.inited = true
+      } else {
+        let hasNewMessage = false
+        let hasOthersMessage = false
+        const chats = [...this.data.chats]
+        for (const docChange of snapshot.docChanges) {
+          switch (docChange.queueType) {
+            case 'enqueue': {
+              hasOthersMessage = docChange.doc._openid !== this.data.openId
+              const ind = chats.findIndex(chat => chat._id === docChange.doc._id)
+              if (ind > -1) {
+                if (chats[ind].msgType === 'image' && chats[ind].tempFilePath) {
+                  chats.splice(ind, 1, {
+                    ...docChange.doc,
+                    tempFilePath: chats[ind].tempFilePath,
+                  })
+                } else chats.splice(ind, 1, docChange.doc)
+              } else {
+                hasNewMessage = true
+                chats.push(docChange.doc)
+              }
+              break
+            }
+          }
+        }
+        this.setData({
+          chats: chats.sort((x, y) => x.sendTimeTS - y.sendTimeTS),
+        })
+        if (hasOthersMessage || hasNewMessage) {
+          this.scrollToBottom()
+        }
+      }
+    },
+
+    async onConfirmSendText(e) {
+      this.try(async () => {
+        if (!e.detail.value) {
+          return
+        }
+
+        const { collection } = this.properties
+        const db = this.db
+        const _ = db.command
+
+        const doc = {
+          _id: `${Math.random()}_${Date.now()}`,
+          groupId: this.data.groupId,
+          avatar: this.data.userInfo.avatarUrl,
+          nickName: this.data.userInfo.nickName,
+          msgType: 'text',
+          textContent: e.detail.value,
+          sendTime: new Date(),
+          sendTimeTS: Date.now(), // fallback
+        }
+
+        this.setData({
+          textInputValue: '',
+          chats: [
+            ...this.data.chats,
+            {
+              ...doc,
+              _openid: this.data.openId,
+              writeStatus: 'pending',
+            },
+          ],
+        })
+        this.scrollToBottom(true)
+
+        await db.collection(collection).add({
+          data: doc,
+        })
+
+        this.setData({
+          chats: this.data.chats.map(chat => {
+            if (chat._id === doc._id) {
+              return {
+                ...chat,
+                writeStatus: 'written',
+              }
+            } else return chat
+          }),
+        })
+      }, '发送文字失败')
+    },
+
+    async onChooseImage(e) {
+      wx.chooseImage({
+        count: 1,
+        sourceType: ['album', 'camera'],
+        success: async res => {
+          const { envId, collection } = this.properties
+          const doc = {
+            _id: `${Math.random()}_${Date.now()}`,
+            groupId: this.data.groupId,
+            avatar: this.data.userInfo.avatarUrl,
+            nickName: this.data.userInfo.nickName,
+            msgType: 'image',
+            sendTime: new Date(),
+            sendTimeTS: Date.now(), // fallback
+          }
+
+          this.setData({
+            chats: [
+              ...this.data.chats,
+              {
+                ...doc,
+                _openid: this.data.openId,
+                tempFilePath: res.tempFilePaths[0],
+                writeStatus: 0,
+              },
+            ]
+          })
+          this.scrollToBottom(true)
+
+          const uploadTask = wx.cloud.uploadFile({
+            cloudPath: `${this.data.openId}/${Math.random()}_${Date.now()}.${res.tempFilePaths[0].match(/\.(\w+)$/)[1]}`,
+            filePath: res.tempFilePaths[0],
+            config: {
+              env: envId,
+            },
+            success: res => {
+              this.try(async () => {
+                await this.db.collection(collection).add({
+                  data: {
+                    ...doc,
+                    imgFileID: res.fileID,
+                  },
+                })
+              }, '发送图片失败')
+            },
+            fail: e => {
+              this.showError('发送图片失败', e)
+            },
+          })
+
+          uploadTask.onProgressUpdate(({ progress }) => {
+            this.setData({
+              chats: this.data.chats.map(chat => {
+                if (chat._id === doc._id) {
+                  return {
+                    ...chat,
+                    writeStatus: progress,
+                  }
+                } else return chat
+              })
+            })
+          })
+        },
+      })
+    },
+
+    onMessageImageTap(e) {
+      wx.previewImage({
+        urls: [e.target.dataset.fileid],
+      })
+    },
+
+    scrollToBottom(force) {
+      if (force) {
+        console.log('force scroll to bottom')
+        this.setData(SETDATA_SCROLL_TO_BOTTOM)
+        return
+      }
+
+      this.createSelectorQuery().select('.body').boundingClientRect(bodyRect => {
+        this.createSelectorQuery().select(`.body`).scrollOffset(scroll => {
+          if (scroll.scrollTop + bodyRect.height * 3 > scroll.scrollHeight) {
+            console.log('should scroll to bottom')
+            this.setData(SETDATA_SCROLL_TO_BOTTOM)
+          }
+        }).exec()
+      }).exec()
+    },
+
+    async onScrollToUpper() {
+      if (this.db && this.data.chats.length) {
+        const { collection } = this.properties
+        const _ = this.db.command
+        const { data } = await this.db.collection(collection).where(this.mergeCommonCriteria({
+          sendTimeTS: _.lt(this.data.chats[0].sendTimeTS),
+        })).orderBy('sendTimeTS', 'desc').get()
+        this.data.chats.unshift(...data.reverse())
+        this.setData({
+          chats: this.data.chats,
+          scrollToMessage: `item-${data.length}`,
+          scrollWithAnimation: false,
+        })
+      }
+    },
+
+    async try(fn, title) {
+      try {
+        await fn()
+      } catch (e) {
+        this.showError(title, e)
+      }
+    },
+
+    showError(title, content, confirmText, confirmCallback) {
+      console.error(title, content)
+      wx.showModal({
+        title,
+        content: content.toString(),
+        showCancel: confirmText ? true : false,
+        confirmText,
+        success: res => {
+          res.confirm && confirmCallback()
+        },
+      })
+    },
+  },
+
+  ready() {
+    global.chatroom = this
+    this.initRoom()
+    this.fatalRebuildCount = 0
+  },
+})

miniprogram/components/chatroom/chatroom.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

miniprogram/components/chatroom/chatroom.wxml

+<view class="chatroom">
+  <view class="header">
+    <!-- display number of people in the room -->
+    <view class="left"></view>
+    <!-- room name -->
+    <view class="middle">{{groupName}}</view>
+    <!-- reserved -->
+    <view class="right"></view>
+  </view>
+
+  <!-- chats -->
+  <scroll-view 
+    class="body" 
+    scroll-y 
+    scroll-with-animation="{{scrollWithAnimation}}"
+    scroll-top="{{scrollTop}}" 
+    scroll-into-view="{{scrollToMessage}}"
+    bindscrolltoupper="onScrollToUpper"
+  >
+    <view 
+      wx:for="{{chats}}"
+      wx:key="{{item._id}}"
+      id="item-{{index}}"
+      class="message {{openId == item._openid ? 'message__self' : ''}}"
+    >
+      <image 
+        class="avatar"
+        src="{{item.avatar}}"
+        mode="scaleToFill"
+      ></image> 
+      <view class="main">
+        <view class="nickname">{{item.nickName}}</view>
+        <block wx:if="{{item.msgType === 'image'}}">
+          <view class="image-wrapper">
+            <view class="loading" wx:if="{{item.writeStatus > -1}}">{{item.writeStatus}}%</view>
+            <image 
+              src="{{item.tempFilePath || item.imgFileID}}" 
+              data-fileid="{{item.tempFilePath || item.imgFileID}}" 
+              class="image-content" 
+              style="{{item.imgStyle}}"
+              mode="scallToFill" 
+              bindtap="onMessageImageTap"></image>
+          </view>
+        </block>
+        <block wx:else>
+          <view class="text-wrapper">
+            <view class="loading" wx:if="{{item.writeStatus === 'pending'}}">···</view>
+            <view class="text-content">{{item.textContent}}</view>
+          </view>
+        </block>
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- message sender -->
+  <view class="footer">
+    <view class="message-sender" wx:if="{{userInfo}}">
+      <input 
+        class="text-input"
+        type="text"
+        confirm-type="send"
+        bindconfirm="onConfirmSendText"
+        cursor-spacing="20"
+        value="{{textInputValue}}"
+      ></input>
+
+      <image 
+        src="./photo.png" 
+        class="btn-send-image" 
+        mode="scaleToFill"
+        bindtap="onChooseImage"
+      ></image>
+    </view>
+
+    <view class="message-sender" wx:if="{{!userInfo}}">
+      <button 
+        open-type="getUserInfo" 
+        bindgetuserinfo="onGetUserInfo"
+        class="userinfo"
+      >请先登录后参与聊天</button>
+    </view>
+  </view>
+
+</view>
+

miniprogram/components/chatroom/chatroom.wxss

+.chatroom {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chatroom .header {
+  flex-basis: fit-content;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #ddd;
+  padding: 20rpx 0 30rpx;
+  font-size: 30rpx;
+  /* background: rgb(34, 187, 47);
+  color: rgba(255, 255, 255, 1) */
+  /* font-family: 'Microsoft YaHei' */
+}
+
+.chatroom .header .left {
+  flex: 1;
+}
+
+.chatroom .header .middle {
+  flex: 2;
+  text-align: center;
+}
+
+.chatroom .header .right {
+  flex: 1;
+}
+
+.chatroom .body {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  background: rgb(237,237,237);
+  padding-bottom: 16rpx;
+}
+
+.body .message {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  margin: 12rpx 0;
+}
+
+.body .message.message__self {
+  flex-direction: row-reverse;
+}
+
+.body .message .avatar {
+  position: relative;
+  top: 5rpx;
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 5rpx;
+  margin: 15rpx;
+}
+
+.body .message .main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.body .message.message__self .main {
+  align-items: flex-end;
+}
+
+.body .message .nickname {
+  font-size: 24rpx;
+  color: #444;
+}
+
+.body .message .text-content {
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background-color: #fff;
+  margin: 2px 0 0 0;
+  padding: 4px 10px;
+  font-size: 30rpx;
+  display: inline-block;
+}
+
+.body .message.message__self .text-content {
+  background-color: paleturquoise;
+}
+
+.body .message .text-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 80%;
+}
+
+.body .message.message__self .text-wrapper .loading{
+  font-size: 16rpx;
+  margin-right: 18rpx;
+}
+
+.body .message .image-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.body .message .image-content {
+  max-width: 240rpx;
+  max-height: 240rpx;
+}
+
+.body .message.message__self .image-wrapper .loading {
+  font-size: 20rpx;
+  margin-right: 18rpx;
+}
+
+.chatroom .footer {
+  flex-basis: fit-content;
+  display: flex;
+  flex-direction: row;
+  border-top: 1px solid #ddd;
+  font-size: 10rpx;
+  padding: 20rpx 30rpx;
+  background: rgb(246,246,246);
+}
+
+.chatroom .footer .message-sender {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.message-sender .text-input {
+  flex: 1;
+  font-size: 16px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  padding: 3px 6px;
+  margin: 0 10px 0 5px;
+  background: #fff;
+}
+
+.message-sender .btn-send-image {
+  width: 50rpx;
+  height: 50rpx;
+  align-self: center;
+}
+
+button {
+  font-size: 30rpx;
+}
+
+button.userinfo {
+  background: darkturquoise;
+  color: aliceblue;
+  padding: 0 100rpx;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+}

miniprogram/pages/index/index.js

+const app = getApp();
+Page({
+  data: {
+    index: 0,
+    img: "../../images/运行 拷贝 2.png",
+    dt: 0,
+  },
+
+  //长按开始
+  touchstart(e) {
+    this.startTime = e.timeStamp;
+    // 根据索引渲染图片
+    if (this.data.index === 0) {
+      this.setData({
+        img: "../../images/运行 拷贝 2.png"
+      })
+    } else if (this.data.index === 1) {
+      this.setData({
+        img: "../../images/运行 拷贝.png"
+      })
+    } else if (this.data.index === 2) {
+      this.setData({
+        img: "../../images/运行.png"
+      })
+    } else if (this.data.index === 3) {
+      this.setData({
+        img: "../../images/运行 拷贝 3.png"
+      })
+    } else if (this.data.index === 4) {
+      this.setData({
+        img: "../../images/运行 拷贝 4.png"
+      })
+    }
+    this.data.dt = setInterval(() => {
+      // 按住后根据时间推移索引自增
+      if (this.data.index > 4) {
+        this.setData({
+          index: 0,
+        })
+      } else {
+        this.setData({
+          index: this.data.index++,
+        })
+      }
+    }, 2000)
+  },
+
+ //长按结束
+ touchend(e) {
+   clearInterval(this.data.dt);
+    this.endTime = e.timeStamp;
+    // 长按的时间取8000的余数 8000毫秒为一个周期
+    let pressTime = (this.endTime - this.startTime) % 8000;
+    console.log(pressTime);
+    // 根据取余后的毫秒数渲染图片
+    if(pressTime >= 350 && pressTime < 2000) {
+      this.setData({
+        img: "../../images/运行 拷贝.png"
+      })
+    } else if(pressTime >= 2000 && pressTime < 4000) {
+      this.setData({
+        img: "../../images/运行.png"
+      })
+    } else if(pressTime >= 4000 && pressTime < 6000) {
+      this.setData({
+        img: "../../images/运行 拷贝 3.png"
+      })
+    } else if(pressTime >= 6000 && pressTime < 8000) {
+      this.setData({
+        img: "../../images/运行 拷贝 4.png"
+      })
+    } else {
+      this.setData({
+        img: "../../images/运行 拷贝 2.png",
+      })
+    }
+ }
+})

miniprogram/pages/index/index.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

miniprogram/pages/index/index.wxml

+<view class="container">
+  <view class="dice">
+    <image class="dice-bc" src="{{img}}"></image>
+    <image
+      class="dice-img"
+      src="../../images/＜编组＞.png"
+      bindtouchstart="touchstart"
+      bindtouchmove="touchmove"
+      bindtouchend="touchend"></image>
+  </view>
+</view>

miniprogram/pages/index/index.wxss

+.container{
+  width: 750rpx;
+}
+.dice{
+  width: 317rpx;
+  height: 317rpx;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 210rpx;
+}
+.dice-bc{
+  width: 317rpx;
+  height: 317rpx;
+}
+.dice-img{
+  width: 150rpx;
+  height: 150rpx;
+  position: absolute;
+  top: 90rpx;
+  left: 90rpx;
+}
\ No newline at end of file

miniprogram/sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+    "action": "allow",
+    "page": "*"
+  }]
+}
\ No newline at end of file

project.config.json

+{
+  "miniprogramRoot": "miniprogram/",
+  "cloudfunctionRoot": "cloudfunctions/",
+  "setting": {
+    "urlCheck": true,
+    "es6": true,
+    "enhance": true,
+    "postcss": true,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "newFeature": true,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "useMultiFrameRuntime": false,
+    "useApiHook": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "bundle": false,
+    "useIsolateContext": true,
+    "useCompilerModule": true,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true
+  },
+  "appid": "wxa0e787dc814d8b87",
+  "projectname": "rollDice",
+  "libVersion": "2.14.1",
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "id": -1,
+          "name": "db guide",
+          "pathName": "pages/databaseGuide/databaseGuide"
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file