【小程序 - 大智慧】Expareser 组件渲染框架

已于 2024-09-26 10:33:31 修改
阅读量879 收藏 17
点赞数 29
分类专栏： 微信小程序入门与实战 前端架构师入门之道 文章标签： 小程序 前端 javascript 图形渲染 微信小程序 前端框架
于 2024-09-26 10:31:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53673551/article/details/142498258
版权

5.png

目录

问题思考

首先，给大家抛出去几个问题：

  1. 前端框架 Vue React 都有自己的组件库，但是并不兼容，那么 不依赖框架能 自定义组件 吗？
  2. 微信小程序开发的时候都会自定义组件是吧，那么调试控制台出现的 shadow-root 是什么，有注意吗？
  3. 微信小程序编写 wxml 的时候，为什么和 html 语法不一致，多出来 view text 这些标签，里面究竟是如何实现的，彼此有什么关联？

课程目标

通过本节课程的学习，希望大家掌握如下的目标：

  1. 弄懂上述问题背后的执行逻辑
  2. 能够利用原生 Web Component 自定义一个简易的组件

Web Component

使用自定义元素 - Web API | MDN

Web Component直译过来就是 web 组件的意思，就是说明离开了前端框架的帮助，我们依然可以用原生组件来进行开发复用。

类型说明

如同官网所说，继承特定元素类得到的组件是 自定义内置元素组件（可以得到特定类型的属性和方法），继承元素基类得到的组件是 独立自定义元素，本质上两种没什么区别，接下来我们重点就放在第二个上面。

定义组件

<button is="my-button-one">内置按钮</button>
<my-button-two></my-button-two>


// 01 定义一个内置元素的按钮
class MyButtonOne extends HTMLButtonElement {
  constructor() {
    self = super();
  }

  // 元素添加到文档调用
  connectedCallback() {
    // 1.创建一个 div
    const div = document.createElement("div");

    // 2.设置 div 的样式
    div.style.width = "100px";
    div.style.height = "50px";
    div.style.textAlign = "center";
    div.style.lineHeight = "50px";
    div.style.cursor = "pointer";
    self.style.marginBottom = "20px";

    // 3.设置 div 的内容
    div.innerHTML = "自定义按钮";

    // 4.将 div 添加到页面
    self.appendChild(div);
  }
}

// 02 定义一个自定义的按钮
class MyButtonTwo extends HTMLElement {
  constructor() {
    // 先调用父类构造器，实例化 HTMLElement ，这样才能有 html 元素的基本属性
    super();
  }

  // 元素添加到文档调用
  connectedCallback() {
    console.log("自定义元素添加到页面", this);

    // 1.创建一个 div
    const div = document.createElement("div");

    // 2.设置 div 的样式
    div.style.width = "100px";
    div.style.height = "50px";
    div.style.backgroundColor = "red";
    div.style.color = "white";
    div.style.textAlign = "center";
    div.style.lineHeight = "50px";
    div.style.cursor = "pointer";

    // 3.设置 div 的内容
    div.innerHTML = "自定义按钮";

    // 4.将 div 添加到页面
    this.appendChild(div);
  }

  // 元素从文档中移除时调用
  disconnectedCallback() {
    console.log("自定义元素从页面移除");
  }

  // 元素被移动到新文档时调用
  adoptedCallback() {
    console.log("自定义元素被移动到新文档");
  }

