UNI-学习之旅

uni-app 学习笔记[1]

1.基础结构搭建

1.1 项目基础机构

项目根名字

• common
• component
• components
• node_modules
• pages
• static
• app.vue
• main.js
• manifest.json
• pages.json
• uni.css
• vue.config.js

1.1.1 项目使用工具及模块介绍

1. vuex 使用 (全局状态工具)
2. uni-simple-router （VUE 路由跳转方法）
3. animation.css （动画工具类）
4. uni-ui ( uni 提供通用组件)

1.1.2 通用Http请求封装

封装 uni.request 请求，添加前置及后置方法，方便后期做数据的统一加密解密，以及权限过滤。同时统一管理后台请求方法,整个封装分以下几个部分：

1.底层http请求声明

2.封装声明后的方法清单

3.管理请求方法及地址清单，方便统一管理请求后台接口

1.底层http请求

/**
 * 封装所有http 请求清单方法
 */
export default class Request {
	/**
	 * 默认请求头设置
	 */
	config = {  //默认配置地址
		url: "", //请求地址
		header: {
			'Content-Type': 'application/json', // 设置当前请求的格式，如需调整需请求传递
			'plateform': 'app' ,// 设置当前请求的平台，方便后期格式化
			'Access-Control-Allow-Origin': '*' ,
		},
		method: 'POST', //默认请求方法 
		dataType: 'josn', //返回数据是否尝试JSON.parse() 解析
		custom: {}, //自定义数据
		timeout:60000,
		data:{} ,
		params:{}

	}
	/**
	 * 过滤器定义处理
	 */
	interceptor = { // 自定义拦截器
		/**
		 * 前置过滤器
		 * @param {前置请求过滤方法} setBeforeHandler 
		 */
		setReqHandler:(setBeforeHandler) => { // 请求钱拦截器
			if(setBeforeHandler){
				this.requestBeforeFun = setBeforeHandler ;
			}
		},
		/**
		 * 后置过滤器
		 * @param {返回数据处理成功函数} setSuccessHandler 
		 * @param {返回数据错误数据函数} setErrorHandler 
		 */
		setRspHandler:(setSuccessHandler , setErrorHandler) =>{ //返回数据拦截器
			if(setSuccessHandler && setErrorHandler){
				this.responseDataFun = setSuccessHandler ;
				this.responseErrFun = setErrorHandler ;
			}	
		}
	}
	/**
	 * 前置请求默认函数
	 * @param {配置参数} config 
	 */
	requestBeforeFun(config) {
		return config ;
	}
	/**
	 * 返回成功数据处理
	 * @param {返回参数} response 
	 */
	responseDataFun( response ){
		return response ; 
	}
	/**
	 * 返回失败数据处理
	 * @param {返回参数}} response 
	 */
	responseErrFun( response ){
		return response ;
	}
	/**
	 * 基础请求方法
	 * @param {Object} options 请求参数
	 */
	async baseRequest (options = {}){
		
		options.url = options.url || this.config.url 
		options.dataType = options.dataType || this.config.dataType 
		options.timeout = options.timeout || this.config.timeout
		options.data = options.data || this.config.data
		options.params = options.params || this.config.params 
		options.header = options.header || this.config.header 
		options.method = options.method || this.config.method
		options.custom = {...this.config.custom, ...(options.custom||{})}
		return  new Promise((resolve,reject) =>{
			let next = true 
			let handleRe = {}
			//请求数据参数组装
			options.complete = (response) =>{
				 response.config = handleRe  //TO-DO ???
				 if(response.statusCode == '200'){
					 response = this.responseDataFun(response)
					 resolve(response)
				 }else if('401' == response.statusCode){
					response = this.responseDataFun(response)
					resolve(response)
				 }else if('500' == response.statusCode){
					resolve(response)
				 }else{
					 response = this.responseErrFun(response)
					 reject(response)
				 }
			}
			// 取消对象数据
			const cancel = (tipMsg ='handle cancel ' , config = options) => {
				const err = {
					errMsg:tipMsg ,
					config:config
				}
				reject(err)
				next = false 
			}
			handleRe = {	...this.requestBeforeFun(options,cancel) }
			const _config = { ...handleRe}
			if(!next) return  
			delete _config.custom
			// 做HTTP请求
			uni.request({..._config})
		})
	}

