把你的小程序后端也是API，或者你想象成API 的概念是一样

微信小程序的api中提供了网络交互的api，我们只要调用即可和后端进行数据交互，该api为wx.request.，具体代码如下。

1. //list.js  

2. //获取应用实例  

3. var app = getApp()  

4. Page({  

5.   data: {  

6.     list:[],  

7.     hiddenLoading: true,  

8.     url: ''  

9.   },  

10.   loadList: function () {  

11.     var that = this;  

12.     that.setData({  

13.       hiddenLoading: !that.data.hiddenLoading  

14.     })  

15.     var url = app.urls.CloudData.getList;  

16.     that.setData({  

17.       url: url  

18.     });  

19.     wx.request({  

20.       url: url,  

21.       data: {},  

22.       method: 'GET',  

23.       success: function (res) {  

24.         var list= res.data.list;  

25.         if (list == null) {  

26.           list = [];  

27.         }  

28.         that.setData({  

29.           list: list,  

30.           hiddenLoading: !that.data.hiddenLoading  

31.         });  

32.          wx.showToast({  

33.           title: "获取数据成功",  

34.           icon:  'success',  

35.           duration: 2000  

36.         })  

37.       },  

38.       fail: function (e) {  

39.         var toastText='获取数据失败' + JSON.stringify(e);  

40.         that.setData({  

41.           hiddenLoading: !that.data.hiddenLoading  

42.         });  

43.         wx.showToast({  

44.           title: toastText,  

45.           icon:  '',  

46.           duration: 2000  

47.         })  

48.       },  

49.       complete: function () {  

50.         // complete  

51.       }  

52.     }),  

在loadList函数中进行了网络请求，请求的数据放到了data的list中。我们使用setData来修改list，在该函数调用之后，微信小程序的框架就会判断数据状态的变化，然后进行diff判断，如果有变化就渲染到界面中。这个与react.js的渲染方式相似，主要是内部维护了一个类似于虚拟文档的对象，然后通过对虚拟文档的判断来呈现界面，这样可以大大提高性能。

这里我们还做了一个下拉刷新的触发，即onPullDownRefresh函数，为了能够使用下拉刷新，我们需要进行配置，现在我们只需要当前页面生效，所以只要在对应页的json中配置即可，即在list.json中配置。

list.json

[csharp] 

1. {  

2.     "navigationBarTitleText": "产品列表",      

3.     "enablePullDownRefresh":true  

4. }  

如果需要所有的页面的生效，可以在app.json中的window中配置。

app.json

[javascript] 

1. {  

2.   "pages":[  

3.     "pages/index/index",  

4.     "pages/logs/logs",  

5.     "pages/list/list"  

6.   ],  

7.   "window":{  

8.     "backgroundTextStyle":"light",  

9.     "navigationBarBackgroundColor": "#fff",  

10.     "navigationBarTitleText": "WeChat",  

11.     "navigationBarTextStyle":"black",  

12.     "enablePullDownRefresh":true  

13.   }  

14. }  

在app.json中，还有一个pages，我们需要路由的页面都需要在这里注册，否则无法路由到。

在请求数据的时候，加入了等待和获取成功失败的提示。这需要相应的页面配合，页面代码list.wxm.如下

[javascript] 

1. <!--list.wxml-->  

2. <view class="container container-ext">  

3.   <!--默认隐藏-->  

4.   <loading hidden="{{hiddenLoading}}">正在加载</loading>  

5.   <scroll-view scroll-y="true">  

6.     <view>  

7.       <block wx:for="{{list}}" wx:key="no">  

8.         <view class="widget">  

9.           <view>  

10.             <text >{{item.no}}({{item.content}})</text>  

11.           </view>  

12.         </view>  

13.       </block>  

14.     </view>  

15.   </scroll-view>  

16. </view>  

[css] view plain

/**list.wxss**/  

1. .widget {  

2.   position: relative;  

3.   margin-top: 5rpx;  

4.   margin-bottom: 5rpx;  

5.   padding-top: 10rpx;  

6.   padding-bottom: 10rpx;  

7.   padding-left: 40rpx;  

8.   padding-right: 40rpx;  

9.   border: #ddd 1px solid;  

10. }  

[css]  

1. /**app.wxss**/  

2. .container {  

3.   height: 100%;  

4.   display: flex;  

5.   flex-direction: column;  

6.   align-items: center;  

7.   justify-content: space-between;  

8.   box-sizing: border-box;  

9.   padding-top: 10rpx;  

10.   padding-bottom: 10rpx;  

11. }  

最终的呈现效果