uni-app：关于小程序开发规范与架构设计的理解

• uni-app 官方地址

• uview-ui 官方地址

• uni-app开发微信小程序——从工具下载到运行项目

1、忽略文件管理

===========================================================================

根目录添加【.gitignore】文件，复制一下需要忽略的目录或文件。当项目需要在git上面管理的话，一定要在首次创建提交前提交到git，否则会出现忽略无效的情况。

unpackage

.hbuilderx

node_modules

如果出现设置忽略无效的情况，参照文档：git如何停止追踪未被追踪的文件和已被追踪的文件。

打开终端，主要执行命令如下：

// 1、切到对应的项目目录下面

cd /Users/xxx/xxx



// 2、对已追踪的文件，先清除原文件的缓存

git rm -r --cached .



// 3、重新提交推送生效文件

git add .

git commit -m “重新建立忽略文件追踪关系”

git push

2、API配置与管理

=============================================================================

1、所有内容来自uVIew官方文档。

2、请求协议底层架构，使用的是【uview-ui】框架的【uview-ui/request】实现。

2.1、请求协议管理

---

1、说明文档：

1.1、请求类型有：get、post、put、delete，以及上传下载等请求。

1.2、配置参数：一次配置，全局通用的:$u.http.setConfig()。

1.3、请求拦截和响应拦截(如配置，每次请求都会执行)：此两个拦截，是可选配置的。

2、项目应用

2.1、该小程序的配置参数和拦截器位置见：【api/http.interceptor.js】

2.2、配置参数设置：baseUrl（域名）、dataType（解析格式）、header（请求头）

2.3、请求拦截设置（token）：Authorization、Cookie

2.4、响应拦截设置（token）：数据回调、异常处理、loading、toast

【api/http.interceptor.js】文件，内容示例如下：

// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token

// 同时，我们也可以在此使用getApp().gData，如果你把token放在getApp().gData的话，也是可以使用的



const install = (Vue, vm) => {

	Vue.prototype.$u.http.setConfig({

		baseUrl: process.uniEnv.baseUrl,

		dataType: 'json',

		header: {

			'content-type': 'application/json;charset=UTF-8'

		}

	});

	// 请求拦截，配置Token等参数

	Vue.prototype.$u.http.interceptor.request = (config) => {

		// 如果不带token，可以在头部传入时候写入token即可

		if (!config.header.token && vm.$store.state.vuex_token) {

			config.header.Authorization = 'Bearer ' + '注入token';

			config.header.Cookie = 'JSESSIONID=' + '注入sessionId' +

				";ClientVersion=6.50";

		}

		return config;

	}

	// 响应拦截，判断状态码是否通过

	Vue.prototype.$u.http.interceptor.response = (res, header) => {

		// 判断是否不需要提示

		let isShowToast = true

		if (header && header['zm-show-toast'] == 'false') {

			isShowToast = false

		}

		

		// #ifdef MP-WEIXIN

		// 兼容微信接口返回的状态使用flag

		if (res.flag === false || res.flag === true) {

			if (res.flag === true) {

				res.code = 10000

			} else {

				res.code = 0

			}

			res.message = res.msg

			res.body = res.data

		}

		// #endif



		if (res.returncode == '10000' || res.code == 10000) {

			return res.body

		}

		if (res.returncode == '403' || res.code == 403) {

			// 403 权限不足

			uni.showModal({

				title: '提示',

				content: res.message,

				showCancel: false,

				success: function(res) {

					if (res.confirm) {

						vm.$store.dispatch('logout', vm).then((res) => {

							uni.reLaunch({

								url: '/pages/auth'

							})

						})

					}

				}

			});

			return false

		}



		if (res.returncode == '104' || res.code == 104) {

			// access token过期

			uni.showModal({

				title: '提示',

				content: '登录失效, 请重新登录',

				showCancel: false,

				success: function(res) {

					if (res.confirm) {

						vm.$store.dispatch('logout', vm).then((res) => {

							uni.reLaunch({

								url: '/pages/auth'

							})

						})

					}

				}

			});

			return false

		}

		if (isShowToast) {

			vm.$u.toast(res.message || '请求失败!');

		}

		return false

	}

}



