微信小程序入门（二）UI框架

上一章介绍了微信小程序的UI框架 weui-wxss 这章就谈谈微信小程序的数据交互---wx.request 
官方文档中明确说明，wx.request发起的是https的请求，如果你的服务器是http站点，那需要做配置。可以参考文章：http转https教程 
但如果你没有服务端或者不想写后台代码，在这里是可以调用我提供的接口，本文中会介绍使用方法。

首先，我们应该从服务端开始准备，我用的是Java。框架是spring+springMVC+spring data 。 
接口 https://www.itit123.cn/itdragon/findAll 的controller层 源码：

1. @RequestMapping(value="findAll")
2. @ResponseBody
3. public Object listWxDatas(@RequestParam(value = "page", defaultValue = "1") int pageNumber,
4. @RequestParam(value = "pageSize", defaultValue = PAGE_SIZE) int pageSize,
5. @RequestParam(value = "sortType", defaultValue = "auto") String sortType,
6. ServletRequest request){
7. pageSize = pageSize > 10? 10 : pageSize;
8. try {
9. Map<String, Object> searchParams = Servlets.getParametersStartingWith(request, "search_");
10. Page<WxData> WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);
11. List<Map<String, Object>> resultList = new ArrayList<Map<String,Object>>();
12. for (WxData WxData : WxDatas) {
13. Map<String, Object> resultMap = new HashMap<String, Object>();
14. resultMap.put("id", WxData.getId());
15. resultMap.put("title", WxData.getTitle());
16. resultMap.put("content", WxData.getContent());
17. resultMap.put("src", WxData.getImageUrl());
18. resultMap.put("time", WxData.getCreatedDate());
19. resultList.add(resultMap);
20. }
21. return gson.toJson(resultList);
22. } catch (Exception e) {
23. e.printStackTrace();
24. }
25. return null;
26. }

代码大致逻辑是一次最多查10条数据，并以id降序排序输出结果。代码并没有把整个对象放在一个集合中，而是把需要的内容（id，文章标题，预读内容，主图，创建时间）放在一个map，在放到集合转成json格式返回数据。（注：该代码只针对于现在的需求（查询数据），后续做下拉刷新，上拉加载，搜索排序时，可能会修改代码 。分页查询：）。  如果先要看后端全部代码：参考http://blog.csdn.net/qq_19558705/article/details/52251519  服务端接口代码准备好后，不能着急上线测试，可以用google浏览器的 postman。

查看打印结果，以确保成功 

然后开始在微信小程序端，准备一个测试页面来进行数据交互。  test.wxml：

1. <view>
2. <textarea value="{{textdata}}"/>
3. </view>
4. <button bindtap="RequestData" value="Button">request</button>

test.js：

1. Page({
2. data: {
3. textdata: "测试 wx.request",
4. },
5. RequestData: function () {
6. var that = this;
7. wx.request({
8. url: 'https://www.itit123.cn/itdragon/findAll',
9. data: {},
10. method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
11. // header: {}, // 设置请求的 header 默认是application/json
12. success: function (res) {
13. // 操作json数据
14. var text ="";
15. for(var i in res.data) {
16. text += i + "." + res.data[i].title + "\r\n";
17. }
18. that.setData({ textdata: text});
19. },
20. fail: function () {
21. // fail
22. },
23. complete: function () {
24. // complete
25. }
26. })
27. },
28. onLoad: function (options) {
29. // 页面初始化 options为页面跳转所带来的参数
30. },
31. onReady: function () {
32. // 页面渲染完成
33. },
34. onShow: function () {
35. // 页面显示
36. },
37. onHide: function () {
38. // 页面隐藏
39. },
40. onUnload: function () {
41. // 页面关闭
42. }
43. })

测试页面的效果图： 

测试没有问题，那就在list.js中修改代码。  对于wx.request请求，这篇博客中有进行简单的封装。http://blog.csdn.net/chenbalala/article/details/53045480  可以根据自己的需要修改。（我只是将func改成了ajax）

1. // pages/list/list.js
2. var app = getApp();
3.  
4. Page({
5. data:{
6. msgList:[]
7. },
8. onLoad:function(options){
9. // 页面初始化 options为页面跳转所带来的参数
10. var that = this
11. app.ajax.req('/itdragon/findAll',{},function(res){
12. that.setData({
13. msgList:res
14. })
15. });
16. },
17. onReady:function(){
18. // 页面渲染完成
19. },
20. onShow:function(){
21. // 页面显示
22. },
23. onHide:function(){
24. // 页面隐藏
25. },
26. onUnload:function(){
27. // 页面关闭
28. }
29. })

因为返回的数据结构，正好是我需要的格式，所以直接赋值了。  效果图： 

这章学习点：  1.wx.request 的使用 微信官方文档 。  2.如何给变量赋值 var that = this; that.setData({变量名：变量值})。  3.开发的思路。