【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】

简介: 【uniApp新模式: 使用Vue3 + Vite4 + Pinia + Axios技术栈构建】

1,背景

使用Vue3 + Vite4 + Pinia + Axios + Vscode模式开发之后,感叹真香!不用再单独去下载HBuilderX。废话不多说,直接上干货!

2,版本号

  • node: v16.18.0
  • vue: ^3.3.4,
  • vite: 4.1.4
  • sass: ^1.62.1
  • pinia: 2.0.36
  • pinia-plugin-unistorage: ^0.0.17
  • axios: ^1.4.0
  • axios-miniprogram-adapter: ^0.3.5
  • unplugin-auto-import: ^0.16.4
    如遇到问题,请检查版本号是否一致!!!

3,项目目录结构

└── src # 主目录

├── api # 存放所有api接口文件

│ ├── user.js # 用户接口

├── config # 配置文件

│ ├── net.config.js # axios请求配置

├── pinia-store # 配置文件

│ ├── user.js # axios请求配置

├── utils # 工具类文件

│ ├── request.js # axios请求封装

4,开发流程

建议去uni-preset-vue仓库下载vite分支zip包,熟练ts的童鞋下载vite-ts

4.1,安装
  • 下载之后进入项目
cd uni-preset-vue
  • 安装依赖
# pnpm
pnpm install 
# yarn 
yarn
# npm
npm i
  • 运行
pnpm dev:mp-weixin

打开微信开发者工具,找到dist/dev/mp-weixin运行,可以看到默认的页面

  • 安装pinia
pnpm add pinia 
  • 使用pinia
    在src目录下构建 pinia-store/user.js文件
/**
 * @description 用户信息数据持久化
 */
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
    state() {
        return {
            userInfo: {}
        }
    },
    actions: {
        setUserInfo(data) {
            this.userInfo = data
        }
    }
})
  • 修改main.js文件
import {
  createSSRApp
} from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
export function createApp() {
    const app = createSSRApp(App);
    const store = Pinia.createPinia();
    app.use(store);
    return {
        app,
        Pinia
    };
}
  • pinia数据持久化
    安装pinia-plugin-unistorage
pnpm add pinia-plugin-unistorage

修改main.js文件,增加如下代码:

// pinia数据持久化
import { createUnistorage } from 'pinia-plugin-unistorage'
store.use(createUnistorage());
app.use(store);

完整代码如下:

import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
// pinia数据持久化
import { createUnistorage } from 'pinia-plugin-unistorage'
import App from "./App.vue";
export function createApp() {
    const app = createSSRApp(App);
    const store = Pinia.createPinia();
    store.use(createUnistorage());
    app.use(store);
    return {
        app,
        Pinia
    };
}

在页面中使用:

<script setup>
    import { useUserStore } from '@/pinia/user.js'
    const user = useUserStore()
    
    // 设置用户信息
    const data = { userName: 'snail' }
    user.setUser(data)
    // 打印用户信息
    console.log(user.userInfo)
</script>
  • 安装axios
pnpm add axios

适配小程序,需要另外安装axios-miniprogram-adapter插件

pnpm add axios-miniprogram-adapter
4.2,使用axios

在utils创建utils/request.js文件

