APICLOUD-VUE 开发框架

Apicloud + Vue3 + Vant4 前端，利用 Rsbuild 打包项目，是一个采用 Vue 数据绑定特性和 Apicloud 手机操控能力相结合的 APP 开发框架，此框架并非采用 Vue 的 SPA 单页面应用方式，而是遵从 Apicloud 的多页面原生渲染效率方式，Vue+Rsbuild 只是为了提供更佳的 ES2015+语法、模块分割、剪裁打包和数据绑定代码体验，弥补 Apicloud 本身无法应用在庞大工程协作的缺点。

使用 APICLOUD-VUE 可以极速开发出流畅的商用级别 APP，让你轻松应付各种开发需求

采用最新Rsbuild 构建，配合Yonbuilder实现极速开发、编译和维护，比上一代AVVW框架更快更轻量

案例展示

知法乎

---

广州电台花城 FM

---

俭道

---

易挖网

---

建老大

---

武文浓墨

---

收货地址助手

目录结构

• dist 编译代码，压缩后上传到 Apicloud 发布 App
• src 源代码，所有开发在此开始，除 pages 目录外，其他目录可随意增删
  • components Vue 公用组件
  • libs 公共库
  • pages Apicloud 使用 openWin 和 openFrame 打开的页面，vue 组件化，支持多级目录
• public 静态资源，如图片、字体等，会自动打包到 dist 目录下
• apicloud Rsbuild编译时的模板文件，不能随意修改，除非您知道自己在干什么
  • vue.global.js 未压缩vue库，用于开发环境
  • vue.runtime.global.prod.js 压缩vue库，用于生产环境
  • page.ejs 将pages下 vue 文件编译为 Apicloud 可用的模板
  • config.xml Apicloud配置文件
• .env APP 应用入口
• 其他省略

开始使用

下载框架

git clone 或者 直接下载 master 包到本地

使用 YonStudio IDE 开发

在YonBuilder 移动开发平台下载并安装开发工具，运行工具后选择打开 git clone 下来的文件夹，在终端处 cd 进入项目目录下安装依赖

npm i # 初始化安装npm模块

修改 APICLOUD 配置

打开./apicloud/config.xml文件，对应修改你在YonBuilder 移动开发平台的应用设置，设置说明和注册应用请参考官方文档

<?xml version="1.0" encoding="UTF-8"?>
<widget id="[应用的Widget ID]" version="[版本号]">
  ...
  <content src="http://192.168.3.107:3000/home.html"/> // 无需修改，Rsbuild会自动修改
  ...
</widget>

修改 APP 应用入口

打开.env文件，对应pages下应用启动首次打开的页面名称来修改，例如./src/pages/home.vue，则填写为home

APP_ENTRY=home

终端开启本地测试服

npm run dev # 开启本地测试服

特别注意：如果你在开发时增加了./src/pages/里的页面，那么需要先关闭 dev，重新运行才会编译新页面，因为多入口热加载并不会检测新页面

待本地测试服开启后，可以使用开发工具全量同步dist到手机 Apploader 进行调试

注意：只需同步一次，Apploader 第一次同步完成后，修改./src里的文件保存后手机自动同步和浏览器热加载一样！无需再手动同步一次！

特别注意：很多小伙伴发现开发时页面第一次加载比较慢，其实是因为手机从本地局域网电脑无线获取页面数据而导致的，但编译为发布包时，页面文件会一并打入 APP，所以开发时的页面加载速度可忽略！

编译测试

 npm run build # 编译

编译后，使用开发工具将dist全量同步到 Apploader 进行预览

编译上传

 npm run zip # 打包

打包后，项目根目录会生成widget.zip，将其上传 YonBuilder 的开发者平台的“代码”处即可进行发布，或者直接使用开发工具上传代码包

开发细节

如无需高级配置，那么只需关注 src 目录下文件，这里说明一下pages文件：

vue 支持

支持 vue3 选项式和组合式语法，也支持 vue 的 TS 语法，例子使用的是组合式语法和 JS 语法

由于框架并非采用 Vue 的 SPA，所以无法在多页面间使用 vue-router、vuex 之类的单页面应用的数据共享技术，而只能采用 Apicloud API 提供的相关页面跳转传递、数据共享技术

多级目录引用

Apicloud 引用打开多级目录页面时，以./src/pages作为根目录如下调用:

api.openFrameGroup({
  name: "homeTabs",
  frames: [
    {
      name: "tab1",
      url: "./tabs-tab1.html", // 引用多级目录文件格式: ./[subdir]-[...]-[filename].html
    },
    {
      name: "tab2",
      url: "./tabs-tab2.html",
      bounces: true,
    },
    {
      name: "tab3",
      url: "./tabs-tab3.html",
    },
  ],
});

首页入口

框架默认 home.html 为 App 首页入口，你也可以修改其他页面为入口，只需修改./.env

APP_ENTRY=main # 修改home为main, eg.

本地预览

默认不支持，推荐使用开发工具同步到 Apploader 进行预览

如果你希望可以在本地电脑预览某个页面，你可以手动修改./rsbuild.config.ts中的dev.writeToDisk为true

  dev: {
    lazyCompilation: false,
    // writeToDisk: (file) => {
    //   return /config.xml$/.test(file);
    // },
    writeToDisk: true,
    assetPrefix: "./",
  },

然后在开发工具中右击选择dist中某个 html 页面，选择实时预览进行调试，此模式下也支持同步到手机预览，但同步速度慢，而且不支持热加载调试，不推荐使用！

Apicloud API SDK

你可以在 vue 中直接使用 api.xxx

ES6 支持

支持所有 ESNext 语法，但要注意的是如果你修改apicloud下的page.ejs，请不要使用 ES6 语法，因为 Rsbuild 默认没有转义模板文件，EJS 只支持纯 HTML 语法

按需异步加载

手机 CPU 和内存有限，而且 Apicloud 采用 Hybird 技术，在性能上尤其低端安卓上肯定大打折扣，所以使用按需加载、异步加载和懒加载会更好地让 App 保持流畅原生感

TreeShaking

Rsbuild 已配置针对 Vant 组件的剪裁，具体请看官网，使用 Vant 组件时无需在<script setup>处importUI 组件，rsbuild 会自动按需引入并打包，但如果你import了，就不会 TreeShaking 组件，会增大 APP 体积，请留意！

开发编译内存溢出

有小伙伴在开发时发现页面过多时，热加载编译会出现内存溢出问题，已修改 npm run dev 的脚本命令增加 node 的运行时内存上限，如仍出现内存溢出，请继续上调 max_old_space_size 的值

package.json:

"scripts" {
  "dev": "NODE_OPTIONS=--max_old_space_size=8192 rsbuild dev"
}

扩展使用

框架集成了有赞 vant 4.9.1 前端框架，适用大部分需求，当然你也可以更换其他 Vue 前端框架。

---

Copyright by Grape Studio
QQ 群 492968709