AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【易售小程序项目】小程序私聊页面完善（带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化）【后端基于若依管理系统开发】

2023-10-13 80
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【易售小程序项目】小程序私聊页面完善（带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化）【后端基于若依管理系统开发】

说明

之前已经在【UniApp开发小程序】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】这篇文章中介绍了私聊页面的实现，这篇文章主要针对一些细节进行完善

仿微信带尾巴聊天气泡组件

效果展示

组件整体代码

<template>
  <view class="bubble" :class="tailDirection" :style="{'--tail-color':backgroundColor}">
    <text class="content" :style="{'background-color': backgroundColor,'color':fontColor}">{{text}}</text>
  </view>
</template>
<script>
  export default {
    props: {
      // 气泡的尾巴朝向 left:左 right:右
      tailDirection: {
        type: String,
        default: 'left'
      },
      // 气泡的背景颜色
      backgroundColor: {
        type: String,
        default: '#ffffff'
      },
      // 气泡的字体颜色
      fontColor: {
        type: String,
        default: '#000000'
      },
      // 气泡里面显示的文字
      text: {
        type: String,
        default: ''
      }
    },
    data: {
      contentId: 0,
      contentStyle: {}
    },
  }
</script>
<style lang="scss">
  .bubble {
    display: inline-flex;
    position: relative;
    align-items: center;
    .content {
      // 设置气泡的内间距，让气泡边缘距离文字有一定的距离
      padding: 10px 10px;
      // 设置气泡的边框半径,使边框有弧度
      border-radius: 8px;
      font-family: sans-serif;
      // 解决英文字符串、数字不换行的问题
      word-break: break-all;
      word-wrap: break-word;
    }
  }
  .left {
    margin-left: 5px;
  }
  .right {
    margin-right: 5px;
  }
  .left:before {
    position: absolute;
    content: "\00a0";
    width: 0px;
    height: 0px;
    border-width: 5px 10px 5px 0;
    border-style: solid;
    border-color: transparent var(--tail-color) transparent transparent;
    top: 10px;
    left: -10px;
  }
  .right:before {
    position: absolute;
    content: "\00a0";
    // display: inline-block;
    width: 0px;
    height: 0px;
    border-width: 5px 0px 5px 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--tail-color);
    top: 10px;
    right: -10px;
  }
</style>

气泡主体

气泡主体主要使用一个text标签来存储文字内容，并设置背景颜色、边框半径、内间距、单词和数字分解

气泡尾巴

【伪元素（气泡尾巴）的css介绍】

.left:before 和 .right:before 两个伪元素主要用来给气泡添加尾巴，一个向左、一个向右

  • :before 使用该伪元素可以用来向被选元素的内容前插入一个虚拟元素，用于显示一些额外的内容或进行样式修饰，比如添加图标、箭头、编号……
  • position: absolute; 将伪元素的位置设置为绝对定位，以便于相对于其父元素位置进行位置设置
  • content: "\00a0"; 添加一个不间断空格，作为伪元素的填充内容
  • width: 0px; height: 0px; 将元素的宽度和高度设置为0
  • border-width: 5px 10px 5px 0; 设置边框宽度，按顺序分别为上边框、右边框、下边框和左边框，其中左边框为0，因此左边不需要边框
  • border-style: solid; 将边框样式设置为实线
  • border-color: transparent var(--tail-color) transparent transparent; 设置边框颜色
  • top: 10px; left: -10px; 设置伪元素相对于父元素的位置

【修改一】

先将view的宽高都设为0，然后给view设置较粗的边框，最终渲染的时候，边框与边框会相交出三角形。当每条边框都设置不同的颜色时，效果如下图所示

.left:before {
  position: absolute;
  content: "\00a0";
  width: 0px;
  height: 0px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: black var(--tail-color) blue yellow; 
  top: 10px;
  left: -30px;
}

【修改二】

要想只保留最右边的三角形，只需要将其他3个三角形都设置为透明即可

.left:before {
  position: absolute;
  content: "\00a0";
  width: 0px;
  height: 0px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent var(--tail-color) transparent transparent;
  top: 10px;
  left: -30px;
}

【修改三】

因为该三角形只由上边框、右边框、左边框相交即可得到，因此可以将左边框的宽度设置为0。border-width: 10px 10px 10px 0;分别设置上、右、下、左边框

.left:before {
  position: absolute;
  content: "\00a0";
  width: 0px;
  height: 0px;
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: transparent var(--tail-color) transparent transparent;
  top: 10px;
  left: -30px;
}

