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

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

在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

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

12. 构建项目

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

npm run build:h5  // 对应的命令

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

未完待续。。。


http://www.kler.cn/a/584412.html

相关文章:

  • C# NX二次开发:获取模型中所有的草图并获取草图中的对象
  • 基于SpringBoot + Vue 的校园论坛系统
  • K8S学习之基础二十六:k8s的StatefulSet控制器
  • 在 Ubuntu 上安装和配置 Docker 的完整指南
  • 网络爬虫-1:发送请求+维持会话+代理设置/超时设置
  • 高德爬取瓦片和vue2使用
  • Sglang部署大模型常用参数详解
  • 【Oracle】19c数据库控制文件多路径配置
  • 使用阿里云操作系统控制台巧解调度抖动
  • Python----数据可视化(pyecharts二:绘图一:条形图,直方图,折线图,散点图,箱图,饼图,热力图)
  • 若依RuoYi-Cloud-Plus微服务版(完整版)前后端部署
  • Spring MVC中的Controller加载控制与Bean加载控制详解
  • cu118 安装vllm 极简教程 踩坑笔记
  • 信奥赛CSP-J复赛集训(模拟算法专题)(10):P2356 弹珠游戏
  • 本地算力部署大模型详细流程(一)
  • 虚幻引擎入门
  • 玩转云服务器——阿里云操作系统控制台体验测评
  • 游戏引擎学习第154天
  • Hutool RedisDS:Java开发中的Redis极简集成与高阶应用
  • 云原生性能测试全解析:如何构建高效稳定的现代应用?