export default {

	install

}

文件在【main.js】引用：

const app = new Vue({

	...App

})



// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用

import httpInterceptor from '@/api/http.interceptor.js';

Vue.use(httpInterceptor, app);



app.$mount()

2.2、网络环境切换管理

---

1、由于本项目需要切换网络环境实现调试和应用、同时同一个网络环境也涉及到多个域名，因此需要对域名进行专项管理。

2、在管理类【env】实现，在【.env.js】中实现网络环境切换。

如【.env.js】文件，内容如下：

let env = 'test' // dev test rc prod 编译时候切换网络环境，需要修改该值



if (env === 'dev') {

	//开发环境

	var ENV_CONFIG = require('@/env/.env.dev.js');

} else if (env === 'test') {

	//测试环境

	var ENV_CONFIG = require('@/env/.env.test.js');

} else if (env === 'rc') {

	//rc环境

	var ENV_CONFIG = require('@/env/.env.rc.js');

} else if (env === 'prod') {

	//生产环境

	var ENV_CONFIG = require('@/env/.env.prod.js');

}



//给环境变量process.uniEnv赋值  使用 process.uniEnv.baseUrl

if (ENV_CONFIG) {

	process.uniEnv = {};

	for (let key in ENV_CONFIG) {

		process.uniEnv[key] = ENV_CONFIG[key];

	}

}

如【.env.test.js】文件，内容如下：

const config = {

    baseUrl: 'http://baidu.com',// 主域名

	// xmUrl: 'http://test1-baidu.com',// 私网 - 内部测试用

	xmUrl: 'https://test-baidu.cn',// 外网映射 - 审核使用

	bfUrl: 'http://alpha-baidu.cn',

	wxUrl: 'http://wx.baidu.com:8080',

	wxServer:'https://wxserver.baidu.cn/WeiXinServer',

	environment: 'test' // dev test rc prod

}



module.exports = config;

文件在【main.js】引用：

import '@/env/.env.js'

2.3、API集中管理

---

1、参照官方文档：API集中管理。

2、文档中：准备工作、说明、引入、使用，已经描述的很清楚，这里不再赘述。

如【http.mine.api.js】文件，内容如下：

// 创建 User 模块方法，方法内的方法共享 vm 对象

let Mine = (vm) => {

	return {

		// 获取xxx信息

		getAxxxRequest: (params) => {

			const header = {

				'content-type': 'application/x-www-form-urlencoded'

			}// 请求头content-type不设置，默认utf-8格式

			return vm.$u.post(process.uniEnv.xmUrl + '/xxx/xxx/v1.0', params, {})

		},

		

		// 设置xxx信息

		setBxxxRequest: (params) => {

			const header = {

				'content-type': 'application/x-www-form-urlencoded'

			}// 请求头content-type不设置，默认utf-8格式

			return vm.$u.post(process.uniEnv.xmUrl + '/xxx/xxx', params, header)

		},



### 尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

![](https://img-blog.csdnimg.cn/img_convert/b351ea44442fe442026c0b0aff325bd9.webp?x-oss-process=image/format,png)


		}// 请求头content-type不设置，默认utf-8格式

			return vm.$u.post(process.uniEnv.xmUrl + '/xxx/xxx/v1.0', params, {})

		},

		

		// 设置xxx信息

		setBxxxRequest: (params) => {

			const header = {

				'content-type': 'application/x-www-form-urlencoded'

			}// 请求头content-type不设置，默认utf-8格式

			return vm.$u.post(process.uniEnv.xmUrl + '/xxx/xxx', params, header)

		},



### 尾声

以薪资待遇为基础，以发展为最终目标，要在高薪资的地方，谋求最好的发展！

下面是有几位Android行业大佬对应上方技术点整理的一些进阶资料。

[外链图片转存中...(img-YGnyotD1-1720100569859)]