  // 监听属性变化
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}`);
  }
}

// 组件注册
customElements.define("my-button-one", MyButtonOne, { extends: "button" });
customElements.define("my-button-two", MyButtonTwo);

// 监听组件状态
customElements.whenDefined("my-button-two").then(() => {
  console.log("my-button-two 组件已定义");
});

自定义组件的命名规则是有限制的：

  • 自定义元素的名称，必须包含短横线（-）。它可以确保html解析器能够区分常规元素和自定义元素，还能确保html标记的兼容性。
  • 自定义元素只能一次定义一个，一旦定义无法撤回。
  • 自定义元素不能单标记封闭。比如 <custom-component />，必须写一对开闭标记。比如 <custom-component></custom-component>。

上面两个就是最基本的自定义组件，但是这个也没有样式 class 属性传值 事件方法都没有，下面我们一步步加上。

属性添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100px;
        margin: 200px auto;
        background-color: #f5f5f5;
      }

      .my-button-two {
        width: 180px;
        height: 50px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    </style>
    <my-button-two color="pink" text="Custom Component" @click="clickButton()"></my-button-two>
    <title>02_属性添加</title>
  </head>
  <body>
    <script>
      // 自定义方法
      const clickButton = () => {
        alert("点击了自定义按钮");
      };

      class MyButtonTwo extends HTMLElement {
        // 监控属性变化
        static observedAttributes = ["color", "text", "@click"];

        constructor() {
          // 先调用父类构造器，实例化 HTMLElement ，这样才能有 html 元素的基本属性
          super();
        }

        // 元素添加到文档调用
        connectedCallback() {
          // 1.创建一个 div
          const div = document.createElement("div");

          // 2.设置 div 的样式
          div.className = "my-button-two";

          // 3.设置 div 的内容
          const bgColor = this.getAttribute("color");
          const textValue = this.getAttribute("text");
          const clickValue = this.getAttribute("@click");

          // 需要在同一个 js 执行环境内部执行
          div.addEventListener("click", () => {
            eval(clickValue);
          });

          div.style.backgroundColor = bgColor;
          div.innerHTML = textValue;

          // 4.将 div 添加到页面
          this.appendChild(div);
        }

        // 元素从文档中移除时调用
        disconnectedCallback() {
          console.log("自定义元素从页面移除");
        }

        // 元素被移动到新文档时调用
        adoptedCallback() {
          console.log("自定义元素被移动到新文档");
        }

        // 监听属性变化
        attributeChangedCallback(name, oldValue, newValue) {
          console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}`);
        }
      }

      customElements.define("my-button-two", MyButtonTwo);

      // 监听组件状态
      customElements.whenDefined("my-button-two").then(() => {
        console.log("my-button-two 组件已定义");
      });
    </script>
  </body>
</html>

对着调试控制台我们可以发现，当前 html 写的样式可以影响到组件内部，这并不符合我们之前说的组件和外部彼此 属性隔离 的特点，这就需要了解到下一个概念了。

Shadow DOM

使用影子 DOM - Web API | MDN

影子 DOM（Shadow DOM）允许你将一个 DOM 树附加到一个元素上，并且使该树的内部对于在页面中运行的 JavaScript 和 CSS 是隐藏的。

在这里插入图片描述

有一些 影子 DOM 术语 需要注意：

  • 影子宿主（Shadow host）：影子 DOM 附加到的常规 DOM 节点。
  • 影子树（Shadow tree）：影子 DOM 内部的 DOM 树。
  • 影子边界（Shadow boundary）：影子 DOM 终止，常规 DOM 开始的地方。
  • 影子根（Shadow root）：影子树的根节点。

这里的 影子宿主（Shadow host） 可以选取普通的 div 标签，但是由于我们是自定义元素，这里的 挂载节点 就是 自定义组件 Web Component 了，接下来我们举一个例子：

const shadow = this.attachShadow({ mode: "open" });


