写在前面

之前写了一篇《微信小程序实现各种特效实例》,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题。总的来说,收获了不少吧!

现在项目已经完成,还是要陆陆续续总结一下的,总结的过程也是对知识梳理和清晰的过程!

这次主要聊一下小程序前后端接口对接的一些事,

对于客户端与服务端接口的对接,微信小程序提供了wx.request()的API接口,完美的实现前端后台的对接

一个简单的子:

 wx.request({
url: API_URL + '/api/category/categoryList',
data: {
applet_id: app.globalData.applet_id
},
method: 'POST',
success: function (res) {
wx.hideLoading();
console.log(res.data.data, 'category data acquisition success');
            that.setData({category: res.data.data});
}
});

在控制台中也得到了我想要的接口中的数据:

但期间也遇到了几个问题,总结下来;

1)网络请求与域名的合法性

微信小程序包括四种类型的网络请求:

  • 普通HTTPS请求(wx.request)

  • 上传文件(wx.uploadFile)

  • 下载文件(wx.downloadFile)

  • WebSocket通信(wx.connectSocket)

关于“URL 域名不合法,请在后台配置后重试”的错误

小程序只允许与合法配置的域名进行数据交互

进入微信公共平台=>设置=>开发设置:设置需要交互的域名

2)对于接口调用http和https的问题

对于这一个问题,在之前来说,微信公共平台支持使用http测试项目,但是正式发布需要使用https的域名,

但是前几天看到了微信公众平台发的一则公告:

应该是要封杀http方式调用了,公告链接:为保证数据传输安全,提高业务安全性,公众平台将不再支持HTTP方式调用(时间2017年9月21日)

3)关于method以及data数据

微信小程序多地方都严格区分大小写,所以要注意method的value需要为大写,request的默认的超时时间都是60s;

对于data数据,上次我们从接口中拿到的数据是json格式的,最终发送给服务器的数据是String类型,如果传入的 data 不是 String 类型,会被转换成 String 。

文档中提供的转换规则如下:

  • 对于 header['content-type'] 为 application/json 的数据,会对数据进行 JSON 序列化

  • 对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据,会将数据转换成 query string;

(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)

这个工作在我们设置header头为application/x-www-form-urlencoded后,在后面为我们进行。

4)关于GET和POST请求

根据HTTP的规范,get是用于信息获取,post表示可能修改服务器的资源的请求

对于小程序post请求:'application/json'用在get请求中没有问题,但是用在POST请求中不好使了,content-type 默认为 'application/json';

所以使用post请求时,将content-type设置为 application/x-www-form-urlencoded

写在后面

总结了以上四个问题,应该是比较常见也是容易遇到的,欢迎补充和指正,另外文档中api模块还有一些需要注意的问题,

项目我们在github已同步:StackOverflowChen;欢迎来访哟;

参考资料

[1] https://mp.weixin.qq.com/debug/wxadoc/dev/api/

[2] http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html

调用wx.request接口时需要注意的几个问题的更多相关文章

  1. 【小程序】调用wx.request接口时需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  2. 【微信小程序】调用wx.request接口需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  3. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  4. 小程序调用wx.chooseLocation接口的时候无法获取权限(ios)

    ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需 ...

  5. 调用微信退款接口时出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法

    我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应 ...

  6. 调用微信退款接口时,证书验证出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法

    1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应用程序池-->右击-->高级设置- ...

  7. 微信小程序如何调用API实现数据请求-wx.request()

    前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...

  8. 前端页面调用Spring boot接口发生的跨域问题

    最近要重构一个基于spring boot的后端API服务,需要再本地测试.在本地测试时,运行在本地的前端页面发送一个ajax请求访问后端API,然后浏览器报错blocked CORS policy. ...

  9. 微信小程序 带参调用后台接口 循环渲染页面 wx.request wx:for

    test.js 文件里的onLoad function getarticles(p,order,mythis) { wx.request({ url: 'https://ganggouo.cn/ind ...

随机推荐

  1. 固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异

    固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异 在看这篇文章之前可以先看一下下面的文章: SSD小白用户收货!SSD的误区如何解决 这样配会损失性能?实测6种特殊装机方式 听说固态 ...

  2. 运维利器万能的 strace

    strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进程状态变更等. ...

  3. python容错

    #try: except: else: #为什么叫容错呢,先说说错误,这里说的错误并不是因为马虎或者什么原因在脚本中留下的bug,这个不能容掉,所谓容掉就是略过这个错误,要在测试时候发现并修正,需要容 ...

  4. inotify+rsync的组合使用简单介绍

    inotify简介: inotify是一种强大的.细粒度的.异步的文件系统事件监控机制,linux内核从2.6.13起,加入了inotify支持,通过inotify可以监控文件系统添加.删除.修改.移 ...

  5. Beta阶段总结博客

    Beta阶段的规划 1.完善并做完阿尔法版本 2.美化界面 3.规格化GIt的使用 4.新增登录注册功能 5.与服务器端有了交互,实现了前后端的对接 6.增加了一些特效 7.每个人分了模块并且最后对于 ...

  6. BZOJ3211:花神游历各国(线段树)

    Description Input Output 每次x=1时,每行一个整数,表示这次旅行的开心度 Sample Input 4 1 100 5 5 5 1 1 2 2 1 2 1 1 2 2 2 3 ...

  7. php 基于redis计数器类

    本文引自网络 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 本文将使用其incr(自增),get(获取), ...

  8. ConsenSys/eth-lightwallet(browserless)

    https://github.com/ConsenSys/eth-lightwallet LightWallet A minimal ethereum javascript wallet.一个小型的钱 ...

  9. day3-作业及答案

    作业:1.用python实现冒泡排序# [50,20,30,10]## 升序:谁大谁交换到后面# 降序:谁大谁交换到前面## 以升序为例# 第1趟:# [20,50,30,10]# [20,30,50 ...

  10. PAT A1009 Product of Polynomials (25 分)——浮点,结构体数组

    This time, you are supposed to find A×B where A and B are two polynomials. Input Specification: Each ...