废话引言
小程序虽然出世很久了,但一直没怎么接触到小程序开发。吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中。虽然小程序面向的是前端工程师,但作为移动端程序猿感觉甚是友好,加上有点前端基础就更是觉得入手很easy啦。
微信小程序的网络请求很便捷,直接调用就可以了。但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好?
利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess:请求成功回调, onFailed:请求失败回调, 意思就是字面意思~
netUtil.js 网络请求工具封装
在utils目录下创建一个netUtil.js文件
/** * 供外部post请求调用 */function post(url, params, onStart, onSuccess, onFailed) { request(url, params, "POST", onStart, onSuccess, onFailed);}/** * 供外部get请求调用 */function get(url, params, onStart, onSuccess, onFailed) { request(url, params, "GET", onStart, onSuccess, onFailed);}/** * function: 封装网络请求 * @url URL地址 * @params 请求参数 * @method 请求方式:GET/POST * @onStart 开始请求,初始加载loading等处理 * @onSuccess 成功回调 * @onFailed 失败回调 */function request(url, params, method, onStart, onSuccess, onFailed) { onStart(); //request start wx.request({ url: url, data: dealParams(params), method: method, header: { 'content-type': 'application/json' }, success: function (res) { if (res.data) { /** start 根据需求 接口的返回状态码进行处理 */ if (res.data.error_code == 0) { onSuccess(res.data); //request success } else { onFailed(res.data.msg); //request failed } /** end 处理结束*/ } }, fail: function (error) { onFailed(""); //failure for other reasons } })}/** * function: 根据需求处理请求参数:添加固定参数配置等 * @params 请求参数 */function dealParams(params) { return params;}module.exports = { postRequest: post, getRequest: get,}
小案例使用说明:笑话大全接口
简要描述:用户注册接口
请求URL:http://v.juhe.cn/joke/content/list.php
请求方式:GET
参数:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
sort | 否 | string | 降序“des”,升序“asc” |
page | 否 | int | 页数,默认1 |
pageSize | 否 | string | 默认每页加载20条数据 |
time | 是 | string | 时间戳10位 |
key | 是 | string | appkey |
新闻热点
疑难解答