【修改四】

下面需要修改一下伪元素相对于父元素的位置，因为右边框的宽度是10px，通过left: -10px;让伪元素向左边偏移10px，这样尾巴刚好贴紧气泡

.left:before {
  position: absolute;
  content: "\00a0";
  width: 0px;
  height: 0px;
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: transparent var(--tail-color) transparent transparent;
  top: 10px;
  left: -10px;
}

【最终版】

最好修改一下上下边框的宽度，让尾巴瘦一点

.left:before {
  position: absolute;
  content: "\00a0";
  width: 0px;
  height: 0px;
  border-width: 5px 10px 5px 0;
  border-style: solid;
  border-color: transparent var(--tail-color) transparent transparent;
  top: 10px;
  left: -10px;
}

【尾巴颜色控制】

需要注意的是，尾巴的颜色也需要可以由开发者去定义，因此使用 var(--tail-color) 来控制伪元素从变量中获取颜色，并在下面的代码中对颜色进行赋值

<view class="bubble" :class="tailDirection" :style="{'--tail-color':backgroundColor}">

使用

如下面的代码所示，开发者可以在使用组件的时候设置气泡的尾巴朝向、背景颜色、字体颜色和气泡文字

props: {
  // 气泡的尾巴朝向 left:左 right:右
  tailDirection: {
    type: String,
    default: 'left'
  },
  // 气泡的背景颜色
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  // 气泡的字体颜色
  fontColor: {
    type: String,
    default: '#000000'
  },
  // 气泡里面显示的文字
  text: {
    type: String,
    default: ''
  }
},

【引入组件并使用的代码】

<template>
  <view class="page">
    <bubble tailDirection="right" color="blue" text="Hello, I'm chat bubble!"  backgroundColor="#00ffff" fontColor="#ff0000"/>
  </view>
</template>
<script>
import Bubble from '@/components/bubble/bubble.vue'
export default {
  components: {
    Bubble
  }
}
</script>
<style>
.page {
  padding: 20px;
}
</style>

【效果】

image.png

私聊页面滑动到顶部获取历史数据

相较于上篇文章，除了替换了聊天气泡，聊天页面在加载历史数据的时候添加了“正在加载”字样，如下图所示

当获取历史消息时，将loadHistory设置为true，显示“正在加载”，同时让用户在等待此次加载结束之后才能重新加载下一批历史消息

<!-- 显示加载相关字样 -->
<u-loadmore v-if="loadHistory==true" status="loading" />

/**
* 滑到最顶端，分页加一，拉取更早的数据
 */
getHistoryChat() {
  // console.log("获取历史消息")
  if (this.messageList.length < this.total && this.loadHistory == false) {
    // 当目前的消息条数小于消息总量的时候，才去查历史消息
    this.page.pageNum++;
    this.loadHistory = true;
    this.scrollToView = '';
    this.listChat().then(() => {
      setTimeout(() => {
        this.loadHistory = false;
      }, 1000)
    })
  }
},

页面整体代码

【私聊页面】

<template>
  <view style="height:100vh;">
    <!-- @scrolltoupper：上滑到顶部执行事件，此处用来加载历史消息 -->
    <!-- scroll-with-animation="true" 设置滚动条位置的时候使用动画过渡，让动作更加自然 -->
    <scroll-view :scroll-into-view="scrollToView" scroll-y="true" class="messageListScrollView"
      :style="{height:scrollViewHeight}" @scrolltoupper="getHistoryChat()"
      :scroll-with-animation="!isFirstListChat" ref="chatScrollView">
      <!-- 显示加载相关字样 -->
      <u-loadmore v-if="loadHistory==true" status="loading" />
      <view v-for="(message,index) in messageList" :key="message.id" :id="`message`+message.id"
        style="width: 750rpx;min-height: 60px;">
        <view style="height: 10px;"></view>
        <view v-if="message.type==0" class="messageItemLeft">
          <view style="width: 8px;"></view>
          <u--image :showLoading="true" :src="you.avatar" width="50px" height="50px" radius="3"></u--image>
          <view style="width: 7px;"></view>
          <view class="messageBubble">
            <bubble tailDirection="left" :text="message.content" backgroundColor="#ffffff" />
          </view>
        </view>
        <view v-if="message.type==1" class="messageItemRight">
          <view class="messageBubble">
            <bubble tailDirection="right" :text="message.content" backgroundColor="#95EC69" />
          </view>
          <view style="width: 7px;"></view>
          <u--image :showLoading="true" :src="me.avatar" width="50px" height="50px" radius="3"></u--image>
          <view style="width: 8px;"></view>
        </view>
      </view>
    </scroll-view>
    <view class="messageSend">
      <view class="messageInput">
        <u--textarea v-model="messageInput" placeholder="请输入消息内容" autoHeight>
        </u--textarea>
      </view>
      <view style="width:5px"></view>
      <view class="commmitButton" @click="send()">发 送</view>
    </view>
  </view>