	/**
	 * 
	 * @param {请求地址} url 
	 * @param {请求参数} options 
	 */
	 post(url , options = {}){
		return  this.baseRequest({url:url, method:"post", ...options})
	}
}

2.封装声明后的方法清单
/**
 * 类用来封装所有http请求 区分 socket https http 同步/异步方法
 */
import Request from './request.js'

export default class Http {
	constructor(arg) {
	    this._request = new Request() ;
		this._request.interceptor.setReqHandler(this.setBeforeHandler) ;//请求数据前置
		this._request.interceptor.setRspHandler(this.setSuccessHandler,this.setErrorHandler);//返回数据前置处理
	}
	/**
	 * 设置前置请求
	 */
	 setBeforeHandler(config , cancel ) {
		 // 添加请求前置处理 
		 //1. 鉴权 ，前置数据加密，前置数据会话处理
		console.info("请求数据前置方法【setBeforeHandler】=【{}】",config)
		return config ;
	}
	//返回数据成功数据
	setSuccessHandler(response){
		console.info("返回数据前置方法【setSuccessHandler】=【{}】",response)
		return response ;
		 
	}
	//返回数据错误数据
	 setErrorHandler( response ){
	    console.info("返回数据前置方法【setErrorHandler】=【{}】",response)
		return response ;
	}
    // 对外提供的方法，可以添加参数做前置封装
	  _post(url,data = {}){
		return  this._request.post(url,{'data':data});
	}
}

3.统一请求方法清单
import Http from './http.js'
import {MANAGE_URL} from '../utils/urlConfig.js'

export default class uniUtils {
	constructor(arg) {
	   this._http = new Http();
	}
	/**
	 * 获取页面模块数据
	 */
	 getPageMoudles( data = {} ){
		return  this._http._post(MANAGE_URL+'micro/models/getPageModels',data)
	}
}

1.1.3 基础路由引入

路由使用 uni-simpl-router 可以做全局跳转监控，方便做权限及数据预加载 ，uni-simple-router 参考官网（https://hhyang.cn/v2/start/quickstart.html） 目前使用2.0 版本，最新的。

1.1.4 Vuex 引入

Vuex 可以做全局状态管理，节省使用不同端的缓存机制，Vuex 参考官网（https://vuex.vuejs.org/zh/）

Tip： 本人使用vuex 踩到的坑

在做map 数组引入时，不要使用空的数组，如果引入的是空的就不要引入了，否则小程序初始化的时候会报 toJSON 错误，这个很坑，对于新手来说需要排查好久，例子及报错如下
    比如引入了 ... mapActions([]) 引入了空的数组，具体底层代码没有看，但是感觉应该是解构的时候，uni 处理空数组的时候，没有做空的处理，所以报错了。
export default {
	components:{},
	data() {
		return {
			plateform:"",
			bgColor:""
		};
	},
	methods: {
		 // ...mapActions([ //对象展开运算符直接拿到add
		 // ]) 	
	},
	computed:{
		 ...mapState({ //引入全局的数据 eg:username: state => state.username
			page(state){  return state.page ;} 
		})
		// ...mapGetters([ //获取数据使用
		// 	'getPlateform2'
		// ]),
		// ...mapMutations([ //全局获取缓存数据 存储使用
		// 	"addPlateform"
		// ])
	}
};
</script>

错误信息：
Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property '_renderProxy' closes the circle
    at JSON.stringify (<anonymous>)
    at cloneWithData (mp.runtime.esm.js?66fd:5619)
    at VueComponent.patch [as __patch__] (mp.runtime.esm.js?66fd:5632)
    at VueComponent.Vue._update (mp.runtime.esm.js?66fd:3959)
    at VueComponent.updateComponent (mp.runtime.esm.js?66fd:5700)
    at Watcher.get (mp.runtime.esm.js?66fd:4419)
    at Watcher.run (mp.runtime.esm.js?66fd:4495)
    at flushSchedulerQueue (mp.runtime.esm.js?66fd:4251)
    at Array.<anonymous> (mp.runtime.esm.js?66fd:1984)
    at flushCallbacks (mp.runtime.esm.js?66fd:1913)

还没写完，暂时先传这些