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


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实现文字向下滚动完整实例
Feb 06 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python 3.8 新功能全解
2019/07/25 Python
python如何操作mysql
2020/08/17 Python
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
关键字final的用法
2013/10/02 面试题
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
乡下人家教学反思
2014/02/01 职场文书
北体毕业生求职信
2014/02/28 职场文书
培训讲师岗位职责
2014/04/13 职场文书
幸福家庭标语
2014/06/27 职场文书
2015年质检工作总结
2015/05/04 职场文书