在 WordPress 网站的后台,我已经提前添加了一些文章 .. 下面我们在小程序里面去请求 WordPress 的 REST 接口,去得到这个内容列表 ..
先打开小程序的首页 .. 在 pages/index/index.js .. 先在页面的上面我们可以去定义一下接口的地址 .. const API_BASE .. 它的值是小程序接口的基本部分 .. 就是网站的地址,后面加上 /wp-json https://wp-dev.ninghao.net/wp-json
再定义接口的路由部分 .. const API_ROUTE .. 文章列表路由是 wp/v2/posts
onLoad
然后在小程序的 onLoad 这个生命周期方法里,去请求一下接口地址 .. 用一下 wx.request() .. 一个对象参数,配置一下这个请求 .. 设置一下 url ,对应的值就是要请求的地址 .. 一个字符模板 .. 先是接口的基础部分 . 这里用 API_BASE 来表示 .. 斜线 .. 后面加上路由部分 .. 这里用 API_ROUTE 表示 ..
请求成功会调用 success .. response 是请求之后得到的响应 ..
可以把它输出到控制台上看一下 .. 保存一下 ..
预览
在小程序开发者工具的控制台上会输出请求得到的数据 . 具体的数据是在 data 这个属性里面 .. 这里的东西就是 WordPress 网站里面的文章列表 ..
除了 data,响应里面还有 header .. 就是请求响应回来的头部信息 .. 响应的状态码在 statusCode 这个属性里 .. 我们可以利用这个状态码来做一些判断 ..
数据
再回到编辑器 .. 调整一下窗口 ..
得到了数据以后我们可以在页面的视图里用一下 .. 我们可以把得到的数据放在页面的 entities 里面.. 在 data 里面,添加一个 entities ,先让它等于一个空白的数组 ..
然后回到请求之后的 success 回调,添加一个 entities ,让它的值等于 response.data ..
再用一下 this.setData 设置一下页面的数据,让 entities 等于 entities .. 可以简单的写成一个 entities ..
这里还得改一下这个 success 的写法 .. 用一个箭头函数 .. 不要在 success 里面, this 这个关键词 表示的不是页面,而是这个方法本身 ..