</template>
<script>
  import {
    getUserProfileVo
  } from "@/api/user";
  import {
    listChat
  } from "@/api/market/chat.js";
  import Bubble from '@/components/bubble/bubble.vue'
  let socket;
  export default {
    components: {
      Bubble
    },
    data() {
      return {
        webSocketUrl: "",
        socket: null,
        messageInput: '',
        // 我自己的信息
        me: {},
        // 对方信息
        you: {},
        scrollViewHeight: undefined,
        messageList: [],
        // 底部滑动到哪里
        scrollToView: '',
        page: {
          pageNum: 1,
          pageSize: 20
        },
        isFirstListChat: true,
        // 是否正在加载更多历史数据
        loadHistory: false,
        // 消息总条数
        total: 0,
        // 数据加载状态
        loadmoreStatus: "loadmore",
      }
    },
    created() {
      this.me = uni.getStorageSync("curUser");
    },
    beforeDestroy() {
      console.log("执行销毁方法");
      this.endChat();
    },
    onLoad(e) {
      // 设置初始高度
      this.scrollViewHeight = `calc(100vh - 20px - 44px)`;
      this.you = JSON.parse(decodeURIComponent(e.you));
      uni.setNavigationBarTitle({
        title: this.you.nickname,
      })
      this.startChat();
      this.listChat();
      this.receiveMessage();
    },
    onReady() {
      // 监听键盘高度变化，以便设置输入框的高度
      uni.onKeyboardHeightChange(res => {
        let keyBoardHeight = res.height;
        console.log("keyBoardHeight:" + keyBoardHeight);
        this.scrollViewHeight = `calc(100vh - 20px - 44px - ${keyBoardHeight}px)`;
        this.scrollToView = '';
        setTimeout(() => {
          this.scrollToView = 'message' + this.messageList[this
            .messageList.length - 1].id;
        }, 150)
      })
    },
    methods: {
      /**
       * 发送消息
       */
      send() {
        if (this.messageInput != '') {
          let message = {
            from: this.me.userName,
            to: this.you.username,
            text: this.messageInput
          }
          // console.log("this.socket.send:" + this.$socket)
          // 将组装好的json发送给服务端，由服务端进行转发
          this.$socket.send({
            data: JSON.stringify(message)
          });
          this.total++;
          let newMessage = {
            // code: this.messageList.length,
            type: 1,
            content: this.messageInput
          };
          this.messageList.push(newMessage);
          this.messageInput = '';
          this.toBottom();
        }
      },
      /**
       * 开始聊天
       */
      startChat() {
        let message = {
          from: this.me.userName,
          to: this.you.username,
          text: "",
          status: "start"
        }
        // 告诉服务端要开始聊天了
        this.$socket.send({
          data: JSON.stringify(message)
        });
      },
      /**
       * 结束聊天
       */
      endChat() {
        let message = {
          from: this.me.userName,
          to: this.you.username,
          text: "",
          status: "end"
        }
        // 告诉服务端要结束聊天了
        this.$socket.send({
          data: JSON.stringify(message)
        });
      },
      /**
       * 接收消息
       */
      receiveMessage() {
        this.$socket.onMessage((response) => {
          // console.log("接收消息：" + response.data);
          let message = JSON.parse(response.data);
          let newMessage = {
            // code: this.messageList.length,
            type: 0,
            content: message.text
          };
          this.messageList.push(newMessage);
          this.total++;
          // 让scroll-view自动滚动到最新的数据那里
          // this.$nextTick(() => {
          //  // 滑动到聊天区域最底部
          //  this.scrollToView = 'message' + this.messageList[this
          //    .messageList.length - 1].id;
          // });
          this.toBottom();
        })
      },
      /**
       * 查询对方和自己最近的聊天数据
       */
      listChat() {
        return new Promise((resolve, reject) => {
          listChat(this.you.username, this.page).then(res => {
            for (var i = 0; i < res.rows.length; i++) {
              this.total = res.total;
              if (res.rows[i].fromWho == this.me.userName) {
                res.rows[i].type = 1;
              } else {
                res.rows[i].type = 0;
              }
              // 将消息放到数组的首位
              this.messageList.unshift(res.rows[i]);
            }
            if (this.isFirstListChat == true) {
              // this.$nextTick(function() {
              //  // 滑动到聊天区域最底部
              //  this.scrollToView = 'message' + this.messageList[this
              //    .messageList.length - 1].id;
              // })
              this.isFirstListChat = false;
              this.toBottom();
            }
            resolve();
          })
        })
      },
      /**
       * 滑到最顶端，分页加一，拉取更早的数据
       */
      getHistoryChat() {
        // console.log("获取历史消息")
        if (this.messageList.length < this.total && this.loadHistory == false) {
          // 当目前的消息条数小于消息总量的时候，才去查历史消息
          this.page.pageNum++;
          this.loadHistory = true;
          this.scrollToView = '';
          this.listChat().then(() => {
            setTimeout(() => {
              this.loadHistory = false;
            }, 1000)
          })
        }
      },
      /**
       * 滑动到聊天区域最底部
       */
      toBottom() {
        // 让scroll-view自动滚动到最新的数据那里
        this.scrollToView = '';
        setTimeout(() => {
          // 滑动到聊天区域最底部
          this.scrollToView = 'message' + this.messageList[this
            .messageList.length - 1].id;
        }, 150)
      }
    }
  }
