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

装置 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}