uView项目准备

项目准备工作

---

接口文档获取路径

说明文档：

略

---

操作步骤：

一、新建uview项目

下载解压：https://cdn.uviewui.com/uview/resources/uView-cli.zip

二、引入uView # Http请求

在根目录下新建/common/http.interceptor.js文件，代码如下：

const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		//baseUrl: 'https://api.shop.eduwork.cn', 
		//method: 'POST',
		dataType: 'json',
		showLoading: true, 
		loadingText: '请求中...', 
		loadingTime: 800, 
		originalData: true, // 是否在拦截器中返回服务端的原始数据
		loadingMask: true, 
	});
	
	// 请求拦截，配置Token等参数
	Vue.prototype.$u.http.interceptor.request = (config) => {
		// config.header.Authorization = "Bearer"+vm.access_token	
		//config.header.Authorization = "Bearer" + vm.vuex_token
		config.header.Token = 'xxxxxx';	
		return config;	
	}
	
	// 响应拦截，判断状态码是否通过
	Vue.prototype.$u.http.interceptor.response = (res) => {
		
		}
	}
}

export default {
	install
}

三、测试index接口

测试入口api,语法如下：

onLoad() {
	this.$u.get("").then(res=>{
		console.log(res)
	})

//同步

//const res = await this.$u.get("/api/index")
//console.log(res)
	}

四、API集中管理

在根目录新建/common/http.api.js,语法如下：

const install = (Vue, vm) => {
	vm.$u.api = {}	
	//vm.$u.api.index = (params = {}) => vm.$u.get('/api/index', params);
	//vm.$u.api.goodsCollect = (id) => vm.$u.post(`/api/collects/goods/${id}`)
}

export default {
	install
}

引入,main.js中进行挂载,语法如下：

// 其他已有内容
const app = new Vue({
  ...App
})

// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)

// http接口API集中管理引入部分
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)

app.$mount()

五、vuex

新建’/store/index.js’，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

let lifeData = {};

try{
	// 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的
	lifeData = uni.getStorageSync('lifeData');
}catch(e){
	
}

// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 保存变量到本地存储中
const saveLifeData = function(key, value){
	// 判断变量名是否在需要存储的数组中
	if(saveStateKeys.indexOf(key) != -1) {
		// 获取本地存储的lifeData对象，将变量添加到对象中
		let tmp = uni.getStorageSync('lifeData');
		// 第一次打开APP，不存在lifeData变量，故放一个{}空对象
		tmp = tmp ? tmp : {};
		tmp[key] = value;
		// 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
		uni.setStorageSync('lifeData', tmp);
	}
}
const store = new Vuex.Store({
	// 下面这些值仅为示例，使用过程中请删除
	state: {
		vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : ''
	},
	mutations: {
		$uStore(state, payload) {
			// 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
			let nameArr = payload.name.split('.');
			let saveKey = '';
			let len = nameArr.length;
			if(nameArr.length >= 2) {
				let obj = state[nameArr[0]];
				for(let i = 1; i < len - 1; i ++) {
					obj = obj[nameArr[i]];
				}
				obj[nameArr[len - 1]] = payload.value;
				saveKey = nameArr[0];
			} else {
				// 单层级变量，在state就是一个普通变量的情况
				state[payload.name] = payload.value;
				saveKey = payload.name;
			}
			// 保存变量到本地，见顶部函数定义
			saveLifeData(saveKey, state[saveKey])
		}
	}
})

export default store

新建/store/$u.mixin.js，代码如下：

// $u.mixin.js

import { mapState } from 'vuex'
import store from "@/store"

// 尝试将用户在根目录中的store/index.js的vuex的state变量，全部加载到全局变量中
let $uStoreKey = [];
try{
	$uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
	
}

module.exports = {
	created() {
		// 将vuex方法挂在到$u中
		// 使用方法为：如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
		// 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
		this.$u.vuex = (name, value) => {
			this.$store.commit('$uStore', {
				name,value
			})
		}
		
	},
	computed: {
		// 将vuex的state中的所有变量，解构到全局混入的mixin中
		...mapState($uStoreKey)
	}
	
}

最后：http请求引入vuex

地址如下：https://v1.uviewui.com/guide/globalVariable.html

最后

小结：完成以上5个操作步骤就可以正式写项目了~~