微信小程序的网络请求 —— 微信小程序教程系列（14）

版权声明：本文为博主原创文章，转载务必注明出处，http://blog.csdn.net/michael_ouyang。 https://blog.csdn.net/michael_ouyang/article/details/55050486

网络请求，基本上是必须的环节之一。

小程序提供了wx.request(object)，与开发者的服务器实现数据交互的一个很重要的api。

最简单的用法如下（以GET请求为例）

<view bindtap="bindSearchChange"><view>

[javascript] view plain copy

1. bindSearchChange:function(){  
2.    wx.request({ 
3.      method:"GET",    //注意请求方式必须要大写！！！
4.      url:'xxxxxxxxx',  
5.      data:{},  
6.      header: {'content-type': 'application/json'},  //content-type必须要小写！！！
7.      success: function(res) {  
8.        console.log(res)  
9.      }  
10.    })  
11.  }  

完整示例：
下面我们把请求写在service文件下的http.js文件中，代码如下

[javascript] view plain copy

1. var root = 'hxxxxx';//你的域名  
2. function req(url,data,cb){  
3.     wx.request({  
4.       url: root + url,  
5.       data: data,  
6.       method: 'POST',  
7.       header: {'content-type': 'application/json'},  
8.       success: function(res){  
9.         return typeof cb == "function" && cb(res.data)  
10.       },  
11.       fail: function(){  
12.         return typeof cb == "function" && cb(false)  
13.       }  
14.     })  
15. }  
16.   
17. module.exports = { req: req }  

其中module.exports是将req方法暴露出去使得别的文件中可以使用该方法，由于js函数是异步执行的，所以return 的是回调函数，而不是具体的数据

为了其他文件方便调用此方法，我们在根目录的app.js文件中将其注册成为全局函数，如下

[javascript] view plain copy

1. //app.js  
2. var http = require('service/http.js')  
3. App({  
4.   onLaunch: function () {  
5.    //dosomething  
6.   },   
7.   func:{  
8.     req:http.req  
9.   }  
10. })  

这时这个req就是全局的了，在调用时我们可以使用getApp.func.req()来调用，具体如下

[javascript] view plain copy

1. var app = getApp()  
2. Page({  
3.   data: {  
4.       
5.   },  
6.   onLoad: function (opt) {  
7.     app.func.req('/api/get_data',{},function(res){  
8.        console.log(res)  
9.     });  
10.   }  
11. })  

目前，小程序还有待完善

其中在网络请求上，还需要注意一些细节：

1> method请求方式，必须要使用大写的GET或POST！！

2> content-type，必须要使用小写，使用大写不能正常发起请求！！

微信小程序教程系列

相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871

注册上线篇

------------------------------------------------------------

微信小程序之如何注册微信小程序

微信小程序之小程序上线

基础篇

------------------------------------------------------------

微信开发者工具的快捷键

微信小程序的文件结构 —— 微信小程序教程系列（1）

微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）

微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

微信小程序的新建页面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序的页面跳转 —— 微信小程序教程系列（6）

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）

微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

微信小程序视图层的模板 —— 微信小程序教程系列（12）

微信小程序之wxss —— 微信小程序教程系列（13）

微信小程序的网络请求 —— 微信小程序教程系列（14）

微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）

微信小程序之组件 —— 微信小程序教程系列（19）

微信小程序之微信登陆 —— 微信小程序教程系列（20）

实战篇

------------------------------------------------------------

微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）

微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）

微信小程序之轮播图实例 —— 微信小程序实战系列（3）

微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）

微信小程序之登录页实例 —— 微信小程序实战系列（5）

微信小程序之自定义toast实例 —— 微信小程序实战系列（6）

微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）

电商篇

------------------------------------------------------------

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）

微信小程序之购物车 —— 微信小程序实战商城系列（5）

未完待续。。。

更多小程序的教程：http://blog.csdn.net/column/details/14653.html