跨平台开发常用技术栈及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 哥

About

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

项目预览

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

vue 项目打包

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

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

ts 复制代码

// 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)),
        },
    },
});

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

ts 复制代码

// 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;

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

vue 复制代码

<!-- 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>

打包项目

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

创建 H5+App

下载并安装 HBuilderX，并创建一个新项目，选择H5+App模板，如下图所示：
删除除manifest.json配置文件和unpackage打包文件夹以外的其他默认模板文件，并将打包好的 dist 文件夹中的所有文件复制到项目根目录，如下图所示：
在manifest.json配置 App 的基本信息，如应用名称和图标以及其他配置项，如下图所示：

发行 App 安装包

在 HBuilderX 中，选择发行->云打包，如下图所示：
配置包名（安卓）或Bundle ID(AppID)（iOS），以及证书信息（需提前生成安卓证书和 iOS 证书，进行当前步骤时 Hbuilderx 给出了详细的证书生成方法，此处不再赘述）
点击打包，等待五到十分钟，安装包会生成在/unpackage/release目录下