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

微信小程序的外部链接必须使用HTTPS安全链接，比较麻烦。大多数网站都没有这个功能。我用的是奇牛云，提供SSL安全链接的CDN加速，可以放一些静态文件。

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

我们可以在不填写AppID的情况下创建一个新项目，然后保存路径。选中在当前目录下创建快速启动项目，开发工具会为我们创建一个简单的项目结构。

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

展开中间页面文件夹，点击index.js编辑右边的文件。这个页面是我们的行为控制文件，包括加载数据、小程序事件等操作。将我们的Ajax代码添加到onLoad:函数()上加载的回调函数中{}:

onLoad:函数(){

var page=this

wx.request({

URL : ' https://SSL . wenjigs.com/post . JSON '，

data: {}，

方法： 'GET '，

成功：功能(res) {

page.setData({

wp_post:res.data

})

},

fail: function () {

},

complete: function () {

}

})

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

这里需要注意的是，访问成功后，匿名函数的参数res不是我们请求的具体数据，而是res.data，和我们一般的Ajax请求有点不同。最后，我们向applet的页面发送一个wp_post变量，然后我们需要输出这个变量：

查看wx : for=' { { WP _ post } } ' wx : for-item=' item ' wx : key=' key ' wx : for-index=' id '

{ { id } } : { { item . title . rendered } }

/view

如果您使用过模板引擎，您应该熟悉上面的语法。不同的是微信小程序使用wx:for做循环代码，可以定义索引和元素项，通过JS的点语法找到下面的子元素。