更新记录

1.0.0(2023-05-18) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.7 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

request

介绍

uniapp封装请求类,轻量级promise请求库,支持多域名,支持一键切换正式、测试接口地址,方便测试人员调试,支持自定义header,支持配置loading,支持vue2,vue3,nvue,支持async+await

安装教程 使用 HBuilderX 导入插件

1. 使用方法:

最重要!!!和pages目录同级新建config文件夹,下面新建config.js 内容如下

import request from '@/js_sdk/gc-request/index.js'

export const config = {
    baseUrl:'', // 默认接口地址前缀 无需设置
    baseUrl2:'http://baidu.com', // 其他接口地址前缀,为了兼容多个域名或者第三方服务接口
    testUrl :'http://test.com',// 测试地址前缀
    productionUrl:'http://pro.com', // 正式地址前缀
    loginPage : '/pages/login/login', // 服务器statusCode返回401强制跳转的登录页
    ossUrl:'', // 图片地址前缀
    header:{
        name:'Authorization', // 自定义header的名称
        StorageName:'token' // 自定义header的值,一般为缓存,这里的token对应的就是uni.getStorageSync('token') 
    },
    /*
    注意!!!
     这里无需写header里无需配置content-type,插件以封装好,上面配置好的请求头实际对应的是
     header:{
        'content-type': 'application/json',// 或者 application/x-www-form-urlencoded
        Authorization: uni.getStorageSync('token')
     }
     content-type的不同值是根据api.js里调用不同的方法决定的 调用get和post默认都是'content-type': 'application/json',调用postForm 的content-type为 application/x-www-form-urlencoded
    */
    changeEnv(){
        if (process.env.NODE_ENV === 'development') {
            // 开发环境 运行
            this.baseUrl = uni.getStorageSync('baseUrl') || this.testUrl; 
            this.ossUrl = '';
        } else {
            // 生产环境 发行
            this.baseUrl = uni.getStorageSync('baseUrl') || this.productionUrl;
            this.ossUrl = '';
        }
    }
}
config.changeEnv() 
export const http =  new request(config.loginPage)

和config目录同级新建api文件夹,新建api.js或者api.ts,用来集中管理api

import { http,config } from '@/config/config.js'
// 使用方法如下,根据header不同调用不同方法,get、post、postForm 
//get和post默认都是'content-type': 'application/json',postForm 的content-type为 application/x-www-form-urlencoded
//方法接收三个参数1、api(接口地址全路径),data(参数),loadingTxt(可选,如果加了就显示uni.showLoading,不加就不显示)
class User {
    // 微信登录
    login(data){
        return http.post(config.baseUrl + '/transport_order/driver/wechat_login',data,'登录中...')
    }
    // 其他地址 就传config.baseUrl2 
    getWeather(data){
        return http.get(config.baseUrl2 + '/api/get_weather',data)
    }
    // postForm
    getMap(data){
        return http.postForm(config.baseUrl + '/transport_order/driver/wechat_login',data)
    }
}
export const user = new User();

在登录页面login.vue中使用

    //vue2写法
        import { user } from '@/api/login'
        data() {
                return {
                        info:{
                            name:'ssss',
                            password:'123456'
                        }
                    }
                },
                methods:{
                    async toLogin() {
                        const res = await user.login(this.info)
                        if(res.success){
                            console.log('登录成功')
                        }else{
                            uni.showModal({
                                title:res.msg,
                                showCancel:false
                            })
                        }
                    }

                }

    //vue3写法    
    <script setup>

        import { reactive,toRefs } from 'vue'
        import { user } from '@/api/login'
        const data = reactive({
            num:0,
            info:{
                name:'ssss',
                password:'123456'
            }
        })
        const{ num } = toRefs(data) // 解构

        // 登录
        const toLogin = async () => {
            const res = await user.login(data.info)
            if(res.success){
                console.log('登录成功')
            }else{
                uni.showModal({
                    title:res.msg,
                    showCancel:false
                })
            }
        }

    </script>

切换正式、测试环境 示例代码,自己根据自己需求修改(一般写在登录页,注意!!!!退出登录后记得清除缓存)

<template>
    <view>
        <image src="../../static/logo.png" mode="" class="logo" @click="showChange" v-if="num !== 7"></image>
        <image src="../../static/logo.png" mode="" class="logo" v-else></image>
        <button v-if="num === 7" @click="changeEnvironment" style="margin: 20px;">切换环境</button>
        <button @click="toLogin">登录</button>
    </view>
</template>
<script setup >
    import { reactive,toRefs } from 'vue'
    import { user } from '@/api/login'
    import {config} from '@/config/config'
    const data = reactive({
        num:0,
        info:{
            name:'ssss',
            password:'123456'
        }
    })
    const{ num } = toRefs(data) // 解构

    // 登录
    const toLogin = async () => {
        const res = await user.login(data.info)
        if(res.success){
            console.log('登录成功')
        }else{
            uni.showModal({
                title:res.msg,
                showCancel:false
            })
        }
    }

// 点击logo7次弹出切换接口地址按钮
const showChange = () => {
    if(data.num == 7){
        return
    }else{
        data.num ++;
    }
}   
// 一键切换接口地址  注意!!!!退出登录后记得清除缓存
const changeEnvironment = () => {
    uni.showActionSheet({
        itemList: ['测试环境', '生产环境'],
        success: async res => {
            if (!res.tapIndex) {
                uni.showModal({
                    title:'您已切换为测试环境',
                    showCancel:false
                })
                config.baseUrl = config.testUrl
                uni.setStorageSync('baseUrl',config.testUrl)
            } else {
                uni.showModal({
                    title:'您已切换为正式环境',
                    showCancel:false
                })
                config.baseUrl = config.productionUrl
                uni.setStorageSync('baseUrl',config.productionUrl)
            }
        }
    });
}
</script>
<style>
    .logov {
        padding: 180rpx 0;
    }
    .logo {
        width: 280rpx;
        height: 280rpx;

    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问