微信小程序Ajax加载远程数据 - 文章教程

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

发布于 2017-07-07 字数 2278 浏览 4034 评论 0

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

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

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

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

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

展开中间的 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 () {
  }
})

我刚开始使用的时候,调用 pagesetData 方法总是报错,然后添加 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的点语法查找到下面的子元素。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0