技术选型
本小册是采用纯前端的技术栈模拟实现小程序架构的系列文章，所以主要以前端技术栈为主，但是为了模拟一个App应用的效果，以及小程序包下载管理流程的实现，我们还是需要搭建一个基础的App应用。这里我们将选择 Tauri2.0 来作为基础App的搭建，主要考虑:
- Tauri 本身是一个跨端开发框架，页面部分开发直接采用前端技术即可
- 轻量，相比于 Electron 框架，在创建和启动编译上都有更大的优势
- 生态比较完善，如本小册会用到的文件操作相关的能力官方也有相应的
fs-plugin进行支持
除了基础的App环境搭建启动外，前端实现方面我们将采用:
- 使用 pnpm 进行项目依赖管理
- Vue3 搭建App应用界面
- 使用 Web Worker 运行小程序逻辑线程
- 使用 Iframe 运行小程序UI线程页面渲染
现在让我们开始构建起小程序框架的基础开发环境吧! 🎉🎉🎉🎉🎉
基于Tauri创建App应用
创建第一个 tauri 项目: 详细的项目创建流程可以查看官方文档Create a Project | tauri
pnpm create tauri-app
运行上述创建命令后按照提示填写项目信息即可:
- Choose which language to use for your frontend › TypeScript / JavaScript (pnpm, yarn, npm, bun)
- Choose your package manager › pnpm
- Choose your UI template › Vue
- Choose your UI flavor › Typescript
项目创建完成后，进入项目目录安装依赖并启动:
cd tauri-apppnpm installpnpm tauri dev
运行完上述命令后，将会拉起一个页面窗口，此时表明你的项目已经成功创建并启动啦 👏👏👏👏
构建基础App页面
使用 Tauri 创建完成App项目后，我们开始做一些简单的改造，让页面呈现一个手机样式并渲染一个小程序列表，方便后续测试小程序的打开
打开我们的App项目，项目结构大致如下:
├── index.html 前端页面HTML
├── package.json
├── public/
│ ├── tauri.svg
│ └── vite.svg
├── src-tauri/
│ ├── Cargo.lock
│ ├── Cargo.toml
│ ├── build.rs
│ ├── capabilities/ webview窗口功能权限配置
│ │ └── default.json
│ ├── gen/
│ │ └── schemas/
│ ├── icons/ App 相关的图标
│ ├── src/ rust部分开发目录
│ │ ├── lib.rs
│ │ └── main.rs
│ └── tauri.conf.json App 相关的一些基础配置
├── src/ 前端 Vue 项目的开发目录
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
现在我们调整App窗口尺寸为一个手机尺寸: 414 * 828
// src-tauri/tauri.conf.json"app": {"windows": [{"title": "mini_wx_app","width": 414,"height": 828}],},
保存后应用会重新刷新启动，现在我们的应用窗口就已经变成我们设定的手机尺寸啦!
构建一个基础的前端小程序列表页面
现在到了我们最熟悉的前端项目开发部分，我们将在 src 目录下完成前端页面的开发和小程序逻辑的开发工作；
引入前端样式库
项目中的基础样式我们将使用 tailwind css 来完成，现在我们给项目中接入一下 tailwind
安装依赖
pnpm add tailwindcss @tailwindcss/vite
在Vite中配置
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'export default defineConfig({plugins: [ tailwindcss() ]
})
导入 Tailwind CSS
我们在 src/assets 下创建一个 styles 目录，并创建一个base.css 的文件
/* src/assets/styles/base.css */@import "tailwindcss";
创建好这个文件后并在Vue项目的入口文件导入它:
// src/main.ts
+ import './assets/styles/base.css';
现在我们删除App.vue 中的多余逻辑，加上一点儿 tailwind css 样式类，确认 tailwind css 是否正确引入
<script setup lang="ts">
</script><template><main class="container w-screen h-screen bg-gray-100 p-6 box-border overflow-x-hidden"></main>
</template>
构建小程序列表
我们先来模拟几个小程序的数据列表
// src/constants/apps.tsexport const apps = [{appId: 'douyin',name: '抖音',logo: 'https://play-lh.googleusercontent.com/xey8dXOB53LtCR97JhDH7T-6np_sUBBE9iF7WP4Sp6T55oO28e6hic1LFTklCELw9Iw'},{appId: 'meituan',name: '美团',logo: 'https://companieslogo.com/img/orig/3690.HK-a1f4c236.png?t=1720244490'},{appId: 'jindong',name: '京东',logo: 'https://companieslogo.com/img/orig/JD-642e307f.png?t=1720244492'}
]
然后使用 vue 将列表渲染到页面上即可:
<script setup lang="ts">
import { apps } from '@/constants/apps';
</script><template><main class="container w-screen h-screen bg-gray-100 p-6 box-border overflow-x-hidden flex flex-col gap-4"><div class="app-item flex items-center gap-4 px-4 py-2 rounded-md bg-white shadow-md hover:bg-gray-200 overflow-hidden" v-for="app in apps" :key="app.appId"><img class="app-logo w-10 h-10 rounded-md" :src="app.logo" /><span class="text-base">{{ app.name }}</span></div></main>
</template>
最终我们的页面效果如下:
至此，我们几个基础的开发环境就搭建好了；后面开始我们就将在这个环境下完成小程序架构的构建，一起加油吧~~ 👏👏👏👏
本节代码已同步至github仓库: mini-wx-app
)
