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

最新推荐文章于 2024-09-28 11:24:57 发布

前端node资料大全

最新推荐文章于 2024-09-28 11:24:57 发布

阅读量1k

点赞数 25

分类专栏： 2024年程序员学习文章标签： uni-app

本文链接：https://blog.csdn.net/m0_60144796/article/details/137253029

版权

本文介绍了uni-app的小程序开发规范，包括请求协议管理、网络环境切换管理和API集中管理。详细阐述了请求配置、拦截器的使用、环境切换的实现以及API的集中管理方式。此外，还提及了Android开发的学习路径和资源，强调了不断提升技术能力的重要性。

摘要由CSDN通过智能技术生成

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 =