使用 `Vitesse Uni App` 创建微信小程序并配置 uview-plus 和 alovajs

使用 Vitesse Uni App 创建微信小程序

Vitesse Uni App：https://vitesse-docs.netlify.app/

UI：https://uview-plus.jiangruyi.com/components/intro.html

编辑器：VScode 安装 Volar（Vue Offices）插件

创建项目

pnpm create uni <project-name> -t vitesse

创建页面

参考：https://vitesse-docs.netlify.app/getting-started/views

创建方式非常简单，即看即会

引入 UI 库

这步稍微有些麻烦。

安装文档地址：https://uview-plus.jiangruyi.com/components/install.html

配置文档地址：https://uview-plus.jiangruyi.com/components/npmSetting.html

安装 Sass

// 安装sass
npm i sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

安装依赖

npm install uview-plus
npm install dayjs
npm install clipboard

引入 JS 库

// main.js
import uviewPlus from 'uview-plus'// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)app.use(uviewPlus)return {app}
}
// #endif

引入全局 CSS

/* uni.scss */
@import 'uview-plus/theme.scss';

引入基础样式

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>

配置 easycom 模式

参考：https://uview-plus.jiangruyi.com/components/npmSetting.html#%E9%85%8D%E7%BD%AEeasycom%E7%BB%84%E4%BB%B6%E6%A8%A1%E5%BC%8F

// pages.json
{"easycom": {"autoscan": true,// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},// 此为本身已有的内容"pages": [// ......]
}

配置 typescript 支持

{"compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types","uview-plus/types"]},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

启动项目查看

npm run dev:h5

踩坑记录

在 pages.json 中配置 easycom 配置时，再次重新启动项目，会导致 pages.json 中的文件刷新，然后 ui 样式引入失效，需要在 pages.config.json 中配置

import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'export default defineUniPages({pages: [],globalStyle: {backgroundColor: '@bgColor',backgroundColorBottom: '@bgColorBottom',backgroundColorTop: '@bgColorTop',backgroundTextStyle: '@bgTxtStyle',navigationBarBackgroundColor: '#000000',navigationBarTextStyle: '@navTxtStyle',navigationBarTitleText: 'Vitesse-Uni',navigationStyle: 'custom',},// tabBar: {//   backgroundColor: "@tabBgColor",//   borderStyle: "@tabBorderStyle",//   color: "@tabFontColor",//   selectedColor: "@tabSelectedColor",// },"easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},
})
]

使用 alova.js 作为小程序的请求工具

官网：https://alova.js.org/zh-CN/

unipp 插件：https://alova.js.org/zh-CN/resource/request-adapter/uniapp

安装

npm install @alova/adapter-uniapp --save

封装

index.ts

//index.ts
import { createAlova } from 'alova'
import AdapterUniapp from '@alova/adapter-uniapp';export const AlovaInstance = createAlova({baseURL: 'http://localhost:8080/api/v1/',// https://alova.js.org/zh-CN/resource/request-adapter/uniapp#%E5%88%9B%E5%BB%BA-alova...AdapterUniapp(),// 请求拦截器beforeRequest() {},// 响应拦截器responded: {}})

api.ts

import { AlovaInstance } from './index'const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
const timeout = 5000export const Alova = {createGet(url: string, params?: Record<string, any>) {return AlovaInstance.Get(url, {headers,params,timeout})},createPost(url: string, data: Record<string, any>, params: Record<string, any>) {return AlovaInstance.Post(url, data, {params})},createTodoPut(url: string, data: Record<string, any>, params: Record<string, any>) {return AlovaInstance.Put(url,data, {params})},createDelete(url: string, data?: Record<string, any>, params?: Record<string, any>) {return AlovaInstance.Put(url,data, {params})}}

service.ts

import {Alova} from "./api"// Law notice
export const getLawNotice = () => {return Alova.createGet("law")}

调用：

<script lang="ts" setup>
import {getLawNotice} from "../alova/service"
import {concatenate, ulg} from "../utils/strings/index";
![请添加图片描述](https://i-blog.csdnimg.cn/direct/f5bfc075d5254acdb28bef31d5b85b1b.png)// data
const content = ref<string>("")
// const law // request api
const getLawList = async () => {await getLawNotice().then((result: any) => {// check status codeif (result.statusCode === 200) {// get datalet lawList = result.data.data;for (let i = 0; i < lawList.length; i++) {let text = lawList[i].text;// ulg(text)content.value = concatenate(content.value, " ", text)}}}).catch((err: any) => {alert(err)})
}