装置npm依赖
npm install uview-ui 开发环境请将 http.interceptor.js 文件中的 baseUrl: appconfig.serverUrl, 加上条件编译,如下
// #ifndef H5 baseUrl: appconfig.serverUrl,// #endif开发环境跨域配置vue.config.js
正式环境能够将 http.interceptor.js 文件中的 baseUrl: appconfig.serverUrl 条件编译去掉 变成如下模式
baseUrl: appconfig.serverUrl,后续更换域名同样批改 vue.config.js 和 config.js 中的域名
main.js
import Vue from 'vue'import App from './App'import store from './store'import * as utils from '@/common/utils.js'import uView from "uview-ui";Vue.use(uView);import cuCustom from 'colorui/components/cu-custom.vue'Vue.component('cu-custom',cuCustom)Vue.config.productionTip = falseVue.prototype.$store = storeVue.prototype.$utils = utilsApp.mpType = 'app'const app = new Vue({ ...App})// http拦截器，此为须要退出的内容，如果不是写在common目录，请自行批改引入门路import httpInterceptor from '@/common/http.interceptor.js'// 这里须要写在最初，是为了等Vue创建对象实现，引入"app"对象(也即页面的"this"实例)Vue.use(httpInterceptor, app)// http接口API集中管理引入局部import httpApi from '@/common/http.api.js'Vue.use(httpApi, app)app.$mount()config.js
//配置文件放这里吧export default { apiurl:'', serverUrl:"",//服务器接口api地址,本地跨域配置临时用空 imageUrl:"",//服务图片加载地址 imgupload:"",//图片上传地址 appid:""//公众号appid }http.api.js
import appconfig from './config.js'// 如果没有通过拦截器配置域名的话，能够在这里写上残缺的URL(加上域名局部)let loginUrl="" //登录// 此处第二个参数vm，就是咱们在页面应用的this，你能够通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍局部：// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9Fconst install = (Vue, vm) => { // 应用传入的params参数 let login = (params = {}) => vm.$u.post(loginUrl, { username:params.username, password:params.password }); // 将各个定义的接口名称，对立放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下 vm.$u.api = {login};}export default { install}http.interceptor.js
//引入配置文件import appconfig from './config.js'// 这里的vm，就是咱们在vue文件外面的this，所以咱们能在这里获取vuex的变量，比方寄存在外面的token变量const install = (Vue, vm) => { // 此为自定义配置参数，具体参数见上方阐明 Vue.prototype.$u.http.setConfig({ baseUrl: appconfig.serverUrl, loadingText: '致力加载中~', loadingTime: 800, // 在此工夫内，申请还没回来的话，就显示加载中动画，单位ms originalData: false, // 是否在拦截器中返回服务端的原始数据 false时服务器状态码不为200，会modal弹框提醒 loadingMask: true, // 展现loading的时候，是否给一个通明的蒙层，避免触摸穿透 showLoading: true, // 是否显示申请中的loading // 设置为json，返回后会对数据进行一次JSON.parse() dataType: 'json', // 配置申请头信息 header: { 'content-type': 'application/json', } }); // 申请拦挡，配置Token等参数 Vue.prototype.$u.http.interceptor.request = (config) => { // 援用token console.log("申请拦挡:",config); // 形式一，寄存在vuex的token，假如应用了uView封装的vuex形式 // 见：https://uviewui.com/components/globalVariable.html // config.header.token = vm.token; // 形式二，如果没有应用uView封装的vuex办法，那么须要应用$store.state获取 // config.header.token = vm.$store.state.token; // 形式三，如果token放在了globalData，通过getApp().globalData获取 // config.header.token = getApp().globalData.username; // 形式四，如果token放在了Storage本地存储中，拦挡是每次申请都执行的 // 所以哪怕您从新登录批改了Storage，下一次的申请将会是最新值 const token = uni.getStorageSync('token'); config.header.token = token; // 能够对某个url进行特地解决，此url参数为this.$u.get(url)中的url值 // if(config.url == '/user/login') config.header.noToken = true; // 最初须要将config进行return return config; // 如果return一个false值，则会勾销本次申请 // if(config.url == '/user/rest') return false; // 勾销某次申请 } // 响应拦挡，判断状态码是否通过 Vue.prototype.$u.http.interceptor.response = (res) => { // console.log("响应拦挡:", res); //临时就间接诶返回吧 return res; // if(res.code == 200) { // // res为服务端返回值，可能有code，result等字段 // // 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到 // // 如果配置了originalData为true，请注意这里的返回值 // return res.result; // } else if(res.code == 201) { // // 假如201为token生效，这里跳转登录 // vm.$u.toast('验证失败，请从新登录'); // setTimeout(() => { // // 此为uView的办法，详见路由相干文档 // vm.$u.route('/pages/user/login') // }, 1500) // return false; // } else { // // 如果返回false，则会调用Promise的reject回调， // // 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值 // return false; // } }}export default { install}