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


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 Dialog 实践分享
Oct 22 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
Node.js编码规范
Jul 14 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
js实现秒表计时器
Dec 16 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 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程序?
2006/12/08 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python如何查看微信消息撤回
2018/11/27 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python实现KNN分类算法
2019/10/16 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python十进制转二进制的详解
2020/02/07 Python
学习党章思想汇报
2014/01/07 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
伊琍体标语
2014/06/25 职场文书
PHP解决高并发问题
2021/04/01 PHP