关于uniapp(基于uView框架开发)的一些js文件配置

yinuo_2
安装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 = false

Vue.prototype.$store = store
Vue.prototype.$utils = utils

App.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%9F
const 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
}
阅读 374

2 声望
0 粉丝
0 条评论
你知道吗?

2 声望
0 粉丝
宣传栏