任务 2 新建评论及情感分析数据获取
任务目的
小程序中需要包含一个新建评论的功能,这一步将会在页面中构建新建评论的相关代码。同时为了对新建的评论进行情感分析,还会通过云函数调用NLP中的情感分析API,获取评论的情感分析数据。获取到的情感分析数据暂时通过控制台打印,后面的任务会将其保存到数据库中,实现项目功能整合。
任务步骤
1.功能预期效果展示
经过这一步的操作,我们希望能够完成如下功能:
展示一个页面,页面上包含一个话题的标题,以及一个用于填写评论内容的文本框,还有一个用于提交评论的按钮。 当用户在文本框中输入评论内容,并且点击 “新建评论” 按钮进行提交时,控制台将会返回评论内容的情感分析结果。
具体展示效果如下:
接下来将进行这一部分功能的实现。
2.添加新增评论功能本地代码
(1)引入Vant相关组件。
在index页面的index.json
文件中引入van-field
和van-button
组件,这两个组件分别用于进行文本框和按钮的展示。
index.json
文件中的完整代码展示如下:
【修改文件:index.json,所在页面:index】
{
"usingComponents": {
"van-cell": "@vant/weapp/cell",
"van-cell-group": "@vant/weapp/cell-group",
"van-button": "@vant/weapp/button",
"van-field": "@vant/weapp/field"
}
}
注:单元格相关的组件
cell
和cell-group
暂时不用,但稍后展示评论列表时需要用到,这里也一并添加进来。
(2)编写wxml页面代码。
在index页面的index.wxml
文件中编辑页面结构代码,添加如下代码:
【修改文件:index.wxml,所在页面:index】
<text class="title">话题:今天你开心吗?</text>
<van-cell-group>
<van-field
value="{{ comment }}"
center
clearable
label="写评论"
placeholder="请输入评论内容"
border="{{ false }}"
use-button-slot
bind:change="onChange"
error-message="{{ errorMsg }}"
>
</van-field>
</van-cell-group>
<van-button type="primary" block size="default" bind:click="addComment">新建评论</van-button>
这些代码分别用于展示页面上的标题、存放评论内容的文本框和新建评论按钮。同时在新建评论的按钮上绑定了addComment函数,稍后将在index.js
文件中进行函数功能的配置。
(3)编写wxss样式代码。
本项目中涉及到的样式代码不多,直接将所有样式代码添加到应用的app.wxss
文件中,可以对全局应用代码中的样式。需要在app.wxss
中添加的样式代码如下:
【修改文件:app.wxss】
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* 顶部标题 */
.title {
font-size:40rpx;
font-weight: bold;
margin: 30rpx;
}
/* 副标题 */
.subtitle {
font-size: 28rpx;
margin: 30rpx;
}
/* 评论样式 */
.isPositive {
color: #ff584e;
}
.isNegative {
color: #29cc85;
}
/* 评论列表 */
.comments {
height:600rpx;
width: 90%;
margin-left:5%;
}
/* 情感分析图表 */
.sentiment {
background: #f6f6f6;
height: 260rpx;
position: relative;
}
.sentiment .sentimentCanvas {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-100%, -100%);
width: 260rpx;
height: 260rpx;
}
.sentiment .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sentiment .sentiment-number {
display: inline-block;
top: 100%;
left: 50%;
position: absolute;
transform: translate(20%, -140%);
}
.sentiment .negative-groud {
background: #ff584e;
}
.sentiment .positive-groud {
background: #29cc85;
}
.sentiment .groud {
width: 20rpx;
height: 20rpx;
display: inline-block;
border-radius: 50%;
margin-right: 20rpx;
}
.sentiment .negative {
color: #ff584e;
}
.sentiment .positive {
color: #29cc85;
}
.sentiment .center-text {
font-family: PingFangSC-Medium;
font-size: 42rpx;
letter-spacing: 0;
text-align: center;
}
.sentiment .sentiment-text {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #898989;
letter-spacing: 0;
text-align: justify;
line-height: 48rpx;
}
.sentiment .sentiment-view {
margin-bottom: 40rpx;
}
.sentiment .number {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #000000;
letter-spacing: 0;
text-align: justify;
line-height: 48rpx;
}
添加并保存后,设置的样式将会自动在全局应用。部分样式会在稍后添加新功能时生效。
注:
app.wxss
中添加的样式会在全局生效,页面中的wxss只会在当前页面生效,如果两边的样式同时存在,页面样式的优先级大于全局样式。
(4)编写js逻辑代码。
在index页面的index.js
中添加页面的逻辑代码。需要添加的代码内容如下:
【修改文件:index.js,所在页面:index】
Page({
// 页面的初始数据
data: {
comment: "",
errorMsg: ""
},
onChange(event) {
// event.detail 为当前输入的值
this.comment = event.detail
if (this.comment != "") {
this.setData({
"errorMsg": ""
})
}
},
// 调用云函数addComment,传递用户提交的内容,并返回执行结果
addComment(event) {
if (this.comment == undefined) {
this.setData({
"errorMsg": "文本内容不能为空"
})
return false
}
// 执行函数:添加评论到云开发数据库
wx.cloud.callFunction({
name: "addComment",
data: {
val: this.comment
}
}).then(res => {
console.log(this.comment)
console.log(res.result)
}).catch(res => {
this.setData({
"errorMsg": "请输入有意义的文本"
})
})
},
})
对应的代码逻辑说明如下:
Page({})
:对应小程序的页面对象,小程序的所有页面内容以及逻辑功能,均需要在借助此页面对象才能实现。data
:对应页面的初始数据,希望通过数据绑定在wxml页面中展示的数据,也可以在此处添加。onChange(event){}
:用于监听页面上的数据变化,此处主要用于获取文本框中输入的内容,监听到的数据内容可以通过event.val
获取。addComment(event){}
:点击 “新建评论”按钮时触发的函数,此处添加了条件判断,如果用户输入内容为空,展示提示信息并阻止提交。如果内容非空,将会提交到同名的云函数addComment
中(此函数目前尚未定义,稍后将会添加)。.then()
:对应云函数成功调用时,执行此部分的代码,此处将会打印评论内容和情感分析结果。.catch()
:调用云函数并捕获到异常时,将会执行此部分的代码,此处将会展示提示信息。
(5)页面效果展示。
在项目中添加上面步骤中的代码后,将会展示如下的页面效果:
说明页面效果已经符合预期。但调用情感分析的云函数还没有创建,云函数的功能未被实现,下一步将会在云函数中实现情感分析接口的调用操作。
3.云函数实现情感分析接口调用
(1)API Explorer简介。
接下来需要在小程序中创建一个云函数,用于调用情感分析的接口,并将获取到的结果存储到数据库中(稍后进行)。在进行云函数的创建之前,学员需要先了解NLP中的情感分析接口应该如何调用,能够实现什么样的功能。
想要体验NLP的API调用,可以使用腾讯云官方提供的 API 3.0 Explorer 。
访问上方的链接,将会进入 API Explorer 的控制台界面,上方链接默认进入的是情感分析API的控制台,界面展示效果如下:
API Explorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。是一款非常强大的API调用工具,学员如有调用腾讯云产品中的其他API的需求,也可以借助此工具实现。
接下来将会通过此工具调用情感分析接口,并生成接口调用的请求代码。
(2)情感分析接口调用尝试。
这一步中将会尝试进行情感分析接口的调用,相关的操作在 API Explorer 中进行。为了方便展示调用结果,此处会先以在线调用的形式进行演示。
在 API Explorer 中填写好个人密钥和所需参数,然后在右侧选择 “在线调用” ,点击下方的 “发送请求” 按钮,如果输入信息无误,即可查看情感分析的返回结果。情感分析请求尝试的示意图展示如下:
学员可以自行尝试发送请求,并查看请求的分析结果。
注:自然语言处理NLP每日包含50万次的免费请求次数,足够个人日常测试使用。更多详细的数据可以通过 NLP控制台 查看。(创建腾讯云账号后默认开通NLP服务,无需手动购买。)
如果上方的操作中能够顺利获取请求结果,说明情感分析API的调用功能已经实现。此时可以点击 “代码生成” ,并勾选 “Node.js” (小程序云函数调用API使用Node.js代码),获取请求代码:
请求代码中被标注的部分,对应的是学员在构建请求代码时可能需要进行手动修改的部分。
有了上方的请求代码,便可以在小程序中实现评论文本的情感分析功能。
(3)创建云函数addComment
。
想要使用一个云函数,需要先将其创建。
创建好的 Node.js 中,主要包含index.js
和package.json
两个文件,分别对应云函数的逻辑代码和描述文件,下面会通过对这两个文件进行简单的修改,来实现情感分析接口的调用功能。
(4)package.json
文件配置。
通过上方情感分析生成的代码,可以看到使用 Node.js 调用腾讯云API时,需要先导入tencentcloud-sdk-nodejs
模块,所以在addComment
云函数的package.json
文件中,需要将其添加到依赖环境中。
将模块名和对应版本,以对象的形式添加到dependencies
中即可。示例代码如下:
【修改文件:package.json,所在云函数:addComment】
"dependencies": {
"wx-server-sdk": "latest",
"tencentcloud-sdk-nodejs": "latest"
}
稍后进行代码上传时,会在云端自动进行依赖安装。
(5)index.js
文件配置。
接下来需要在addComment
云函数的index.js
文件中,导入所需依赖,并添加情感分析请求的代码,然后返回获取到的请求结果。完整的示例代码如下:
【修改文件:index.js,所在云函数:addComment】
// 云函数入口文件
const cloud = require('wx-server-sdk')
// 导入tencentcloud-sdk-nodejs模块
const tencentcloud = require("tencentcloud-sdk-nodejs")
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
// 调用getResult返回情感分析结果
return await getResult(event.val)
}
// 创建获取情感分析结果的请求函数
function getResult(comment) {
const NlpClient = tencentcloud.nlp.v20190408.Client;
const models = tencentcloud.nlp.v20190408.Models;
const Credential = tencentcloud.common.Credential;
const ClientProfile = tencentcloud.common.ClientProfile;
const HttpProfile = tencentcloud.common.HttpProfile;
// [需要手动填写]此处填入学员的密钥信息
let cred = new Credential("<SecretId>", "<SecretKey>");
let httpProfile = new HttpProfile();
httpProfile.endpoint = "nlp.tencentcloudapi.com";
let clientProfile = new ClientProfile();
clientProfile.httpProfile = httpProfile;
// [需要手动填写]此处将 "ap-guangzhou" 替换为学员所属地域的服务器
let client = new NlpClient(cred, "ap-guangzhou", clientProfile);
let req = new models.SentimentAnalysisRequest();
let params = '{"Text":"' + comment + '"}'
req.from_json_string(params);
// 将请求结果以Promise对象形式返回
return new Promise((resolve, reject) => {
client.SentimentAnalysis(req, function (errMsg, response) {
if (errMsg) {
reject(errMsg);
}
console.log(response.to_json_string());
resolve(response)
});
})
.then((res) => {
return res
})
}
学员在使用这一部分的代码前,需要将密钥和所属地域(可选)中的内容进行替换。这一部分的代码主要实现了调用情感分析接口,并将获取到的分析结果返回本地的功能。
下面对代码中的关键修改进行解释说明。
导入tencentcloud-sdk-nodejs模块,用于实现 Node.js 调用腾讯云API:
const tencentcloud = require("tencentcloud-sdk-nodejs")
调用getResult
函数,执行情感分析的请求代码,传入的参数event.val
对应小程序中接收到的评论文本:
return await getResult(event.val)
创建函数getResult
用于获取情感分析的请求结果。中间的请求体,对应 API Explorer 中生成的请求代码,最终以Promise对象的形式返回请求结果,便于对异步请求的执行结果进行接收:
function getResult(comment) {
......
// 将请求结果以Promise对象形式返回
return new Promise((resolve, reject) => {
......
}
经过这一步的操作,云函数获取情感分析结果的功能已经实现,接下来需要上传编写好的云函数。
(6)上传云函数。
右键点击要上传的云函数,选择 “上传并部署:云端安装依赖(不上传 node modules)”:
等待云函数上传成功,即可成功进行云函数的调用。
(7)情感分析功能验证。
尝试在模拟器的文本框中输入评论内容,并点击“新建评论”按钮。如果能够成功在终端打印评论,且能成功获取到情感分析的数据,说明新建评论及情感分析数据获取的功能已经实现。
学员评价