import axios from 'axios';
import mpAdapter from "axios-miniprogram-adapter";
axios.defaults.adapter = mpAdapter;
import { netConfig } from '@/config/net.config';
const { baseURL, contentType, requestTimeout, successCode } = netConfig; 
let tokenLose = true;
const instance = axios.create({
  baseURL,
  timeout: requestTimeout,
  headers: {
    'Content-Type': contentType,
  },
});
// request interceptor
instance.interceptors.request.use(
  (config) => {
    // do something before request is sent
    return config;
  },
  (error) => {
    // do something with request error
    return Promise.reject(error);
  }
);
// response interceptor
instance.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */
  (response) => {
    const res = response.data;
    // 请求出错处理
    // -1 超时、token过期或者没有获得授权
    if (res.status === -1 && tokenLose) {
      tokenLose = false;
      uni.showToast({
        title: '服务器异常',
        duration: 2000
    });
      return Promise.reject(res);
    }
    if (successCode.indexOf(res.status) !== -1) {
      return Promise.reject(res);
    }
    return res;
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default instance;

其中net.config.js文件需要在src/config目录下创建,完整代码如下:

/**
 * @description 配置axios请求基础信息
 * @author hu-snail 1217437592@qq.com
 */
export const netConfig = {
    // axios 基础url地址
    baseURL: 'https://xxx.cn/api',
    // 为开发服务器配置 CORS。默认启用并允许任何源,传递一个 选项对象 来调整行为或设为 false 表示禁用
    cors: true,
    // 根据后端定义配置
    contentType: 'application/json;charset=UTF-8',
    //消息框消失时间
    messageDuration: 3000,
    //最长请求时间
    requestTimeout: 30000,
    //操作正常code,支持String、Array、int多种类型
    successCode: [200, 0],
    //登录失效code
    invalidCode: -1,
    //无权限code
    noPermissionCode: -1,
  };

在src目录下创建src/api/user.jsapi文件

import request from '@/utils/request'
 
/**
 * @description 授权登录
 * @param {*} data 
 */
export function wxLogin(data) {
  return request({
    url: '/wx/code2Session',
    method: 'post',
    params: {},
    data
  })
}
/**
 * @description 获取手机号
 * @param {*} data 
 */
export function getPhoneNumber(data) {
  return request({
    url: '/wx/getPhoneNumber',
    method: 'post',
    params: {},
    data
  })
}

在页面中使用

<script setup>
    import { wxLogin, getPhoneNumber } from '@/api/user.js'
      /**
     * @description 微信登录
     */
    const onWxLogin = async () => {
        uni.login({
            provider: 'weixin',
            success: loginRes => {
                state.wxInfo = loginRes
                const jsCode = loginRes.code
                wxLogin({jsCode}).then((res) => {
                    const { openId } = res.data
                    user.setUserInfo({ openId })
                })
            }
        })
    }
</script>
4.3,配置vue自动导入

安装unplugin-auto-import插件

pnpm add unplugin-auto-import -D

修改vite.config.js文件:

import AutoImport from 'unplugin-auto-import/vite'
 plugins: [
    AutoImport({
      imports: ["vue"]
    })
  ],

页面中使用,需要注意的事每次导入新的vue指令,需要重新运行!!

<script setup>
     onBeforeMount(() => {
         console.log('----onBeforeMount---')
     })
</script>
  • 安装uni-ui
pnpm add @dcloudio/uni-ui
  • 使用uni-ui
    修改pages.json文件,增加如下代码:
"easycom": {
        "autoscan": true,
        "custom": {
                "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
},

在页面中使用

<template>
  <uni-icons type="bars" size="16"></uni-icons>
</template>

到此已基本可以完成程序的开发,其他功能按照自己的需求做增删改查即可。

目录
相关文章
|
15天前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
|
2月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
236 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
21天前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
82 1
|
24天前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
115 1
|
2月前
|
JavaScript API
Vue3基础(十qi)___安装使用axios
本文介绍了如何在Vue3项目中安装和使用axios进行HTTP请求,包括在main.js中引入axios并挂载到全局属性,以及在组件中通过`getCurrentInstance`获取全局axios实例来发送请求的方法。
33 0
Vue3基础(十qi)___安装使用axios
|
27天前
|
数据可视化 小程序 JavaScript
UniApp可视化开发教程 | 学习如何低代码构建跨平台应用
UniApp可视化开发教程 | 学习如何低代码构建跨平台应用
56 0
|
2月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫
|
2月前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
91 0
|
3月前
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
1172 1
|
2月前
|
JSON Java UED
uniapp:使用DCloud的uni-push推送消息通知(在线模式)java实现
以上展示了使用Java结合DCloud的uni-push进行在线消息推送的基本步骤和实现方法。实际部署时,可能需要依据实际项目的规模,业务场景及用户基数进行必要的调整和优化,确保消息推送机制在保证用户体验的同时也满足业务需求。
145 0