首页 > 热点 > 微信 > 正文

微信小程序网络封装(简单高效)

2024-07-22 01:17:29
字体:
来源:转载
供稿:网友

废话引言

小程序虽然出世很久了,但一直没怎么接触到小程序开发。吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为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
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表