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


Posted in Javascript onAugust 06, 2018

废话引言

小程序虽然出世很久了,但一直没怎么接触到小程序开发。吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为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

返回示例

{
 "error_code": 0,
 "reason": "Success",
 "result": {
  "data": [
   {
    "content": "某先生是地方上的要人。一天,他像往常一样在书房里例览当日报纸,突然对妻子大声喊道:喂,安娜,你看到今天早报上的流言蜚语了吗?真可笑!他们说,你收拾行装出走了。你听见了吗?安娜、你在哪儿?安娜?啊!",
    "hashId": "90B182FC7F74865B40B1E5807CFEBF41",
    "unixtime": 1418745227,
    "updatetime": "2014-12-16 23:53:47"
   },
   {
    "content": "有一天我看着报纸,小声嘟囔着一篇文章的题目鸟儿也有外语,丈夫听了对了一句:鸟儿当然也有‘外遇'。原来丈夫听错了,我笑得前仰后合。",
    "hashId": "206F5C52FD2ED94772CBC66C8AC61F2A",
    "unixtime": 1418745227,
    "updatetime": "2014-12-16 23:53:47"
   }
  ]
 }
}

小程序页面js文件中引入netUtil

var netUtil = require("../../utils/network.js"); //require引入
Page({
 data: {
 jokeList: {}
 },

 onLoad: function (options) {
 var url = "http://v.juhe.cn/joke/content/list.php";
 var params = {
  sort: "",
  page: 1,
  pagesize: 5,
  time: "1418816972",
  key: "746dfdb4cd8445d30a8f915fd2b5f76b",
 }

 netUtil.getRequest(url, params, this.onStart, this.onSuccess, this.onFailed); //调用get方法情就是户数
 },

 onStart: function () { //onStart回调
 wx.showLoading({
  title: '正在加载',
 })
 },
 onSuccess: function (res) { //onSuccess回调
 wx.hideLoading();
 this.setData({
  jokeList: res.result.data //请求结果数据
 })
 },
 onFailed: function (msg) { //onFailed回调
 wx.hideLoading();
 if (msg) {
  wx.showToast({
  title: msg,
  })
 }
 },
})

在wxml文件中绑定请求的笑话大全列表:jokeList

<view>
 <block wx:for="{{jokeList}}" wx:for-item="item" wx:key="idx">
 <view class='joke_container'>
  <text>{{item.content}}</text>
 </view>
 </block>
</view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
json字符串传到前台input的方法
Aug 06 #Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 #Javascript
react-native使用leanclound消息推送的方法
Aug 06 #Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 #Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 #Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 #Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 #Javascript
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
汉字转化为拼音(php版)
2006/10/09 PHP
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python 开发Activex组件方法
2009/11/08 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python中enumerate函数代码解析
2017/10/31 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
一文读懂Python 枚举
2020/08/25 Python
python性能测试工具locust的使用
2020/12/28 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
法律进机关实施方案
2014/03/12 职场文书
鸿星尔克广告词
2014/03/21 职场文书
学生个人评语大全
2015/01/04 职场文书
千手观音观后感
2015/06/03 职场文书
学生会干部任命书
2015/09/21 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python