// 这里的 this 就是标识 自定义组件 DOM 元素
// mode 分为 open closed 表示能否通过 dom.shadowRoot 获取
// 不能获取的话，只能在内部通过 shadow 访问了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100px;
        margin: 200px auto;
        background-color: #f5f5f5;
      }

      .my-button-two {
        width: 180px;
        height: 50px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    </style>
    <my-button-two color="pink" text="Custom Component" @click="clickButton()"></my-button-two>
    <title>03_shadow dom</title>
  </head>
  <body>
    <script>
      // 自定义方法
      const clickButton = () => {
        alert("点击了自定义按钮");
      };

      class MyButtonTwo extends HTMLElement {
        // 监控属性变化
        static observedAttributes = ["color", "text", "@click"];

        constructor() {
          // 先调用父类构造器，实例化 HTMLElement ，这样才能有 html 元素的基本属性
          super();
        }

        // 元素添加到文档调用
        connectedCallback() {
          // 隔离 DOM
          const shadow = this.attachShadow({ mode: "open" });

          // 1.创建一个 div
          const div = document.createElement("div");

          // 2.设置 div 的样式
          div.className = "my-button-two";

          // 3.设置 div 的内容
          const bgColor = this.getAttribute("color");
          const textValue = this.getAttribute("text");
          const clickValue = this.getAttribute("@click");

          // 需要在同一个 js 执行环境内部执行
          div.addEventListener("click", () => {
            eval(clickValue);
          });

          div.style.backgroundColor = bgColor;
          div.innerHTML = textValue;

          // 4.将 div 添加到页面
          shadow.appendChild(div);
        }

        // 元素从文档中移除时调用
        disconnectedCallback() {
          console.log("自定义元素从页面移除");
        }

        // 元素被移动到新文档时调用
        adoptedCallback() {
          console.log("自定义元素被移动到新文档");
        }

        // 监听属性变化
        attributeChangedCallback(name, oldValue, newValue) {
          console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}`);
        }
      }

      customElements.define("my-button-two", MyButtonTwo);

      // 监听组件状态
      customElements.whenDefined("my-button-two").then(() => {
        console.log("my-button-two 组件已定义");
      });
    </script>
  </body>
</html>

这里我们可以看到 文档的样式已经无法影响我们的自定义组件了，这是因为被 shadow 阻隔了，接下来就可以继续完善这段逻辑了。

Template and Slot

使用模板和插槽 - Web API | MDN

前端组件开发中有两套我们熟悉的 Template（模板）和 Slot（插槽），接下来就利用这两个功能继续完善一下我们的代码逻辑。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100px;
        margin: 200px auto;
        background-color: #f5f5f5;
      }

      .my-button-two {
        width: 180px;
        height: 50px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
    </style>
    <template id="button-template">
      <style>
        .my-button-two {
          width: 180px;
          height: 50px;
          background-color: red;
          color: white;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
        }
      </style>
      <div class="my-button-two">
        <slot name="text"></slot>
      </div>
    </template>
    <my-button-two id="my-button-two" color="pink" @click="clickButton()"
      ><span slot="text">Custom Component</span></my-button-two
    >
    <title>04_Tempalte and Slot</title>
  </head>
  <body>
    <script>
      // 自定义方法
      const clickButton = () => {
        alert("点击了自定义按钮");
      };

      class MyButtonTwo extends HTMLElement {
        // 监控属性变化
        static observedAttributes = ["color", "text", "@click"];

        constructor() {
          // 先调用父类构造器，实例化 HTMLElement ，这样才能有 html 元素的基本属性
          super();
        }

        // 元素添加到文档调用
        connectedCallback() {
          // 隔离 DOM
          const shadow = this.attachShadow({ mode: "closed" });

          // 1.获取模板
          const template = document.querySelector("#button-template");

          // 2.克隆模板
          const content = template.content.cloneNode(true);

          // 3.显示文本
          const clickValue = this.getAttribute("@click");

          // 4.执行函数
          const clickEvent = content.querySelector(".my-button-two");
          clickEvent.addEventListener("click", () => {
            eval(clickValue);
          });

          // 5.将 template 添加到页面
          shadow.appendChild(content);
        }

        // 元素从文档中移除时调用
        disconnectedCallback() {
          console.log("自定义元素从页面移除");
        }

        // 元素被移动到新文档时调用
        adoptedCallback() {
          console.log("自定义元素被移动到新文档");
        }

        // 监听属性变化
        attributeChangedCallback(name, oldValue, newValue) {
          console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}`);
        }
      }

      customElements.define("my-button-two", MyButtonTwo);

      // 监听组件状态
      customElements.whenDefined("my-button-two").then(() => {
        console.log("my-button-two 组件已定义");
      });
    </script>
  </body>
</html>

艺龙酒店科技官网

举例 video 标签就是利用这套机制封装的…

Exparser 框架原理

Exparser 是微信小程序的组件组织框架，内置在小程序基础库中，为小程序提供各种各样的组件支撑。内置组件和自定义组件都有 Exparser 组织管理。

Exparser 的组件模型与 WebComponents 标准中的 Shadow DOM 高度相似，Exparser 会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的 Shadow DOM 实现。Exparser 的主要特点包括以下几点：

  • 基于 Shadow DOM 模型：模型上与 WebComponents 的 Shadow DOM 高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他 API 以支持小程序组件编程。
  • 可在纯 JS 环境中运行：这意味着逻辑层也具有一定的组件树组织能力。
  • 高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。

自定义组件

上图是小程序利用 shadow dom 实现 样式和JS 逻辑隔离的组件，这只是第一层，里面的 view text 也是由 Exparser 从普通 div span 封装得来的，接下来让我们深入了解下：

内置组件

接下来带大家一步步过一遍微信小程序内置组件是如何渲染的

// 1.在微信开发工具找到解析命令 wcc
// wcc 是将 wxml 解析为 js 文件，然后逻辑线程注入 webview 执行的
微信web开发者工具\code\package.nw\node_modules\wcc-exec

// 2.将命令文件移动到文件目录下，开始执行解析
./wcc -js index.wxml >> dom.js

  • 可以看到本质上就是一个封装好的 $gwx 函数，它的作用是生成微信自定义的组件和虚拟 dom 节点（ diff 算法），用来给后面的 Exparser 生成真实的 DOM 节点
  • 那这个函数是在哪里调用的呢，我们继续向下看