</script>
<style lang="scss">
  .messageListScrollView {
    background: #F5F5F5;
    // overflow: auto;
    .messageBubble {
      max-width: calc(750rpx - 10px - 50px - 15px - 10px - 50px - 15px);
      padding: 0px 0px 10px 0px;
    }
    .messageItemLeft {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .messageItemRight {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
    }
  }
  .messageSend {
    display: flex;
    background: #ffffff;
    padding-top: 5px;
    padding-bottom: 15px;
    .messageInput {
      border: 1px #EBEDF0 solid;
      border-radius: 5px;
      width: calc(750rpx - 65px);
      margin-left: 5px;
    }
    .commmitButton {
      height: 38px;
      border-radius: 5px;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background: #3C9CFF;
    }
  }
</style>


文章标签：
小程序
开发者
前端开发
存储
关键词：
后端开发
小程序后端
小程序完善
优化后端
小程序后端开发
HelloDam
目录
相关文章
muxiaoxi
|
1月前
|
存储 缓存 负载均衡
后端开发中的性能优化策略
本文将探讨几种常见的后端性能优化策略，包括代码层面的优化、数据库查询优化、缓存机制的应用以及负载均衡的实现。通过这些方法，开发者可以显著提升系统的响应速度和处理能力，从而提供更好的用户体验。
muxiaoxi
72 4
潜意识Java
|
9天前
|
前端开发 Java 数据库连接
Java后端开发-使用springboot进行Mybatis连接数据库步骤
本文介绍了使用Java和IDEA进行数据库操作的详细步骤，涵盖从数据库准备到测试类编写及运行的全过程。主要内容包括： 1. **数据库准备**：创建数据库和表。 2. **查询数据库**：验证数据库是否可用。 3. **IDEA代码配置**：构建实体类并配置数据库连接。 4. **测试类编写**：编写并运行测试类以确保一切正常。
潜意识Java
26 2
小暖的遇见V丨ttqq_375425429
|
29天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制，PHP实现的圈子框架设计及代码编写，以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容，确保平台的安全性、性能和功能完整性。通过详细指导，帮助开发者快速搭建稳定可靠的圈子社交平台。
小暖的遇见V丨ttqq_375425429
225 18
多客潇潇
|
1月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
125 3
ZOMI酱
|
1月前
|
机器学习/深度学习 人工智能 算法
【AI系统】AI 编译器后端优化
AI编译器采用多层架构，首先通过前端优化将不同框架的模型转化为统一的Graph IR并进行计算图级别的优化，如图算融合、内存优化等。接着，通过后端优化，将优化后的计算图转换为TensorIR，针对单个算子进行具体实现优化，包括循环优化、算子融合等，以适应不同的硬件架构，最终生成高效执行的机器代码。后端优化是提升算子性能的关键步骤，涉及复杂的优化策略和技术。
ZOMI酱
65 3
天下无贼001
|
1月前
|
存储 前端开发 Java
深入理解后端开发：从基础到高级
本文将带你走进后端开发的神秘世界，从基础概念到高级应用，一步步揭示后端开发的全貌。我们将通过代码示例，让你更好地理解和掌握后端开发的核心技能。无论你是初学者还是有一定经验的开发者，这篇文章都将为你提供有价值的信息和启示。
天下无贼001
98 6
游客7v53mftipku2u
|
1月前
|
运维 监控 Java
后端开发中的微服务架构实践与挑战####
在数字化转型加速的今天，微服务架构凭借其高度的灵活性、可扩展性和可维护性，成为众多企业后端系统构建的首选方案。本文深入探讨了微服务架构的核心概念、实施步骤、关键技术考量以及面临的主要挑战，旨在为开发者提供一份实用的实践指南。通过案例分析，揭示微服务在实际项目中的应用效果，并针对常见问题提出解决策略，帮助读者更好地理解和应对微服务架构带来的复杂性与机遇。 ####
游客7v53mftipku2u
52 4
xibeijing
|
1月前
|
消息中间件 运维 安全
后端开发中的微服务架构实践与挑战####
在数字化转型的浪潮中，微服务架构凭借其高度的灵活性和可扩展性，成为众多企业重构后端系统的首选方案。本文将深入探讨微服务的核心概念、设计原则、关键技术选型及在实际项目实施过程中面临的挑战与解决方案，旨在为开发者提供一套实用的微服务架构落地指南。我们将从理论框架出发，逐步深入至技术细节，最终通过案例分析，揭示如何在复杂业务场景下有效应用微服务，提升系统的整体性能与稳定性。 ####
xibeijing
54 1
liuliunaina
|
1月前
|
消息中间件 运维 API
后端开发中的微服务架构实践####
本文深入探讨了微服务架构在后端开发中的应用，从其定义、优势到实际案例分析，全面解析了如何有效实施微服务以提升系统的可维护性、扩展性和灵活性。不同于传统摘要的概述性质，本摘要旨在激发读者对微服务架构深度探索的兴趣，通过提出问题而非直接给出答案的方式，引导读者深入
liuliunaina
53 1
游客kwe6k52lwpmug
|
1月前
|
负载均衡 监控 API
后端开发中的微服务架构实践与挑战
本文深入探讨了微服务架构在后端开发中的应用，分析了其优势和面临的挑战，并通过案例分析提出了相应的解决策略。微服务架构以其高度的可扩展性和灵活性，成为现代软件开发的重要趋势。然而，它同时也带来了服务间通信、数据一致性等问题。通过实际案例的剖析，本文旨在为开发者提供有效的微服务实施指导，以优化系统性能和用户体验。
游客kwe6k52lwpmug
34 2

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    网安入门之MySQL后端基础
  • 3
    网安入门之PHP后端基础
  • 4
    记录一次后端接口抖动的排查过程
  • 5
    Java后端开发-使用springboot进行Mybatis连接数据库步骤
  • 6
    圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
  • 7
    电竞陪玩系统架构优化设计，陪玩app如何提升系统稳定性，陪玩小程序平台的测试与监控
  • 8
    圈子系统兴趣讨论群组的创建，社群运营的重要性及策略制定，同城交友app、小程序方式的创新
  • 9
    超详细攻略！uniapp陪玩系统，打包陪玩小程序、H5需要注意什么？
  • 10
    跑腿小程序系统源码
  • 1
    uniapp跨平台框架，陪玩系统并发性能测试，小程序源码搭建开发解析
    32
  • 2
    打造无缝社交体验：多平台适配，开启线上线下陪玩系统小程序社交新时代
    37
  • 3
    基于Uniapp+php校园小程序，校园圈子论坛系统功能，校园跑腿二手交流功能设计
    49
  • 4
    微信小程序 app.json 配置文件解析与应用
    59
  • 5
    thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
    12
  • 6
    原生微信小程序笔记完整总结
    26
  • 7
    微信小程序默认的文字内容在左上角怎么办？带你0基础快速了解skyline渲染模式。
    34
  • 8
    跑腿小程序系统源码
    58
  • 9
    TP6+Uni-app框架下，圈子系统小程序的快速上线开发步骤
    39
  • 10
    圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里？
    47

    • 相关课程

    更多
  • IoT小程序框架课程
  • 软件供应商进阶管理实操
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件用户使用服务及供应商进阶管理
  • 网站性能前端监控课程
  • 软件供应商发布服务实操

    • 相关电子书

    更多
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用
  • 钉钉小程序——为工作方式插上翅膀

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 1分钟SAE部署PHP商城小程序
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 使用交互方式创建数据表
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    阿里云oss简介和如何对接使用