微信小程序Ajax加载远程数据

Question

小程序的容量是有限制，最大不超过2M，而我们有很多的资源，这时候就只能通过远程地址来加载数据，微信小程序定义了 wx.request() 方法，可以轻松Ajax加载远程数据。

微信小程序的外部链接必须使用HTTPS安全链接，这点比较麻烦，一般网站都没有这样的功能，我使用七牛云，他提供了SSL安全链接的CDN加速，可以放置一些静态的文件。

首先我们需要下载微信小程序的开发工具，可以到这里：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 下载，选择适合你电脑操作系统的最新版本，双击安装即可使用。

我们先新建一个项目AppID可以不填写，然后是保存的路径，勾选在当前目录中创建 quick start 项目，开发工具会为我们创建一个简易的项目结构。

展开中间的 page 文件夹，点击 index.js 在右侧编辑文件，这个页面就是我们的行为控制文件，包括加载数据、小程序的事件等操作，在 onLoad: function () {} 页面加载完成的回调函数里面，添加我们 Ajax 代码：

onLoad: function () {
var page = this;
wx.request({
  url: 'https://ssl.wenjiangs.com/posts.json',  
  data: {},
  method: 'GET',
  success: function (res) {
    page.setData({
      wp_post:res.data
    })
  },
  fail: function () {
  },
  complete: function () {
  }
})

我刚开始使用的时候，调用 page 的 setData 方法总是报错，然后添加 var page = this 以后就正常了，应该是 page 变量作用域的问题。

这里需要注意的是，访问成功后，匿名函数的参数 res 并不是我们请求到的具体数据，而 res.data 才是，这个和我们一般的Ajax请求有点区别，最后我们发送一个 wp_post 变量到小程序的页面中，接下来我们需要输出这个变量：

<view wx:for="{{wp_post}}" wx:for-item="item" wx:key="key"  wx:for-index="id">
{{id}}:{{item.title.rendered}}
</view>

如果你使用过模版引擎，那么上面的语法你应该不会陌生，唯一有点区别的就是微信小程序使用 wx:for 循环代码，可以定义索引和元素项，通过JS的点语法查找到下面的子元素。