// 1. 调试控制台打开当前页面的 webview
document.getElementsByTagName('webview')
document.getElementsByTagName('webview')[0].showDevTools(true, null)

// 2. 可以发现编译后的 wxml 会利用 js 脚本以一定格式插入到页面中执行
var decodeName = decodeURI("./pages/command_component/index.wxml")
var generateFunc = $gwx(decodeName)

generateFunc()

// 3.传入数据
generateFunc({logs:[1,2,3]})



<view wx:for="{{ logs }}" wx:key="index">
  <text>{{ item }}</text>
</view>

可以看到如上图所示的虚拟节点数组，接下来我们详细剖析一下

  1. $gwx(decodeName) 不直接返回 dom 树，而是返回一个函数的原因是因为需要动态注入和相关配置，函数能够很好的把控时机
  2. 利用动态传参我们发现，包含循环数组和 key 的会带有 virtual 标识，用来后面的 DIff 算法比较
  3. document.dispatchEvent 触发自定义事件 将 generateFunc 当作参数传递给底层渲染库

  1. 可以看得到无论是 view 还是 text 底层都是通过 div span 的自定义组件构成的
  2. 这一切来源于 Exparser 框架，在 渲染层 会内置一系列方法，大致和上面自定义 web component 一致，进行对组件的定义，注册后将 js 脚本引入页面，那么当前页面就可用了
  3. 接下来带大家进行源码的拆解

下周计划

  1. 继续深入小程序原理（收益不高）
  2. 扩展前端其他的技术方向（感兴趣建议）
    1. 前端组件库实现拆解
    2. 前端调试能力提升
    3. 前端工程化能够了解
