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

Posted 2021-09-04 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
}