微信小程序（一）：微信小程序与服务器的简单链接

生活无趣且不易，一起找点乐子吧。欢迎评论，和文章无关的东西也没关系。

 

 

关于小程序的有些问题，我搜索不到太有价值的东西（可能是我对关键字的理解不好）。

在这里我总结下遇到各种问题，可能看来会比较可笑，但对新手来说也许会有些帮助，我会尽量去注重具体的实现。

 

这篇文章来说下小程序和服务器的链接问题，或许有些人会和我一样。二者要链接，知道小程序要向服务器发送带参或不带参请求，然后服务器对其作出反应处理，并将处理结果返回，最后小程序接受并显示。But， how？

不知道怎样让小程序向服务器发送请求，不知道服务器怎样发送消息给客户端，更不知道怎样去接收。主要就是怎样具体实现它，而不是缺理论，我尝试着去解释下。

先简单介绍下服务器的部署吧，了解的请直接略过。 服务器容器Tomcat，编译环境myeclipse。（Eclipse也没关系，可能有些按钮的位置和文章里的不同，查下就好。）

                                                                   

 

（后记：服务端重点了解两部分，servlet和jsp。简单说明servlet处理请求，JSP显示页面。这两块就能实现大部分的功能了。如果不需要界面，JSP也可以省去。）

首先，我们需要知道，请求是向servlet发送的，（微信小程序只支持http协议）换句话说，用JAVA编写的servlet处理客户端请求。

先来看看怎样去创建一个servlet。

在编辑器里，file->new->servlet,然后填相关信息。

 

填写Name，创建的方法点选doget 和 doput就好，因为简单的事例，不用太复杂，了解http的知道，这两种方法分别是处理get和put方法请求的。简单情况下我们不区别对待，所以，完全可以doput函数里只写this.doGet();（让put方法去调用get）。（请求的方式有很多种，get和put是最基本的两种，put请求用于向服务端提交数据，get用于得到指定为的数据。）

建好servlet前一定要写好jsp mapping url，也就是图中第三行内容，这就是客户端请求时需要的url（可以理解成地址，我们打开浏览器输入www.xxxxxx.com，地址栏里这个链接就是url【Uniform Resource Locator】，统一资源定位符）。

当建好后你可以通过项目里webroot文件夹web—inf里的web.xml查看创建情况。

url没问题就可以。打开我们的sevlet，把一些没必要的东西删掉简单些，像这样：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class textServlet extends HttpServlet {


public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");//这里是设置一下编码格式

        System.out.println("收到！");


}



public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

        this.doGet(request, response);

}
}

 

大家可以看到这个servlet的功能就是收到请求后，在控制台打出“收到！”

 

下一步，部署服务器（编辑器不同的按钮位置去搜下~）

 

1————————————————————————————

选择好你的项目工程，选择tomcat服务器，点“ok”（不是tomcat的需要先把服务容器配好，一般搜索下就能找到详细的配置过程，windows - performance里面，选中容器后出现Successful deployed算是没问题，不然你可能需要重新配置下服务器了。）

2————————————————

启动tomcat服务器

启动成功后控制台显示信息

ok，到这里服务器就算布置完了。接下来我们来谈一下什么是客户端，又怎样与服务器建立链接。

 

我们先简单点解释，我觉得，其实我们经常用的浏览器就可以说成客户端。而上面的，我们通常说的网址，就是要发送请求的服务器地址，也就是我们刚刚设置的url。

那么，我们的服务请求的处理已经编写完毕，而且url也已经设置好，tomcat也处于打开状态（也就是处在可以接受请求的状态）。

前面我们说到，向我们编写的那个servlet·发送请求，如果服务器接收到了，服务器端就会在控制台打出那个“收到”。

现在，我们以浏览器为客户端，向刚才我们写的服务端的servlet发送请求，这时候就要用到我们设置的url了。

图例分别是，IP地址：端口，项目名称，servlet的url   因为我们的服务器是本地的，所以是localhost  至于8080是tomcat的端口（不同的服务器容器端口不同），这里不做过多解释，需要的大家去查一下，可以查到。Amess是项目的名称，text就是我们设置的url还记得吗？

