共计 3079 个字符，预计需要花费 8 分钟才能阅读完成。
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 req6. 在 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 api7. 在 vue 模板中应用, 在 methods 中增加如下代码:
chengeth5(){api.getfeng({name:'陈',age:'100'}).then((res)=>{console.log(res);
})
},8. 在 onLoad 中增加如下代码:
// #ifdef H5
this.chengeth5();
// #endif9. 运行到浏览器, 成果如下:
9-1. 传参成果为:
10. 当初咱们来证实一下这个封装在微信端能应用吗? 在 onLoad 中增加如下代码:
// #ifdef MP-WEIXIN
this.chengeth5();
// #endif11. 成果如下:
咱们看到了同样的办法在 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();
// #endif17. 运行到浏览器成果如下:
咱们看到这个图, 咱们晓得微信封装的数据申请在 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();
// #endif20. 运行到 h5 端, 成果为:
21. 运行到微信小程序, 成果为:
22. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!
