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


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 相关文章推荐
js函数在frame中的相互调用详解
Mar 03 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
php 数组的一个悲剧?
2011/05/11 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Laravel实现表单提交
2017/05/07 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
进修护士自我鉴定
2013/10/14 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
商场促销活动策划方案
2014/08/18 职场文书
在职员工证明书
2014/09/19 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
企业法律事务工作总结
2015/08/11 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
SQLServer之常用函数总结详解
2021/08/30 SQL Server
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技