平地起高楼: 环境搭建

技术选型

本小册是采用纯前端的技术栈模拟实现小程序架构的系列文章，所以主要以前端技术栈为主，但是为了模拟一个App应用的效果，以及小程序包下载管理流程的实现，我们还是需要搭建一个基础的App应用。这里我们将选择 Tauri2.0 来作为基础App的搭建，主要考虑:

Tauri 本身是一个跨端开发框架，页面部分开发直接采用前端技术即可
轻量，相比于 Electron 框架，在创建和启动编译上都有更大的优势
生态比较完善，如本小册会用到的文件操作相关的能力官方也有相应的 fs-plugin 进行支持

除了基础的App环境搭建启动外，前端实现方面我们将采用:

使用 pnpm 进行项目依赖管理
Vue3 搭建App应用界面
使用 Web Worker 运行小程序逻辑线程
使用 Iframe 运行小程序UI线程页面渲染

现在让我们开始构建起小程序框架的基础开发环境吧! 🎉🎉🎉🎉🎉

基于Tauri创建App应用

创建第一个 tauri 项目: 详细的项目创建流程可以查看官方文档Create a Project | tauri

bash 复制代码

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

项目创建完成后，进入项目目录安装依赖并启动:

bash 复制代码

cd tauri-app

pnpm install

pnpm tauri dev

运行完上述命令后，将会拉起一个页面窗口，此时表明你的项目已经成功创建并启动啦 👏👏👏👏

构建基础App页面

使用 Tauri 创建完成App项目后，我们开始做一些简单的改造，让页面呈现一个手机样式并渲染一个小程序列表，方便后续测试小程序的打开

打开我们的App项目，项目结构大致如下:

css 复制代码

├── 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

json 复制代码

// src-tauri/tauri.conf.json

"app": {
    "windows": [
      {
        "title": "mini_wx_app",
        "width": 414,
        "height": 828
      }
    ],
  },

保存后应用会重新刷新启动，现在我们的应用窗口就已经变成我们设定的手机尺寸啦!

构建一个基础的前端小程序列表页面

现在到了我们最熟悉的前端项目开发部分，我们将在 src 目录下完成前端页面的开发和小程序逻辑的开发工作；

引入前端样式库

项目中的基础样式我们将使用 tailwind css 来完成，现在我们给项目中接入一下 tailwind

安装依赖

bash 复制代码

pnpm add tailwindcss @tailwindcss/vite

在Vite中配置

ts 复制代码

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [ tailwindcss() ]
})

导入 Tailwind CSS

我们在 src/assets 下创建一个 styles 目录，并创建一个base.css 的文件

css 复制代码

/* src/assets/styles/base.css */

@import "tailwindcss";

创建好这个文件后并在Vue项目的入口文件导入它:

ts 复制代码

// src/main.ts
+ import './assets/styles/base.css';

现在我们删除App.vue 中的多余逻辑，加上一点儿 tailwind css 样式类，确认 tailwind css 是否正确引入

App.vue 复制代码

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

构建小程序列表

我们先来模拟几个小程序的数据列表

ts 复制代码

// src/constants/apps.ts

export 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 将列表渲染到页面上即可:

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>

最终我们的页面效果如下:

至此，我们几个基础的开发环境就搭建好了；后面开始我们就将在这个环境下完成小程序架构的构建，一起加油吧~~ 👏👏👏👏