排行榜 统计
  • 建站日期:2017-05-08
  • 文章总数:446 篇
  • 评论总数:6393 条
  • 分类总数:25 个
  • 最后更新:10月9日

vue uniapp 项目简单配置笔记

本文阅读 2 分钟
广告

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

一.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('登录成功');

            })
        }

用起来非常的方便。

您的大名:
万水千山总是情,给个打赏行不行。 打赏
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/2332/
以太坊ETH挖矿教程,快速入门上手
« 上一篇 02-21
门罗币网页挖矿教程,最简单的电脑和手机挖矿方式
下一篇 » 02-24
广告

发表评论

成为第一个评论的人

作者信息

卑微页面仔
作者有点忙,还没写简介
发表文章 14 篇
最新文章

热门文章

标签TAG

热评文章