热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要介绍了微信小程序网络封装(简单高效),微信小程序的网络请求很便捷,直接调用就可以了。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

废话引言

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


 
 
  {{item.content}}
 
 

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


推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • 微信答题小程序的设计与实现详解
    本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • jmeter实践:从csv中获取带引号的数据详情的技巧和运行全部数据的方法
    本文分享了jmeter实践中从csv中获取带引号的数据的解决办法,包括设置CSV Data Set Config和运行脚本获取数据的方法。另外还介绍了循环运行csv中全部数据的解决方法,避免每次修改csv用例都需要修改脚本的麻烦。通过了解和掌握工具的细节点,可以更好地解决问题和提高技术水平。 ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 企业数据应用挑战及元数据管理的重要性
    本文主要介绍了企业在日常经营管理过程中面临的数据应用挑战,包括数据找不到、数据读不懂、数据不可信等问题。针对这些挑战,通过元数据管理可以实现数据的可见、可懂、可用,帮助业务快速获取所需数据。文章提出了“灵魂”三问——元数据是什么、有什么用、又该怎么管,强调了元数据管理在企业数据治理中的基础和前提作用。 ... [详细]
  • 如何查询zone下的表的信息
    本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求,并提供了请求示例。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • EPPlus绘制刻度线的方法及示例代码
    本文介绍了使用EPPlus绘制刻度线的方法,并提供了示例代码。通过ExcelPackage类和List对象,可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ... [详细]
  • 2016 linux发行版排行_灵越7590 安装 linux (manjarognome)
    RT之前做了一次灵越7590黑苹果炒作业的文章,希望能够分享给更多不想折腾的人。kawauso:教你如何给灵越7590黑苹果抄作业​zhuanlan.z ... [详细]
  • 手把手教你使用GraphPad Prism和Excel绘制回归分析结果的森林图
    本文介绍了使用GraphPad Prism和Excel绘制回归分析结果的森林图的方法。通过展示森林图,可以更加直观地将回归分析结果可视化。GraphPad Prism是一款专门为医学专业人士设计的绘图软件,同时也兼顾统计分析的功能,操作便捷,可以帮助科研人员轻松绘制出高质量的专业图形。文章以一篇发表在JACC杂志上的研究为例,利用其中的多因素回归分析结果来绘制森林图。通过本文的指导,读者可以学会如何使用GraphPad Prism和Excel绘制回归分析结果的森林图。 ... [详细]
author-avatar
兴哥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有