跨平台开发常用技术栈及vue（web项目）打包手机安装包流程、uni-app发布小程序流程

移动端开发常用技术栈

原生开发

使用安卓或 iOS 原生开发，使用原生语言开发，性能最好，但开发效率低，只能运行在原生平台，跨平台开发困难。

• 安卓：Java

• iOS：Object-C/Swift

跨平台开发

• webApp：使用 HTML、CSS、JavaScript 或 vue、react 等前端框架开发，输入网址后运行在浏览器上，天然支持跨平台，但只能使用浏览器提供的功能，无法使用手机上的一些功能。比如摄像头、通讯录、相册等等，局限性很大，而且由于依赖于网络，加载页面速度会受到限制，且无法在离线环境下使用，体验较差。

• 微信小程序：微信官方提供的小程序开发框架，使用WXML（HTML）、WXSS（CSS）、JavaScript 开发，运行在微信小程序平台，与微信深度绑定，支持跨平台。

• 混合 App（Hybrid App）:指将网页打包成移动 App（浏览器套壳），并使 Web 程序有访问手机原生接口的能力，打包后网页会运行在手机系统内置的 WebView 上（安卓：Chromium 内核，iOS：WebKit 内核），可以访问手机上的摄像头、通讯录、相册等。且可以开发体验与 web 页面一致，可以使用vue、react 等框架和 npm 社区中丰富工具库和组件库。

  • H5+App：。将单页应用（只有一个 html 入口文件以及其他静态资源的 app）打包成安卓和 ios 的原生 App，是混合开发的一种方式，使用 H5+App 框架开发，支持 H5+接口（HTML5+ API Reference），可以操作手机硬件（摄像头，传感器，麦克风等）和文件系统（SQLite 本地数据库），运行在手机系统内置的 WebView 上，支持跨平台。可以使用由中国公司——DCloud 出品的 HbuilderX 打包。

  • Tauri：Tauri 是一个用于构建适用于所有主要桌面和移动平台的小型快速二进制文件的框架。开发人员可以集成任何编译为 HTML、JavaScript 和 CSS 的前端框架，以构建用户体验。

  • Electron：Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在 Windows 上运行的跨平台应用 macOS 和 Linux——不需要本地开发经验。（不能打包移动 App）

• 跨平台框架：

  • uni-app：是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。同样是 DCloud 出品。有良好的中文社区支持和插件市场。
  • React Native：React Native 是一个开源的 UI 软件框架，也被称为 RN。Meta（FaceBook）公司出品。它是建立在 React 之上的，是一个基于 JavaScript 的移动应用框架，允许我们为 Android 和 iOS 建立原生渲染的应用程序，使用 JavaScript 或 JSX 编写。
  • Flutter：Google 出品，使用 Dart 语言开发，支持跨平台。Flutter 不仅限于移动应用开发，它的跨平台能力还扩展到了 Web、桌面以及嵌入式设备，使得开发者能够用相同的一套代码服务于更广泛的用户。

H5+App——微 t 哥

• 在线体验
• 安卓 apk 安装包下载
• github 源代码仓库

About

微 t 哥是一款基于 vue3 的 App，可以提供基于 ChatGPT 接口的上下文 AI 对话、清除上下文开启新对话、创建 AI 角色等功能，支持 ChatGPT 接口的流式输出。是一个纯前端项目。

项目预览

如何将 vue 项目打包成 H5+App？

vue 项目打包

