美文网首页
小程序云开发5.评论功能实现

小程序云开发5.评论功能实现

作者: 前端辉羽 | 来源:发表于2019-12-26 09:20 被阅读0次

本文目录:

  • 1.云数据库中1对n关系的设计方式
  • 2.云函数消息模板推送
  • 3.分享当前页面

setData有第二个参数,是一个回调函数,相当于第一个参数完成后再去完成第二个参数的函数,形成一个前后顺序。

textarea的问题之一:就算把textarea放在一个fixed定位的容器中,textarea也要加上个fixed="true"属性才行,否则的话textarea还是会随着页面而滚动=>目前存在的bug之一,后期可能会被修复。

1.云数据库中1对n关系的设计方式

小程序的云数据库是一个非关系型的数据库,所以会涉及到非常多的1对N关系,三种设计模式,
第一种当n不是很多的时候(100以内),把n设计成数组。
第二种,1和n是存在不同的集合中,比如说一个产品对应着几十几百个零件,每个零件也都有自己的很多数据。产品为1,零件为n,我们可以把零件集合的id存到对应产品的一个字段数组中去。这样做的,想要查询某个产品的某个零件,则需要进行两次查询。
第三种模式,n的数据达到成千上万。比说一条博客下面有10万条评论,我们把评论放入blog-comment集合中去,对应的每一条评论我们可以给其增加一个blogid字段。也就是从n那里存对应的1的信息。

获取数据的操作代码适合写在云函数端,但是插入数据库的操作可以写在小程序端,而且在小程序端还可以自动插入openid字段,在云函数要通过event.openid才能获取到

云调用:通过云函数去调用服务端的一些开放接口

2.云函数消息模板推送

模板消息规定我们在想要推送消息的地方必须使用form,必须要配备属性report-submit="true",给点击提交的地方配备属性form-type="submit",这样当我们点击对应按钮的时候,就会去提交按钮所在的form表单,当form提交的时候,会去触发form标签上的bind:submit事件,我们可以把按钮的点击触发事件绑定在form标签的bind:submit上,这样的话 bind:input="onInput"实时获取评论内容的事件也可以去掉
<form slot="model-content" report-submit="true" bind:submit="onSend">
<textarea name="content" class="comment-content" bind:input="onInput" placeholder="写评论" valaue="{{content}}" fixed="true"></textarea>
<button class="send" form-type="submit">发送</button>
</form>

我们通过bind:submit的event参数就可以自动获取`event.detail.value`,同时这个event里面的detail还有一个formId,formId在真机测试中会获取一个真正的id
模板消息的自动推送都是根据这个formId进行推送,有效期7天,每次提交表单都会生成一个唯一的formId

onSend(event) {
// 插入数据库
let content = event.detail.value.content
let formId = event.detail.formId
}

接下来我们在小程序的后台配置消息模板,每个模板都有对应的模板id
新建一个云函数sendMessage,然后建立一个config.json文件(名字是固定的),配置对应的权限

{
"permissions":{
"openapi":[
"templateMessage.send"
]
}
}

只要添加上面的权限后,云函数才有权限调用相关接口,进行模板消息的推送
下面是云函数中调用推送模板消息接口的代码
page配置的是用户点击模板消息后自动打开的页面
data配置的是消息内容,属性名称在小程序后台模板消息详情中的关键词部分可以看到。
templateId对应的就是模板消息的id

// 云函数入口函数
exports.main = async (event, context) => {
const {OPENID} = cloud.getWXContext()
const result = await cloud.openapi.templateMessage.send({
touser:OPENID,
page:/pages/blog-comment/blog-comment?blogid=${event.blogid},
data:{
thing2:{
value:event.content
},
time4:{
value:'刚刚'
}
},
templateId:'0m3J1_zRBBTcGz2MUgdVL06iqCDaKj-3hO8y85us-8I',
formId:event.formId
})
return result
}

接下来就是在小程序端去调用这个云函数

// 推送模板消息
wx.cloud.callFunction({
name: 'sendMessage',
data: {
content,
formId,
blogid: this.properties.blogid
}
}).then((res) => {
console.log(res)
})


子组件触发父组件的事件
子组件内代码
`this.triggerEvent('refreshCommentList')`
父组件调用子组件的标签中监听事件
`bind:refreshCommentList="_getBlogDetail"`

### 3.分享当前页面
分享所点击的博客功能
小程序规定必须是带有open-type="share"的button才可以触发分享事件,用户点击后就会自动触发页面的onShareAppMessage,在事件中我们需要定义转发时标题以及用户点击来时的页面路径path

onShareAppMessage: function(event) {
let blogObj = event.target.dataset.blog
return {
title:blogObj.content,
path:/pages/blog-comment/blog-comment?blogid=${blogObj._id}
// imageUrl:''
}
}

imageUrl对应的是分享卡片上的图片,不设置这个参数会默认截图当前小程序页面的上半部分作为分享图片
注意:开发工具中无法进行分享测试

相关文章

网友评论

      本文标题:小程序云开发5.评论功能实现

      本文链接:https://www.haomeiwen.com/subject/hehkoctx.html