一斤代码深入理解系列(三):微信小程序和服务器通信

如果你的小程序需要和远程的服务进行交互,比如访问你自己的或别人提供的远程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服务器,并在小程序中使用它。

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2016-11-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏喵了个咪的博客空间

[喵咪BELK实战(2)] elasticsearch+kibana搭建

[喵咪BELK实战(2)] elasticsearch+kibana搭建 ? 前言 上一节我们介绍了日志系统和BELK之后就要到激动人心的安装环境了,实践出真知...

36670
来自专栏云计算教程系列

如何在Ubuntu 16.04上使用Apache和mod_wsgi为Django应用程序提供服务

Django是一个功能强大的Web框架,可以帮助您快速启动Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码,但是对于任何...

17200
来自专栏C/C++基础

Linux命令(21)——cd命令(builtin)

cd命令是shell的内建命令(bash builtin),用来切换工作目录至指定的目录dirname。 其中dirname可以是绝对路径或相对路径。若目录名称...

7310
来自专栏北京马哥教育

开机启动流程

grub and boot Centos5,6的开机启动流程 grub Centos7的开机启动流程 Centos5,6的开机启动流程 ? ? initrd /...

40970
来自专栏Go 语言编程

aurora - 跨平台 Beanstalk 消息队列服务器管理工具

aurora 是一个基于 Web 的 Beanstalk 消息队列服务器管理工具,单文件无需依赖其他组件,支持管理本地和远程多个队列服务器。

60770
来自专栏电光石火

eclipse配置tomcat运行时访问路径不要项目名称

1:双击打开tomcat 2:选择Modules,选择你要修改的项目 ? 3:点击Edit,把path修改成空或者你自己想要的路径即可! ?

31860
来自专栏空木白博客

分享5个网址二维码API接口

它们只需要填写好网址就能自动生成二维码,分别来自与bshare和jiathis分享工具中,如您需要就把下面的二维码生成API接口复制到你需要地方。

48420
来自专栏小二的折腾日记

Linux用户管理

此时可以看到,shadow文件中,第二个存密码的位置是一个!,此时新建的账户还没有密码,当然也可以看到home目录下没有mianhk1的文件夹,此时需要先改密...

17230
来自专栏玄魂工作室

Hacker基础之Linux篇:进阶Linux命令三

objdump命令是Linux下的反汇编目标文件或者可执行文件的命令,当然,它还有其他作用

11130
来自专栏我是攻城师

如何通过JMX远程监控Solr?

30360

扫码关注云+社区

领取腾讯云代金券