技術選型
本小冊是采用純前端的技術棧模擬實現小程序架構的系列文章，所以主要以前端技術棧為主，但是為了模擬一個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
)
