使用 `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";
// 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)})
}