一斤代码深入理解系列(三):微信小程序和服务器通信
如果你的小程序需要和远程的服务进行交互,比如访问你自己的或别人提供的远程API来操作数据(增删改查),那么你就需要一种和远程服务器进行通信的机制来完成这样的功能。
基于浏览器的Web开发中,目前主要有2种主流的服务器通信方式:
- 通过Ajax发起HTTP请求访问REST API
- 通过WebSocket进行实时通信
小程序框架提供了一套自己的API,实现了跟以上2种方式基本等同的服务器访问方法。由于无论是调用REST API,还是WebSocket通信,都是基于http协议的,为了保证安全性,小程序框架规定在生产环境下,只能使用安全的http协议,即HTTPS,这个也是一个大趋势。而在开发环境下,为了方便起见,我们还是可以用普通的http协议来做开发调试的。
HTTP请求
小程序框架提供了一个名为wx.request()的方法,用于发起HTTP请求,不过值得注意,小程序对并发请求数量限制在了5个。
这个wx.request()方法的用法跟我们用jQuery里面的ajax方法十分的相似:
wx.request({ url: 'https://your-domain/test', method: 'GET', data: { param1: 'foo' , param2: 'bar' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) }})
借这个机会,我们用node.js来写一个正真的提供REST API服务的服务器端程序,并用小程序的API来连接测试一下。在这里我选用Sails框架来实现这个REST API Server。
首先我们安装sails的命令行工具,在你的命令行工具输入:
npm install -g sails
安装完成后,建立一个新的项目目录,比如叫rest-server,然后进入该目录,执行以下命令:
sails new --no-linker --no-frontend
它会在当前的rest-server目录下,生成一堆代码。这样,一个提供REST服务的node.js服务器程序的架子就基本有了。
代码结构
但是它里面还没有包含任何可用的REST API,我们需要自行添加。让我们在api/controllers目录下新建一个UsersController.js的文件,然后添加如下内容:
UsersController.js
这个文件会被自动映射成REST API,访问路径为/users/list,如果不做任何额外配置,那么这个API可以用任何HTTP Method去访问,如果我们想要限定它只能以GET方式访问,那么我们可以去config/routes.js中进行如下配置:
routes.js
好,一个非常简单的,可以用GET方式访问的REST API就完成了,我们来把这个服务器运行起来,在rest-server目录下,运行命令:
sails lift
成功启动后,就可以在1337端口进行访问了。我们可以直接在浏览器中输入网址测试一下我们写的API:
在网页中测试API
看上去我们的REST API已经在工作了。那好,我们就在小程序中,试着去调用这个REST API:
小程序调用逻辑
如果我们成功获取到这个API返回的数组数据,我们就在小程序界面里将它们显示出来:
小程序模板
这个是实际的运行效果:
运行结果
好了,这就是关于小程序调用REST API的一个非常简单的例子,实际的项目中,可能要复杂一些,但是万变不离其宗。
WebSocket
有些应用场景下,我们会对页面的实时性有要求,在浏览器的Web页面开发中,使用WebSocket API去连接一个提供WebSocket服务的服务器端,是目前的主流方案。
在浏览器中,我们直接使用WebSocket对象,然后调用这个对象上的一些方法和监听该对象发出的一些事件。而微信小程序框架提供的是一系列的函数,不过,两者在概念上基本是一样的,所以熟悉WebSocket的朋友不会对其陌生。
小程序的WebSocket API
在下一篇的文章里,我将继续讲解如何建立一个基于node.js的WebSocket服务器,并在小程序中使用它。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 以太坊合约静态分析工具Slither简介与使用
- Cesium第一次搭建环境出不来地球的问题
- 小知识:解决EXP-00003的报错
- Mysql5中Packet for query is too large (3396053 > 1048576),数据量太大解决方案
- 关于 servlet 的这个问题,你能答对吗?
- MYSQL数据优化常用配置参数
- Hadoop分块存储解析及还原分块存储的文件
- ValueError: too many values to unpack (expected 2)
- VMware15更新后克隆Centos7发现网卡起不来了
- 基于SSH的医院在线挂号
- Linux-远程拷贝(scp命令)
- Kettle使用JavaScript代码处理数据
- Hadoop入门---(wordcount)统计单词出现的次数
- JS去除字符串的空格
- insertionSoft(插入排序) 2.1-1 And 重写insertionSoft 2.1-2