乐趣区

关于uni-app:uniapp中h5端和小程序数据请求封装和传参

jiezi

1. 开发环境 uni-app
2. 电脑系统 windows10 业余为版
3. 在应用 uni-app 开发的过程中, 咱们须要数据申请, 然而应用 uni-app 框架自带的申请形式咱们须要写很多反复的代码, 我进行了封装, 心愿对你有所帮忙, 为什么要封装 h5 端数据申请还要封装微信端的数据申请, 上面会有所解释!
4. 封装前的数据申请办法:

chengeth5(){return new Promise((resolve,reject)=>{
                uni.request({
                    url:'/api/feng', // 申请接口
                    method:'post',  // 申请办法
                    data:this.ChenindexconOnj,// 传递的参数
                    success:(res)=>{// console.log(res);// 输入申请到的数据
                        resolve(res);
                    },
                })
            })
        },

5. 对 h5 端数据申请封装, 在 pages 目录下新建 h5hhtp 文件, 在文件下新建一个 h5hhp.js, 增加如下代码:

function req(obj) {return new Promise((resolve, reject) => {
        // const HOST = baseUrl;
        const HOST = 'http://192.168.137.78:3000';  // 申请后盾地址
        var method = obj.method || "GET"; // 申请形式, 默认为 GET
        var url = HOST + obj.url || "";
        var url =  obj.url || "";
        var data = obj.data || {};
        var header = obj.header || obj.method == ('post' || 'POST') ? {'Content-Type': obj.contentType || 'application/x-www-form-urlencoded',} : {'Content-Type': obj.contentType || 'application/json',};
        var success = obj.success; // 胜利回调函数
        var fail = obj.fail; // 示意失败后，要执行的回调函数
        uni.request({
            url: url,
            data: data,
            method: method,
            header: header,
            success: ((res) => {if (res.statusCode === 203) {console.log('返回 203 状态码')
                    // 错误处理，返回登录页
                    // uni.reLaunch({url:'/pages/login/index'})
                } else if (res.statusCode === 200) {resolve(res)
                }
            }),
            fail: ((err) => {reject(err)
            })
        })
    })
}
export default req

6. 在 http 目录同级, 新增 api 文件, 在 api 目录下, 新建一个 api.js, 增加代码如下:

import req from '../h5http/h5http.js'  // 导入封装的 h5 数据申请
let api = {};

// 申请数据
// getfeng 示意办法名; data 示意参数;method 示意申请办法 ;url 示意申请接口
api.getfeng = data => {
    return req({
        url: '/api/feng',
        method: 'post',
        data: data
    })
};

export default api

7. 在 vue 模板中应用, 在 methods 中增加如下代码:

chengeth5(){api.getfeng({name:'陈',age:'100'}).then((res)=>{console.log(res);
            })
},

8. 在 onLoad 中增加如下代码:

// #ifdef H5
this.chengeth5();
// #endif

9. 运行到浏览器, 成果如下:

9-1. 传参成果为:

10. 当初咱们来证实一下这个封装在微信端能应用吗? 在 onLoad 中增加如下代码:

// #ifdef MP-WEIXIN
this.chengeth5();
// #endif

11. 成果如下:

 咱们看到了同样的办法在 h5 端就没问题, 然而在 微信端不行, 所以我才会对 h5 数据申请和微信端的数据申请进行了不同的封装

12. 对微信端数据申请封装, 在 pages 同级新增 wxhttp, 在文件 wxhttp 下新增 wxhttp.js, 增加代码如下:

const BASE_URL='http://192.168.137.78:3000';
export const myRequest=(options)=>{return new Promise((resolve,reject)=>{
        uni.request({
            url:BASE_URL+options.url,// 申请接口
            method:options.method || 'GET', // 申请办法, 默认为 GET
            data:options.data || {}, // 传递的参数
            success:(res)=>{if(res.statusCode !==200){  // 做一个判断, 如果 http 状态返回的不是 200, 示意数据申请失败了
                    return uni.showToast({title:'获取数据失败'})
                }
                resolve(res)
            },
            fail:(err)=>{
                uni.showToast({title:'申请接口失败'})
                reject(err)
            }
        })
    })
}

13 把微信封装的数据申请挂载到全局, 在 main.js 中增加如下如下:

import {myRequest} from 'wxhttp/wxhttp.js';
Vue.prototype.$myRequest=myRequest;

14. 在 vue 模板中华应用, 在 methods 中增加如下代码:

async chenwxget(){
    let res=await this.$myRequest({
        url:'/feng', // 申请接口
        method:'post', // 申请形式
        data:this.chenWxObj, // 传递的参数
    })
    console.log(res);
},

15. 把我的项目运行到微信小程序, 成果如下:

15-1. 传参成果为:

16. 咱们把封装的微信申请办法, 简略的批改, 运行到 h5 端, 在 onLoad 中增加如下代码:

// #ifdef MP-WEIXIN
this.chenwxget();
// #endif

17. 运行到浏览器成果如下:

 咱们看到这个图, 咱们晓得微信封装的数据申请在 h5 是不能应用的,h5 端封装的申请不能在微信端应用, 所以我才对 h5 端数据申请和微信端数据申请进行了不同的封装。

18. 解决办法, 在 onLoad 中应用条件编译, 应用不同的数据申请封装, 在 methods 中增加代码如下:

chengeth5(){api.getfeng({name:'陈',age:'100'}).then((res)=>{console.log(res);
    })
},

async chenwxget(){
let res=await this.$myRequest({
    url:'/feng',
    method:'post',
})
console.log(res);
},

19. 在 onLoad 中增加如下代码:

// #ifdef H5
this.chengeth5();
// #endif
// #ifdef MP-WEIXIN
this.chenwxget();
// #endif

20. 运行到 h5 端, 成果为:

21. 运行到微信小程序, 成果为:

22. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

退出移动版