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

2024-05-24 16:04:19

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

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

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

<view bindtap="bindSearchChange"><view>

[javascript] view plain copy

bindSearchChange:function(){
wx.request({
method:"GET", //注意请求方式必须要大写！！！
url:'xxxxxxxxx',
data:{},
header: {'content-type': 'application/json'}, //content-type必须要小写！！！
success: function(res) {
console.log(res)
}
})
}

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

[javascript] view plain copy

var root = 'hxxxxx';//你的域名
function req(url,data,cb){
wx.request({
url: root + url,
data: data,
method: 'POST',
header: {'content-type': 'application/json'},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
}
module.exports = { req: req }

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

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

[javascript] view plain copy

//app.js
var http = require('service/http.js')
App({
onLaunch: function () {
//dosomething
},
func:{
req:http.req
}
})

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

[javascript] view plain copy

var app = getApp()
Page({
data: {
},
onLoad: function (opt) {
app.func.req('/api/get_data',{},function(res){
console.log(res)
});
}
})

目前，小程序还有待完善

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

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

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

微信小程序之网络请求
概述微信网络请求api 小程序宿主环境要求request发起的网络请求必须是https协议请求,因此开发者服务器必须提供HTTPS服务的接口,同时为了保证小程序不乱用任意域名的服务,wx.reque ...
微信小程序常见网络请求失败问题总结及解决方案
微信小程序常见网络请求失败问题总结及解决方案微信开发者工具中未勾选不校验合法域名设置未勾选这个设置在任何环境下发送http网络请求会失败发送的是https请求,但网络请求依旧是失败需要到官方的 ...
HttpUtils工具类 java程序发起网络请求
HttpUtils工具类用于java程序发起网络请求 @Slf4j public class OkHttpUtils {private static final String HTTP_JSON ...
vue-resource网络请求模块（安装教程） - cmd篇
vue-resource网络请求模块(安装教程) - cmd篇安装vue-resource 网络请求模块,用于依赖后端服务器的vuejs项目进行对服务器端数据的请求或跨域请求. cmd安装步骤: 先 ...
你想要的系列：网络请求框架OkHttp3全解系列 - （二）OkHttp的工作流程分析
Okhttp系列文章: 你想要的系列:网络请求框架OkHttp3全解系列 - (一)OkHttp的基本使用你想要的系列:网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析你想 ...
微信小程序封装网络请求并调用
微信小程序开发交流qq群 526474645 正文: util.js // 网络请求 const request = function(url, method, data, msg, succ, ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...
《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
如何编写微信小程序的网络请求的代码
第一步的话就是创建我们的工具类: // todo 在我们的这个位置的话就是设置我们的网络请求得代码 export const request=(params)=>{// 在我们的这个位置的话定义 ...

最新文章

热门文章