WordPress REST API实现微信小程序评论功能

重要:本文最后更新于2019-05-24 08:31:15,某些文章具有时效性,若有错误或已失效,请在下方留言或联系九月网

前面简单介绍了下微信小程序中使用WordPress rest api实现评论功能的相关接口,可能有些朋友已经知道了,上一篇文章是为这篇文章做铺垫,只有知道相关api接口,我们才能做功能。写这篇文章是因为之前写了一点儿关于微信小程序的教程,之前写得比较简单,有些朋友追问更高级的功能写法,于是就写下了这几篇关于微信小程序中使用WordPress REST API实现评论功能的教程,有问题欢迎留言,如果你有需要的教程也可以留言告诉我,我会及时更新。

先看看完成评论功能的截图

WordPress REST API实现微信小程序评论功能

WordPress REST API实现微信小程序评论功能

 

WordPress REST API实现微信小程序评论功能

WordPress REST API实现微信小程序评论功能

从第一张图可以看到,在文章末尾列出来3条评论。可能比较难看,因为我没有写样式,所以看不出来格式。别怪我不写样式,因为我css很弱,写起来太浪费时间,大家将就看看吧。右边是点击提交按钮后的响应内容,可以看到编辑框的内容已经成功提交。

注意:评论提交需要权限,如何授权请看JWT Authentication插件为WordPress REST API验证用户权限

第二张图是WordPress后台的截图,评论信息和我们在微信小程序中提交的一模一样,没有问题,来看看怎么实现的。

教程接前面的使用wxParse插件为WordPress微信小程序制作详情页,代码也是接着的。

在详情页的wxml布局文件中,新增评论列表标签以及评论表单,代码如下:

    
      {{item.author_name}}
      {{item.content.rendered}}
      {{item.date}}
    



    
     

然后在js文件中,加入如下代码:

/**
* 页面的初始数据
*/
data: {
postid:0,
comlist:null
},

这里设置两个变量,一个是文章id,一个是评论列表数据。然后在onload方法中发起获取文章内容和文章评论请求。

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("id",options.id);
var that = this;
that.setData({
postid: options.id
});
//获取文章内容
wx.request({
url: '域名/wp-json/wp/v2/posts/' + options.id,
data: {
},
header: {
'content-type': 'application/json'// 默认值
},
success(res) {
console.log(res.data)
WxParse.wxParse('article', 'html', res.data.content.rendered, that, 5);
}
})
//获取评论数据
wx.request({
url: '域名/wp-json/wp/v2/comments?post=' + options.id,
data: {
},
header: {
'content-type': 'application/json'// 默认值
},
success(res) {
console.log(res.data)
that.setData({
comlist: res.data
});
}
})
},

得到的评论数据赋值给我们第一步设置的变量,微信的wxml文件会自动解析我们设置的变量,并显示出来,注意看变量与wxml文件标签属性之间的关系。

最后是表单的提交事件:

formSubmit(e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value.com)
wx.request({
url: '域名/wp-json/wp/v2/comments',
method:'post',
data: {
post:this.data.postid,
parent:0,
content: e.detail.value.com,
author_name:'daimadogtest',
author_email:'23452@qq.com',
author_url:'http://5afxw.com'
},
header: {
'content-type': 'application/json', // 默认值
'Authorization':'Bearer+你的token'
},
success(res) {
console.log(res.data)
}
})
}

这里需要注意,提交评论时会验证权限,所以这里需要在header中使用得到权限的令牌token。

到此评论功能基本OK,写上样式,还是比较漂亮的。如果你还需要将评论信息保存在你的微信账号中,那还需要操作你的微信小程序数据库,比如微信提供的云数据库,不过一般人不会这么干,太麻烦还不如使用网站的数据;如果你发现评论列表中的评论并没有显示出层级关系,那么你可以根据parent参数输出层级关系。这里我就不多讲了,自己多试试吧。

给TA打赏
共{{data.count}}人
人已打赏
WordPress

WP REST API操作评论相关接口及实例

2019-5-23 0:00:00

WordPress

WordPress控制REST API访问权限代码

2019-5-25 0:00:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索