小程序之数据对接

前一篇章已经介绍了如何简单去实现一个小程序WXML和WCSS等，实现了基本页面的编辑。然而这些数据都是写死的，即不能随着数据的改变而改变。接下来着篇章将带来的是如何去实现对接服务器端的数据，从而实现数据变换、页面的数据更新等。内容不多，但是也是学习过程中的重要一步。

实现一个服务器接口

要实现与服务器数据对接，首先当然得有个接口先了，对于搭建服务器等，可以根据我之前的篇章一步步走来。实现一个接口简而单之就是实现一个Servlet,也就是doGet()和doPost()方法，然后本篇章用的json数据是通过用java类对象来转换成json数据的，对于转换方法也可以去找我之前的篇章。具体实现我们来看下列代码：

 package wechat;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import net.sf.json.JSONArray;



public class wechatserver extends HttpServlet {

/*
 * 
 */
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
      doPost(request,response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
      response.setContentType("text/html;charset=utf-8");
      List<wechatUser> userList = new ArrayList<wechatUser>();
       wechatUser wuser1=new wechatUser(1,"测试小程序","abcdefgh","2017-12-9");
       wechatUser wuser2=new wechatUser(2,"微信","wechatsmalldemo","2017-12-9");
       wechatUser wuser3=new wechatUser(3,"wechat","微信小程序","2017-12-9");
       userList.add(wuser1);
       userList.add(wuser2);
       userList.add(wuser3);
       // 把集合转换成json数据
       JSONArray json=new JSONArray().fromObject(userList);
        String  sjson=json.toString();
        PrintWriter out = response.getWriter();
        out.write(sjson);
        out.flush();

     }
}

这样我们就把接口实现好了，然后我们就可以发布在Tomcat上，就完成了第一步，而这个数据不是从数据库读取的，所以实现起来还是比价简单，后续章节会逐步去完善小程序该有的功能。

小程序端获取数据

对于这一部分，我们还是得看官方发布的文档，官方文档上都会有些示例，如何去使用请求的API，如下图所示，这是网络请求的一个示例。

文档示例

解释一下这段代码wx.request({....})发起请求对象;其中URL为发起请求的接口地址，比如我们刚才实现的接口'http://ip/wechatservlet/wechatserver';data参数也就请求时代的参数；
header开发者服务器返回的 HTTP Response Header；success函数，按照官方文档的说法，当请求成功时，获取的数据将会存在res对象中。当我们拿到数据后如何把数据渲染到视图层呢？小程序提供了一个方法setData（）把数据渲染到视图成。具体实现看下列代码：

 onLoad: function (options) {
var that = this;    
//console.log(options.id);
wx.request({
  url: 'http://ip/wechatservlet/wechatserver', //仅为示例，并非真实的接口地址
  data: {  //x,y为请求参数
//    id:options.id
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success: function (res) {
    //console.log(res.data);
    that.setData({
      temp: res.data  //把数据传给该请求页面的pages下data下自定义的temp数组对象中去，代换原来写死的数据
    })
  }
})

当我们重启调试时就会发现数据在加载时就已经更新了，如果不行的话，应该是还有一些小细节没有写好，导致数据显示不出来。