知心宝贝
关注
专栏目录
微信小程序--小程序框架
ChatYU的博客
10-16 3695
​ 整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。 ​
【微信小程序---子组件传值给父组件】
m0_56349322的博客
02-22 4600
点击原创或者分类虽然样式如首页一样变化，但是其父组件的最终isActive的值并未发生改变，但是样式发生改变是因为拿取的是Component>里面的properties中的tabs，你点击下去的时候一样拿取tabs数组，所以不会报错。因此子组件必须通过方法进行修改父组件中的isActive的值，方法如下： components/Tabs/Tabs.js 点击事件触发父组件中自定义事件 同时传递数据给 父组件 this.triggerEvent("父组件自定义事件的名称"，要传递的参数)...
微信小程序自定义组件---loading组件
qq_41756580的博客
01-03 4753
在开发微信小程序的过程中，经常会使用到loading动画，微信自带的wx.showLoading()与wx.showToast()在使用上非常的方便，但是这个接口也是一个坑，在安卓真机上运行，经常会出现wx.hideLoading()无效的情况，结果就导致loading动画一直存在，看到微信官方说的是不在onShow和onLoad中调用，还有就是加个延时setTimeout，然而这两个我都试过了，...
微信小程序--条件渲染&列表渲染
weixin_44215175的博客
01-23 4219
条件渲染： wx:if 表示判断单个组件 block wx:if 表示判断块，也即判断多个组件 wx:if 在微信小程序框架里，使用wx:if = "{{condition}}"来判断是否需要渲染该代码块 <view wx:if= "{{condition}}"> true </view> //如果condition为真，则显示 true ，否则不显示 使用wx...
黑马程序员-微信小程序-原生框架——购物平台-分类页面
weixin_48884617的博客
05-16 5893
黑马程序员-微信小程序-原生框架——购物平台-分类页面
黑马程序员-微信小程序-原生框架——购物平台-首页
weixin_48884617的博客
05-10 1861
黑马程序员-微信小程序-原生框架——购物平台-首页
微信小程序---常用的指令/组件
python_web全栈
02-18 4867
1. 组件(标签) 1.1 wx:for指令 1.1.1 html 1. 内置了一个index/item，前者索引，后者元素 <view wx:for="{{ data_list }}">{{ index }} {{ item }} index索引 item元素 </view> 2. 修改 使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名： <view wx:for="{{array}}" w
【愚公系列】《微信小程序开发解析》012-小程序自定义组件
热门推荐
时光隧道
07-15 1万+
随着移动互联网的快速发展，小程序作为一种轻量级的应用形式，受到了越来越多开发者和企业的青睐。小程序不仅能够提供便捷的用户体验，还能有效降低开发和维护成本。为了提升小程序的复用性和可维护性，自定义组件成为了开发中不可或缺的一部分。在这篇文章中，我们将深入探讨小程序自定义组件的概念、优势以及实际应用。我们将介绍如何创建、使用和管理自定义组件，帮助开发者掌握其核心思想和实践技巧。通过实例讲解，您将能够更好地理解自定义组件在小程序开发中的重要性，并在实际项目中灵活运用。
【微信小程序】text和rich-text组件的基本使用
hacker707的博客
10-02 5171
微信小程序之text和rich-text组件的基本使用，持续更新【微信小程序】系列专栏
微信小程序 — 长列表组件 recycle-view 详细教学
热爱思考、活力满满、开朗爱笑的年轻人
09-22 1万+
微信小程序 — 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view长列表组件 recycle-view 使用细节问题一、如何增加下拉刷新功能？问题二、长列表中如何更新以及重置数据？ 写在前面 列表太长了，原生的 scroll-view 就遭不住了； 当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点： 列表数据很大，首次 setData 的时候耗时高 渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树
微信小程序---列表嵌套渲染实例
Huuuuuuu
08-23 3296
官方文档关于列表渲染的说明。 列表渲染是动态写页面的重要方法，我们从服务器拿到数据后可以根据数据结构对当前页面进行动态渲染，使页面更加灵活，维护更新起来也更加方便快捷。 微信小程序中数组的定义 array[ [], [], [], [], [{a:’asda’}],[],b:’asdas’,{c:’qwdq’}]。 如何提取a、b、c的值？ this.data.array[4][0]...
微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！
王佳斌
02-21 2620
微信小程序 子组件id 怎么是变量，微信小程序中 selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么 selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序 父组件循环使
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
2401_84413903的博客
09-23 496
在这个充满竞争和压力的时代，我们更需要一份便捷和舒适来放松自己。而“同城便捷生活场馆门店一键直达预约系统”正是这样一份礼物，它让我们的生活变得更加简单、更加美好。快来体验吧，让我们一起享受这份便捷带来的幸福时光！✨。
基于SSM+小程序的原创音乐管理系统1（源码+sql脚本+视频导入教程+文档）
YMZN91的博客
09-20 470
基于SSM+小程序的原创音乐管理系统实现了管理员及用户。 1、管理员实现了首页、个人中心、用户管理、歌曲类型管理、歌曲信息管理、热门歌手管理、音乐资讯管理等 2、用户实现了注册、登录、歌曲信息、热门歌手、音乐资讯、我的等。
小程序开发设计-小程序的宿主环境：宿主环境简介⑥
qq_60872637的博客
09-21 963
本文详细介绍小程序的宿主环境：1.宿主环境简介 2.通信模型 3.运行机制
医院伤员小程序点餐———未来之窗行业应用跨平台架构
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
09-22 607
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与。的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量。拥抱开源与共享，见证科技进步奇迹，畅享人类幸福时光！
【含文档】基于Springboot+微信小程序 的高校社团管理小程序（含源码+数据库+lw）
最新发布
m0_59480939的博客
09-26 231
微信小程序首页是用户注册登录后进入的第一个界面，用户可通过小程序端首页进入对应的页面或者通过小程序最下面的那一行导航栏中的“首页、社团信息、社团活动、我的”，也可以点击“我的”进入我的页面，在我的页面可以对申请入社、参加活动、创建社团等进行详细操作。管理员登录到高校社团管理小程序可以查看首页、个人中心、用户管理、社团类型管理、社团信息管理、申请入社管理、活动类型管理、社团活动管理、参加活动管理、创建社团管理、社团公告管理、系统管理等功能进行详细操作。数据库版本: mysql5.7或8.0。
基于SSM+小程序的自习室选座与门禁管理系统（自习室1）（源码+sql脚本+视频导入教程+文档）
YMZN91的博客
09-22 580
1、管理员实现了首页、基础数据管理、论坛管理、公告信息管理、用户管理、座位管理等 2、用户实现了在论坛模块通过发帖与评论帖子的方式进行信息讨论，也能对账户进行在线充值，查看座位信息并预定需要的座位，管理座位预定的订单，查看公告等。
uniapp+renderJS+google map开发安卓版APP非小程序
renkai721的专栏
09-20 364
uniapp+renderJS+google map开发安卓版APP非小程序,google map小叉号不显示，google map自定义marker右上角的小叉号如何去掉,uniapp+google map不显示
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知心宝贝

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值