（这里补充点内容，在你的DOS窗口下输入ipconfig，就可以看到你的局域网IP地址，上面的localhost就可以换成那个IP。例如https://blog.csdn.net/，这个链接里面的blog.csdn.net不是IP地址，这个东西就是我们经常说的域名，简单理解就是种替换。当我们购买了服务器后，我们只能通过IP去请求它，IP地址就直接公之于众了，也是出于保护吧。我们可以再买个域名，然后把域名和IP绑定，之后我们就可以通过域名来访问。我们都知道百度的域名www.baidu.com，但谁能立马说出来它的IP？上面的localhost理解成自己本机的域名也没有什么问题的。）

ok，当我们敲击回车后，浏览器（客户端）就向我们编写的servlet发送了请求。但是网页却什么也不显示。

这是当然，因为我们对请求的处理就是在服务端控制台输出个“收到”，而如果想在浏览器上显示信息，就是服务器向客户端发送信息了。（不要忘记把浏览器理解成客户端啊）

我们再切换到后台：

可以看到，服务器打出了“收到”，客户端向服务器发送请求没问题。

 

那么，下一步，服务器怎样向浏览器（也就是客户端）发东西呢？

我们需要创建一个printwriter 的对象，通过这个对象， 调用他的print方法，输出想要的内容，不要忘记close，只有关闭了输出流，才能将内容输出。（像许多编程语言中，打开文件后进行编写，close后才能实现保存，如果忘记close直接退出了程序，那写的东西就白写了。）现在我们更新网页，看看效果。

ok，没问题。现在，大家对客户端 向服务器发请求，及服务器向客户端写东西，就基本算是有了大致的了解了。

 

 

你现在可以去冲杯咖啡或者刷下手机，再回来我们就进入主题：小程序和后台服务器的链接

 

 

来具体说，小程序（客户端）怎样去与服务器建立连接。

简单事例，我们只写一个按钮，绑定点击事件click，在js里边来处理事件，向服务器发送请求。（前端界面语言是种标记语言，不是这篇文章的重点，我们不详谈。如果是零基础，可以先去粗略学习下html+css+js。）

js编写click函数功能：

其实很简单，我们需要调用微信提供的一个API，request，用它向服务器发送请求。开发者工具有具体介绍，大家可以去查看，之后就是设置参数，url和浏览器一样，依旧是服务器地址，data内是你要向服务器发送的数据。如图，我们发送了一个数据叫做username,他的值是一个字符串“haha”。success函数就是成功请求服务器，服务器返回后进行的处理，这里我们让他输出res的data内容，res参数（当然名字你可以自定义）是服务器返回的的信息，他的data就是后台返回的数据。我们用console.log函数输出下，这个语句当成print就行（学会类比）。这时重新编译后，点击按钮就可以了。注意，小程序编译时会对协议进行检查，不允许向本地的服务器发送请求的，所以之前要设置下调试模式。（header是请求头信息，不作为主要讲述的内容，感兴趣的可以去查下。）

在开发者工具中右上角的详情里，选择不校验http。（之后的新版本开发者工具，我不确定位置会不会变。）

 

接下来我们来看服务器的编写。

首先我们要获得客户端给我们的username，这时我们要调用request的getParameter函数获取，参数就是数据的名字。如图，那么我们的变量name就得到了客户端发来的username的值，也就是“haha”。

之后，我们向客户端返回数据，这时需要用到write，创建一个write类型变量来返回，调用对象的write函数，参数是要发送的内容，同上记得close。如果你发送的数据过多，一个缓冲流不够用，可以用flush函数，先传送一批，再传送下一批。大家有兴趣自己查询，这里我们返回了“man”字符串，那么客户端的success函数的res.data就应该得到“man”。万事俱备，差你一鼠标。点击按钮吧。看看效果。

 

 

服务器得到username：“haha”（其他的输出是项目里的其他的测试内容，大家自行忽略）

 

客户端获得服务器data：“man”：

现在我们的小程序和服务器就建起了简单的链接，至于传什么数据，又做什么处理，就是你的问题了。

 

 

因为只是个人的闲暇娱乐，从点击量和搜索量上来说，你很难看到这篇文章，如果我有幸让您看到，那也是种缘分吧。有些基础的东西如在本章中说道，不会做过多原理上的解释，您可以去详细查询，或者查看这个系列的其他内容，应该可以帮您滤清一些思路思维上的东西。

这就是我的理解，希望对你有帮助。欢迎讨论，纠错。水平一般，能力有限，撰写不妥之处，多包涵。