当前位置：首页 > article >正文

如何搭建一个适配微信小程序，h5，app的uni-app项目

article 2025/3/14 17:25:49

在vscode搭建 uni-app 项目（Vue 3 + Vite + Pinia + uView Plus）

一、环境准备

1. 安装 Node.js

确保已安装 Node.js（需≥14版本），可通过以下命令检查版本：

node -v

2. 安装 VSCode

从 VSCode 官网下载并安装适合你操作系统的版本。

3. 安装 uni-app 官方插件

在 VSCode 中打开扩展视图（快捷键 Ctrl+Shift+X），搜索 “uni-app”，找到官方插件并安装。

4. 安装 Volar 插件

Volar 是 Vue 3 的官方语言服务，提供智能感知、语法检查等功能。在扩展视图中搜索 “Volar” 并安装。

二、创建项目

1. 初始化项目

首先，确保你已经安装了 Node.js 和 npm。然后，打开终端，使用以下命令创建一个新的 uni-app 项目：(个人node 版本 18.18.2)

注意： Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

npm init uni-app my-uniapp-project --template=vue3-vite-uni

2. 进入项目目录

cd my-uniapp-project

3. 安装依赖

运行以下命令安装项目依赖：

npm install

4. 安装 uView Plus

安装 uView Plus UI 库：

npm install uview-plus

5. 配置 uView Plus

在 main.js 中引入并配置 uView Plus：

// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';

export function createApp() {
  const app = createSSRApp(App);
  app.use(uView);
  return {
    app,
  };
}

在 main.ts 中引入 uView Plus 的样式：

// main.ts
import 'uview-plus/dist/style/index.scss';

6. 安装 Pinia

安装 Pinia 状态管理库：

npm install pinia

在 main.js 中引入并创建 Pinia 实例：

// main.js
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import uView from 'uview-plus';

const app = createApp(App);
app.use(createPinia());
app.use(uView);
app.mount('#app');

7. 创建 Pinia Store

在 src/stores 目录下创建一个新的 store 文件，例如 user.js：

// src/stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
  }),
  actions: {
    setName(name) {
      this.name = name;
    },
  },
});

在组件中使用 store：

<template>
  <view>
    <text>{{ userName }}</text>
    <u-button @click="changeName">Change Name</u-button>
  </view>
</template>

<script setup>
import { useUserStore } from '../stores/user';

const userStore = useUserStore();
const userName = computed(() => userStore.name);

function changeName() {
  userStore.setName('Jane Doe');
}
</script>

8. 配置 Vite

在 vite.config.js 中配置 Vite 以支持 uni-app：

// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
  plugins: [uni()],
});

9. 配置package.json

这里需要适配h5、微信小程序、以及app或者其他各种小程序
配置以下命令在package.json：

{
  "scripts": {
    "dev": "uni dev",
    "dev:h5": "uni dev -p h5",
    "dev:mp-weixin": "uni dev -p mp-weixin",
    "build:h5": "uni build -p h5",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao"
  }
}

以及对应的依赖项在dependencies中

 	"@dcloudio/uni-app": "3.0.0-4040520250104002",
    "@dcloudio/uni-app-harmony": "3.0.0-4040520250104002",
    "@dcloudio/uni-app-plus": "3.0.0-4040520250104002",
    "@dcloudio/uni-components": "3.0.0-4040520250104002",
    "@dcloudio/uni-h5": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-alipay": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-baidu": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-jd": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-lark": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-qq": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4040520250104002",
    "@dcloudio/uni-mp-weixin": "3.0.0-4040520250104002",

10.安装对应依赖并运行项目

使用以下命令运行项目：

npm install
npm run dev:h5  // 运行 H5 平台
npm run dev:mp-weixin  // 运行微信小程序

这将启动开发服务器，并在浏览器中打开项目。

11. 条件编译

uni-app 支持条件编译，允许你根据不同平台编写特定的代码。例如：

// #ifdef H5
console.log('This code will only run on H5 platform');
// #endif

// #ifdef MP-WEIXIN
console.log('This code will only run on WeChat Mini Program');
// #endif

// #ifdef APP-PLUS
console.log('This code will only run on App platform');
// #endif