uni-app开发心得

为每次发版添加编译时间

每次编译会自动更新编译时间可以确定客户当前版本是不是最新的

使用wenpack定义一个BUILD_DATE变量，由于是数字，所以不需要JSON.stringify

// vue.config.js文件
const config = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				BUILD_DATE: +new Date(),
			}),
		],
	}
}

然后再components创建一个build-date组件

<template>
	<view class="date">编译日期：{{ BuildDate }}</view>
</template>
<script>
import dayjs from "dayjs";
export default {
	name: "BuildDate",
	data() {
		return {
			BuildDate: dayjs(BUILD_DATE).format("YYYY-MM-DD HH:mm:ss"),
		};
	},
};
</script>
<style scoped>
.date {
	font-size: 22rpx;
	text-align: center;
	opacity: 0.2;
}
</style>

接口请求

个人习惯了axios的api，所以请求库也封装成了axios类似的使用方式
但是有几处需要优化的地方

1. 防止用户重复提交表单

除了get请求都显示一个阻止点击事件的loading，注意一定要在complete方法里面调用一下hideloading，不然界面上会一直显示loading

if (method.toUpperCase() !== "GET") {
	uni.showLoading({
		...loadingConfig,
		mask: true,
	});
}

2.所有请求都应该在登陆接口之后

我做的大多是erp系统，所有的接口都需要鉴权
如果登陆了的话，store会存储用户的登陆信息，如果用户没有登陆的话，则阻塞接口的请求并监听store的变化,由于某些接口的参数也需要用户的登陆信息，所以waitUserInfo写了一个公共的方法。

import store from "@/store/store.js";
export default async function waitUserInfo() {
	if (!store.state.app.userInfo.SessionId) {
		await new Promise((resolve) => {
			const subscribe = store.subscribe(() => {
				if (store.state.app.userInfo.SessionId) {
					subscribe();
					resolve();
				}
			});
		});
	}
}

错误提示

当后端出现问题的时候，应该弹出提示来，用户可以截图这个信息反馈给开发人员，通过判断接口返回的code可以判断这次请求是否成功

完整的request.js的代码如下

export const BASE_URL = "";
export default async function ({
	url = "",
	method = "GET",
	header = {},
	data = {},
	loading = false,
	loadingConfig = {
		title: "加载中...",
	},
}) {
	url = BASE_URL + url;
	if (!url.includes("login")) {
		await waitUserInfo();
	}
	header = {
		...header,
		Authorization: `Bearer ...`,
	};
	return await new Promise((resolve, fail) => {
		if (method.toUpperCase() !== "GET") {
			uni.showLoading({
				...loadingConfig,
				mask: true,
			});
		}
		uni.request({
			url,
			method,
			header,
			data,
			success(res) {
				if (res.statusCode != 200 || res.data.code != 200) {
					uni.showModal({
						title: "出错啦",
						content: res.data.message || res.data.msg,
					});
					if (res.statusCode != 200) {
						resolve(res);
					} else {
						resolve(res.data);
					}
					// fail(res)
				} else {
					resolve(res.data);
				}
			},
			fail,
			complete(res) {
				uni.hideLoading();
			},
		});
	});
}

定义一些方便的工具函数

在开发中，经常需要弹窗和弹出提示，提示之后再做一些操作，小程序默认的提示时间太短，使用起来也不是很方便。

export function $message(message, duration = 3000) {
	return new Promise((resolve) => {
		uni.showToast({
			title: message,
			icon: "none",
			duration,
		});
		setTimeout(resolve, duration);
	});
}
export function $alert(msg = "", title = "提示", confirmColor = "#576B95") {
	return new Promise((resolve, reject) => {
		uni.showModal({
			title,
			content: msg,
			confirmColor,
			success(res) {
				if (res.confirm) {
					resolve(true);
				}
				if (res.reject) {
					reject();
				}
			},
		});
	});
}

eslint自动格式化代码

hbuilder自带的代码格式化不太好用，自己安装eslint格式化代码
安装相关的插件

npm install -D vue-eslint-parser eslint eslint-config-prettier eslint-plugin-html eslint-plugin-prettier eslint-plugin-vue

{
    "vue-eslint-parser": "^9.3.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-prettier": "^5.1.0",
    "eslint-plugin-vue": "^9.19.2",
}

新建.eslintrc文件

{
	"extends": ["plugin:vue/recommended","plugin:prettier/recommended"],
	"parser": "vue-eslint-parser",
	"rules": {
		"no-multiple-empty-lines": ["error", {"max": 0}],
		"vue/multi-word-component-names": ["off", {
			"ignores": []
		  }]
	}
}

hbuilder安装插件