微信小程序和服务器通信

作者: 一斤代码 | 来源:发表于2016-10-31 16:24 被阅读11851次

    如果你的小程序需要和远程的服务进行交互,比如访问你自己的或别人提供的远程API来操作数据(增删改查),那么你就需要一种和远程服务器进行通信的机制来完成这样的功能。

    基于浏览器的Web开发中,目前主要有2种主流的服务器通信方式:

    1. 通过Ajax发起HTTP请求访问REST API
    2. 通过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服务器,并在小程序中使用它。

    谢谢大家阅读本文。

    相关文章

      网友评论

      • 1812c15ab41c:大佬,为啥我写好本地服务器以后,在微信小程序运行去请求数据,报错显示非合法服务器???
        一斤代码:本地服务器的话,需要在设置里勾选“不校验安全域名,TLS版本以及HTTPS证书”
      • 90778746588b:你好大佬,这篇文章对于我这种服务器小白来说有点难以操作,sails、node、npm是一窍不通啊。第一步就卡住了,可以教一下第一步是什么意思么
        90778746588b:@一斤代码 谢谢您的解答,很清楚。我还在摸索这一块。
        一斤代码:
        node是基于JavaScript的服务器端编程语言
        npm是一种JavaScript的包管理工具,用于方便的下载安装第三方JavaScript库
        sails是一种node实现的服务器端开发框架,可以方便的实现如Rest API, websocket等后端服务。

        你说的第一步是指npm install -g sails么?这个就是用npm来下载安装sails这个服务器端开发框架。

        如果你之前没有接触过服务器端开发的话,确实理解起来还是需要点时间的。
      • 一斤代码:我们的高质量前端开发者微信群【前端精修社】欢迎前端开发者加入:
        http://www.jianshu.com/p/d9a0202bd257
      • 沉睡的古莲:通俗易懂
      • CodingTech:写得很好,赞👍

      本文标题:微信小程序和服务器通信

      本文链接:https://www.haomeiwen.com/subject/gbkputtx.html