下载下来以后需要
cnpm i
直接运行会报错，因为教程用的是老的sass版本，新1.8版本会报错，因此要把sass降低到1.7版本
cnpm install [email protected]
目前一共有7大文件夹
封装的api请求被放在主目录下的utils/request.js里，url配置在主目录下的config.js里，暴露出了dev对象可以取用。
我们在main.js中把api注册成了全局变量
import api from "@/api/index.js";
// 配置全局api
app.config.globalProperties.$api = api;/api/index.js负责拿到所有文件夹下的所有文件
// 拿到所有api
const modulesFiles = import.meta.glob("./*/*.*", { eager: true });
const modules = {};
for (const key in modulesFiles) {
const moduleName = key.replace(/(.*\/)*([^.]+).*/gi, "$2");
const value = modulesFiles[key];
if (value.default) {
// 兼容js
modules[moduleName] = value.default;
} else {
// 兼容ts
modules[moduleName] = value;
}
}
//console.log(666, modules);
export default modules;/api/test/test.js展示了如何定义接口
import request from '@/utils/request';
const BASE_API = '/api/test';
export default {
time() {
return request({
url: BASE_API + '/time',
method: 'get',
});
},
};在别的文件下这样调用，先取用当前的Instance给proxy，然后再调用$api全局变量，然后/api/index.js会扫描所有的文件名称，扫描到test.js，则加上test,调用test.js里的time函数。
因为大多数的api请求是需要异步的，所以加上async和await
<script setup>
const { proxy } = getCurrentInstance();
async function test() {
let res = await proxy.$api.test.time();
console.log(res);
}
</script>封装了所有的request的Promise请求，所有api配置的连接和内容都会通过这个文件发送给后端。
传递字段说明:
code:业务编号，把每一个端口编上号，如果有错误则报此代码。如果code==0，则报错 msg:如果code=0，则报msg里面的错误 data:业务数据，如果code不等于0时，则
| code | 业务编号，把每一个端口编上号，如果有错误则报此代码。如果code==0，则报错，如果code=-1则证明token过期 |
|---|---|
| msg | 如果code=0，则报msg里面的错误 |
| data | 业务数据，如果code不等于0时，则前端处理data中的数据 |
代码在:https://github.com/OurKAMTeam/uni-vue-vite-yiDianShi/blob/main/src/utils/request.js
简单说明:
const { code, msg } = res.data
if(code==-1){
//重新登录
logout();
// uni.switchTab({
// url: '/pages/mine/index',
// });
uni.showToast({
icon: "none",
duration: 3000,
title: "请先授权登录！",
});
return;
}else if (code == 0) {
//展示报错
uni.showToast({
icon: "none",
duration: 3000,
title: msg,
});
return reject(msg);
}else{
// 正常处理数据
return resolve(res.data.data);
}和api差不多，store/index.js也同样被定义成了全局变量，不过在注册时调用了Pinia组件，并且在小程序的应用上需要特殊的注册，注册代码在main.js
pinia.use(
createPersistedState({
storage: {
setItem: (key, value) => {
uni.setStorageSync(key, value);
},
getItem: (key) => {
return uni.getStorageSync(key);
}
},
auto: true, // 启用所有Store默认持久化
})
);
app.use(pinia);
app.config.globalProperties.$store = store;同样store也有一个index.js负责拿到文件夹下所有的接口
// 拿到modules下的所有文件
const modulesFiles = import.meta.glob('./modules/*.*', { eager: true });
const modules = {};
for (const key in modulesFiles) {
const moduleName = key.replace(/(.*\/)*([^.]+).*/gi, '$2');
const value = modulesFiles[key];
modules[moduleName] = value;
// console.log(modules);
}
export default modules;如何定义函数呢，在store/modules/test.js里定义了一个基本函数 函数可以记录count的值，可以对count的值进行++
import { defineStore } from 'pinia';
export const useTestStore = defineStore('test', {
state: () => {
return {
count: 0
};
},
actions: {
add() {
this.count++;
}
},
persist: true, // 启用持久化
});如何调用，在pages/index/index.vue下定义了一个例子
定义了count作为变量，变量绑定了proxy.$store.test.useTestStore()，并且把这个变量转化成了可变变量Ref，在点击发生时调用add函数，数字自增
<template>
<text>{{count}}</text>
<button @click="$store.test.useTestStore().add();">click</button>
</template>
<script setup>
const { proxy } = getCurrentInstance();
let {count} = toRefs(proxy.$store.test.useTestStore())
</script>把图片放在里面，下周进行切图，也可以自行切图，每个界面建一个文件夹，尽量不要用中文名的图片名称
使用scss语言编程，不要忘记要从css转换一下
所有的文件都被定义在了pages里面，每增加一个页面在pages.json也要注册
以上是微信官方给出的登录逻辑https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html
登录页面写在了pages/login/login.vue，(测试阶段目前注释掉了，直接点击就能登录)
逻辑写在了store/modules/user.js的login()函数和getUserInfo()函数。
因为不适用nvue写的，所以用不了navigation标签。因为router太麻烦了，网上看支持uni的router评价很不好，特别的难用，所以使用uni.的api跳转，具体的手册在下面↓
https://uniapp.dcloud.net.cn/api/router.html#redirectto
主要安装包及其依赖说明: sass1.8会报错，以后再改，先按照老写法写,unplugin-auto-import是自动引入ref的插件
// 基础项目
cnpx degit dcloudio/uni-preset-vue#vite small-app
cnpm install [email protected] node-sass sass-loader@10 -D
cnpm i -D unplugin-auto-import
"pinia": "^2.0.36",
"pinia-plugin-persistedstate": "^4.1.2",
"sass": "^1.77.6",
"uview-plus": "^3.3.37",
"vue": "^3.4.21",
// 后面是报错后安装的依赖
"clipboard": "^2.0.11",
"dayjs": "^1.11.13",
"deep-pick-omit": "^1.2.1",
"destr": "^2.0.3",