1. 创建 vue 项目并进行如下配置

   1. 配置开发或生产环境服务的公共基础路径base为./（用于嵌入形式的开发）

      // vite.config.ts
      import { fileURLToPath, URL } from "node:url";
      import { defineConfig } from "vite";
      import vue from "@vitejs/plugin-vue";
      import AutoImport from "unplugin-auto-import/vite";
      import Components from "unplugin-vue-components/vite";
      import { VantResolver } from "@vant/auto-import-resolver";
      
      // https://vitejs.dev/config/
      export default defineConfig({
          base: "./", // 用于嵌入形式的开发
          server: {
              host: "0.0.0.0",
          },
          plugins: [
              vue(),
              AutoImport({
                  resolvers: [VantResolver()],
              }),
              Components({
                  resolvers: [VantResolver()],
              }),
          ],
          resolve: {
              alias: {
                  "@": fileURLToPath(new URL("./src", import.meta.url)),
              },
          },
      });
      

   2. 配置 vue-router 的历史模式为hash模式，因为 H5+App 不支持history模式

      // router/index.ts
      import { createRouter, createWebHashHistory } from "vue-router";
      
      const router = createRouter({
          history: createWebHashHistory(), // 使用 hash 模式
          routes: [
              {
                  path: "/",
                  name: "layout",
                  redirect: "/chatList",
                  meta: {
                      index: 0,
                      navBarColor: "#ededed",
                  },
                  component: () => import("@/views/Layout/index.vue"),
                  children: [
                      {
                          path: "chatList",
                          name: "微t哥",
                          meta: {
                              index: 0,
                              navBarColor: "#ededed",
                          },
                          component: () =>
                              import("@/views/chatList/index.vue"),
                      },
                      ...otherRoutes,
              },
              ...otherRoutes,
          ],
      });
      
      export default router;
      

   3. H5+API 使用示例，如下，backButtonClick方法监听了返回手势，实现在首页 1 秒内双击返回键退出应用，其他页面则返回上一页；setSysNavBarColor方法实现设置顶部状态栏颜色

      <!-- App.vue -->
      <template>
          <!-- your template -->
      </template>
      
      <script setup lang="ts">
      const backButtonClick = () => {
          let firstPressTime: number | null = null; // 跟踪第一次按下的时间
          plus.key.addEventListener("backbutton", function () {
              if (route.path === "/chatList" || route.path === "/") {
                  // 检查是否是第一次按下
                  if (!firstPressTime) {
                      firstPressTime = new Date().getTime();
                      showToast({
                          message: "再按一次退出应用",
                          duration: 1000,
                          position: "bottom",
                      });
      
                      // 在1秒后重置计时器
                      setTimeout(function () {
                          firstPressTime = null;
                      }, 1000);
                  } else {
                      // 如果第二次按下发生在1秒内，退出应用
                      if (new Date().getTime() - firstPressTime < 1500) {
                          plus.runtime.quit();
                      }
      
                      // 在检查第二次按下后重置计时器
                      firstPressTime = null;
                  }
              } else {
                  // 对于其他路由，直接后退
                  history.back();
              }
          });
      };
      const setSysNavBarColor = () => {
          plus.navigator.setStatusBarBackground("#ededed");
      };
      document.addEventListener("plusready", function () {
          backButtonClick();
          setSysNavBarColor();
      });
      </script>
      
      <style>
      /* your style */
      </style>
      

2. 打包项目

   执行命令 npm run build，打包项目，生成 dist 文件夹，其中包括index.html入口文件和其他静态资源。

创建 H5+App

1. 下载并安装 HBuilderX，并创建一个新项目，选择H5+App模板，如下图所示：

   

2. 删除除manifest.json配置文件和unpackage打包文件夹以外的其他默认模板文件，并将打包好的 dist 文件夹中的所有文件复制到项目根目录，如下图所示：

   

3. 在manifest.json配置 App 的基本信息，如应用名称和图标以及其他配置项，如下图所示：

   

发行 App 安装包

1. 在 HBuilderX 中，选择发行->云打包，如下图所示：

   

2. 配置包名（安卓）或Bundle ID(AppID)（iOS），以及证书信息（需提前生成安卓证书和 iOS 证书，进行当前步骤时 Hbuilderx 给出了详细的证书生成方法，此处不再赘述）

   

3. 点击打包，等待五到十分钟，安装包会生成在/unpackage/release目录下

注意：打包的 App 不必须是 vue 或 react 项目打包而成的生产环境文件，简单的 html 页面同样可以以相同的方式打包，只需将入口 html 文件以及其他引入文件放在 H5+App 项目根目录下，并在manifest.json中将应用入口页面配置为入口 html 文件的相对路径。

uniapp——“HUESDL 位签”微信小程序

项目预览

开发上线流程

1. 前往微信开放平台，以个人开发者身份申请小程序账号，获得小程序 ID，进行小程序备案

   

   未备案的小程序只能试发布三个月

2. 下载微信小程序开发工具， 以备调试使用

3. 创建 uniapp 项目，配置项目基本信息，填入小程序 ID

4. 阅读 uniapp 文档、微信小程序文档，了解 uniapp 的开发流程，并完成基本功能

5. 若有特殊功能需求（如地理位置等），需在微信小程序后台申请接口调用权限

   

6. 如果调用了后端接口，需要在开发管理->开发设置->服务器域名配置request合法域名

   

   注意：微信小程序的接口调用权限仅支持HTTPS，如果没有SSL证书，可以选择采用DCloude云函数或微信小程序云函数中间代理。

7. 功能完成后，点击运行->小程序模拟器->微信开发者工具查看预览效果并调试，此功能支持代码热更新

   

8. 调试完成后关闭微信开发者工具，在 HbuilderX 选择发行->小程序->微信，生成压缩并最小化后的生产环境文件

   
   

9. 功能无误且预览符合需求后，在微信开发者工具内点击上传，确认版本号和项目备注

   

10. 上传成功后，可前往微信小程序开发者后台，将上传的开发版本选为体验版本或提交审核，审核通过后可发布成为线上版本