51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vue uniapp 项目简单配置笔记

好久没有总结了,今天总结一下。

一.Vue.prototype

如果你要用到Vue.prototype你可以设置在全局变量中,用法也很简单。
比如:
Vue.prototype.$name=balala
使用很简单:console.log(this.$name) 后台就会打印balala。

$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。当然你也可以_(下划线)都可以。

二.简单配置

简单的文件配置,文件与pages同级
set.png
还有一个就是config.js,每个文件都有一个config.js

01.config.js

config.js 主要配置一些路径
config.png

02.http.js**

http.js就是对axios进行封装。

let http = {
    server(url, params, config) {
        // console.log(url, params, config)
        return new Promise((res, rej) => {
            let defaultData = {
                private_key: Config.privateKey,
                is_uniapp: 1,
                // #ifdef H5
                is_h5: 1,
                // #endif
                // #ifdef MP
                is_applet: 1,
                // #endif

            }             let currentData = Object.assign(defaultData, params)             let header = {                 'X-Requested-With': 'XMLHttpRequest',             }             if (uni.getStorageSync('token')) {                 header.Authorization = ${uni.getStorageSync('token')}             }             // 禁止连续点击             if (config.btn) {                 config.btn.showLoading()             }             if (config.loading) {                 uni.showLoading({                     title: '请求中...'                 });             }             let success = (result) => {

                if (result.statusCode != 200 && result.statusCode != 201) {                     rej(result.data)                     if (config.toast !== false) {                         Util.showToast({ title: result.data.message })                     }                     if (result.statusCode == 423) {                         uni.reLaunch({                             url: '/pages/login/index'                         });                         store.dispatch('setToken','');                         if (store.state.socket) {                             store.state.socket.doClose();                         }                     }                                     } else {                     res(result.data)                     if (config.toast) {                         Util.showToast({ title: result.data.message })                     }                 }                 if (config.btn) {                     config.btn.hideLoading()                 }                 if (config.loading) {                     uni.hideLoading();                 }             }             let ajaxConfig = {                 url: Config.baseUrl + '/api' + url,                 method: config.method,                 data: currentData,                 sslVerify: false,                 header: header,                 dataType: config.dataType || 'json',                 responseType: config.responseType || 'text',                 success,                 fail: (result) => {                     rej(result.data)                     if (config.toast !== false) {                         Util.showToast({ title: result.data.message })                     }

                },                 complete: () => {                     if (config.btn) {                         config.btn.hideLoading()                     }                     if (config.loading) {                         uni.hideLoading();                     }                 }             }

            if (config.method !== 'File') {                 uni.request(ajaxConfig);             } else {                 // 文件                 ajaxConfig.filePath = params.file;                 delete currentData.file                 delete currentData['Content-Type']                 ajaxConfig.formData = currentData;                 ajaxConfig.name = params.type || 'images';                 ajaxConfig.success = (res) => {                     res.data = JSON.parse(res.data)                     success(res)                 }                 uni.uploadFile(ajaxConfig);             }

        })     },

    $post(url, params, config) {         return http.server(url, params, Object.assign({ method: 'POST' }, config))     },     $get(url, params, config) {         return http.server(url, params, Object.assign({ method: 'GET' }, config))     },     $del(url, params, config) {         return http.server(url, params, Object.assign({ method: 'DELETE' }, config))     },     $put(url, params, config) {         return http.server(url, params, Object.assign({ method: 'PUT' }, config))     },     $uploadFile(url, params, config) {         return http.server(url, params, Object.assign({ method: 'File' }, config))     },     $test(url, params, config) {         var config = { ...config }         var params = { ...params }         return new Promise((res, rej) => {             if (config.btn) {                 config.btn.showLoading()             }             setTimeout(() => {                 res(params)                 if (config.btn) {                     config.btn.hideLoading()                 }             }, 1500)         })     } }

03.index.js

index.js就是我的全局文件

Vue.prototype.$get = http.$get
Vue.prototype.$post = http.$post
Vue.prototype.$del = http.$del
Vue.prototype.$put = http.$put
Vue.prototype.$test = http.$test
Vue.prototype.$uploadFile = http.$uploadFile
Vue.prototype.$util = Util

吧http里面封装好的方法全局注册,
使用方法this.$XXX就可以了

简单展示一下

login() {
            let data = {
                ...this.form
            }
            
            this.$post('/rider/login', data, { loading: true }).then(res => {
                this.setToken(res.data.token)
                this.setUserInfo(res.data.userInfo)
                this.socket.send({ mode: "say", user_id: res.data.userInfo.id })
                uni.reLaunch({
                    url: "/pages/index/index",
                });
                this.$toast('登录成功');

            })         }

用起来非常的方便。

赞(6)
未经允许不得转载:工具盒子 » vue uniapp 项目简单配置笔记