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

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

一、环境准备

1. 安装 Node.js

确保已安装 Node.js(需≥14版本),可通过以下命令检查版本:

bash 复制代码
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

bash 复制代码
npm init uni-app my-uniapp-project --template=vue3-vite-uni

2. 进入项目目录

bash 复制代码
cd my-uniapp-project

3. 安装依赖

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

bash 复制代码
npm install

4. 安装 uView Plus

安装 uView Plus UI 库:

bash 复制代码
npm install uview-plus

5. 配置 uView Plus

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

bash 复制代码
// 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 的样式:

bash 复制代码
// main.ts
import 'uview-plus/dist/style/index.scss';

6. 安装 Pinia

安装 Pinia 状态管理库:

bash 复制代码
npm install pinia

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

bash 复制代码
// 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:

bash 复制代码
// src/stores/user.js
import { defineStore } from 'pinia';

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

在组件中使用 store:

bash 复制代码
<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:

bash 复制代码
// 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

bash 复制代码
{
  "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

bash 复制代码
 	"@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.安装对应依赖并 运行项目

使用以下命令运行项目:

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

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

11. 条件编译

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

bash 复制代码
// #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

这样你可以根据需要在 请求拦截 或者 路径处理 时区分不同的运行环境

12. 构建项目

要构建项目,使用以下命令:

bash 复制代码
npm run build:h5  // 对应的命令

这将生成一个构建后的文件夹,其中包含可以部署的静态文件。

未完待续。。。

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴5 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
说私域7 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往7 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket