前一篇章已经介绍了如何简单去实现一个小程序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数组对象中去，代换原来写死的数据
})
}
})
当我们重启调试时就会发现数据在加载时就已经更新了，如果不行的话，应该是还有一些小细节没有写好，导致数据显示不出来。
网友评论