一、网络请求的封装
根据thorUI开源框架给出的代码进行封装,还有如果需要token来请求的话,需要自己去获取token,然后写到
代码:
const tui = {
delayed: null,
//接口地址
interfaceUrl: function() {
return 'https://www.thorui.cn'
},
/**
* 请求数据处理
* @param string url 请求地址
* @param string method 请求方式: GET or POST
* @param {*} postData 请求参数
* @param bool isDelay 是否延迟显示loading
* @param bool isForm 数据格式-> true: 'application/x-www-form-urlencoded'; false:'application/json'
* @param bool hideLoading 是否隐藏loading-->true: 隐藏 false:显示
*/
request: function(url, method, postData, isDelay, isForm, hideLoading, useToken) {
//接口请求
let loadding = false;
// console.log("请求==",tui.interfaceUrl() + url,useToken)
tui.delayed && uni.hideLoading();
clearTimeout(tui.delayed);
tui.delayed = null;
if (!hideLoading) {
tui.delayed = setTimeout(() => {
uni.showLoading({
mask: false,
title: '请稍候...',
success(res) {
loadding = true
}
})
}, isDelay ? 1000 : 0)
}
return new Promise((resolve, reject) => {
uni.request({
url: tui.interfaceUrl() + url,
data: postData,
header: {
'content-type': isForm ? 'application/x-www-form-urlencoded' : 'application/json',
'Authorization': useToken ? tui.getToken() : ''
},
method: method, //'GET','POST'
dataType: 'json',
success: (res) => {
console.log("请求tool成功", res)
clearTimeout(tui.delayed)
tui.delayed = null;
if (loadding && !hideLoading) {
uni.hideLoading()
}
resolve(res.data)
},
fail: (res) => {
clearTimeout(tui.delayed)
tui.delayed = null;
tui.toast("网络不给力,请稍后再试~")
reject(res)
}
})
})
},
}
//对外导出方法
module.exports = {
request: tui.request,
}
// 使用代码(可以只写前面的三个参数) :
// let postData = {}
// util.request("/Home/GetStatus", "GET", postData, true, null, false, false).then((res) => {
// console.log(res)
// if (res.code == 100) {
// console.log()
// } else {
// }
// }).catch((res) => {
// console.log("请求失败", res)
// })
怎么在其他地方使用:
const util = require('@/utils/requestTool.js');
// 使用代码(可以只写前面的三个参数) :
// let postData = {}
// util.request("/Home/GetStatus", "GET", postData, true, null, false, false).then((res) => {
// console.log(res)
// if (res.code == 100) {
// console.log()
// } else {
// }
// }).catch((res) => {
// console.log("请求失败", res)
// })
二、全局样式
在App.vue的style标签里面可以写入全局的样式,在其他的类中都可以直接调用,不需要引用。
如果想引入别人的样式作为全局样式:
在App.vue的style标签里添加:@import ‘./common/app.css’;
结构图:
三、全局变量
以下是 App.vue 中定义globalData的相关配置:
<script>
export default {
globalData: {
text: '111222'
}
}
</script>
js中操作获取值globalData的方式如下: getApp().globalData.text
js中操作赋值globalData的方式如下: getApp().globalData.text = ‘test’
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。
globalData是简单的全局变量,如果使用状态管理,请使用vuex(main.js中定义)
四、传值
1、全局变量形式(参照上面第三点)—略
2、使用vuex状态管理工具来传值
第一、安装npm install vuex --save
第二、新建一个store.js,如下图
代码为:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
name: 'Mr Wang'
};
const mutations = {
newName(state, msg) {
state.name = msg
}
}
export default new Vuex.Store({
state,
mutations
})
第三、在main.js里加上import store from ‘./store/store.js’; 和 挂载 store
第四、存值:
this.$store.commit('newName',"我是===")
第五、取值
let aa=this.$store.state.name
3、使用localStorage来传值(比较方便简单)
存:localStorage.setItem(‘tolist’,“需要传的值hello world!!”);
取:let aa=localStorage.getItem(‘tolist’)
如果是数组需要使用数组转字符串:JSON.stringify(list),在需要取的地方再使用字符串转数组