小程序初体验:仿好奇心杂志小程序
小程序初体验:仿好奇心杂志小程序
1.前言
最近在学习小程序,了解的越多,就越想本身也动手实现一个,所谓学以至用吗,正巧最近也看到一个挺有趣,并且看起来也挺简洁大方的一个小程序--"好奇心杂志",便想着本身去模仿写一个.结果还行,就是碰巧最近比较忙,因此最后写的挺仓促的,不过整体仍是达到了我预计的目标.前端
1-1.这是最终的成果:
git项目地址:好奇心 git
2.目录基本结构
|--Qdaily 项目名
|--cloudfunctions 云函数
|--Dianzan 点赞函数
|--addComment 增长评论函数
|--addReply 增长回复的评论函数
|--getComment 得到评论的内容
......
|--miniprogram 项目
|--componenets 组件模块
|--LABSCover 话题的封面组件
|--comment 评论组件
|--vote 投票选项组件
......
|--pages 页面
|--index 主界面
|--votes 投票界面
|--dataAnalysis 投票结果页面
|--comment-detail 二级评论页面
......
|--images 项目图片
app.js 全局设置
app.json
app.wxss
......
复制代码
3.界面设计
做为一个前端学习者,切图固然是必不可少的,因此我最早作的事就是把这个小程序的界面绘制出来: github
3-1.入口页面
<view class='main'>
<view class='logo'>
<image class='q' src='../../images/q.png'></image>
<image class='text' src='../../images/ribao.png'></image>
</view>
<view class='btn'>
<image class='left' src='../../images/left.png'></image>
<button class='getuserinfoBtn' bindtap='goindex' wx:if="{{haveInfo}}">好奇驱动你的世界</button>
<!--获取用户信息按钮-->
<button class='getuserinfoBtn' open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" wx:else>好奇驱动你的世界</button>
<image class='right' src='../../images/right.png'></image>
</view>
</view>
复制代码
3-2.主页面之文章列表页面
<!--导航条-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<view hidden="{{currentTab!==0}}" >
<!--调用swiper组件-->
<mySwiper></mySwiper>
<view class='msg' wx:for="{{message}}" wx:key="{{index}}">
<!--调用文章列表组件-->
<msg message="{{item}}" index="{{index}}" bindtap="goDesc" data-id="{{item._id}}"></msg>
</view>
</view>
复制代码
3-3.文章详情页面
<!--顶部图片-->
<image class='headImg' src='{{Msg.headImg}}'></image>
<view class='text'>
<!--标签-->
<view class='label'>
<image class='labelImg' src='../../images/bicycle.png'></image>
<view class='labelText'>{{Msg.label}}</view>
</view>
<!--文章标题-->
<view class='title'>{{Msg.title}}</view>
<!--做者信息-->
<view class='author'>
<image class='authorImg' src='../../images/authorImg.png'></image>
<view class='authorName'>{{Msg.author}}</view>
<view class='time'>{{Msg.time}}</view>
</view>
<!--文章描述-->
<view class='msgdesc'>
<view class='desc'>{{Msg.desc}}</view>
</view>
<!--文章内容-->
<text class='message' space="emsp">{{Msg.msgDesc}}</text>
</view>
<!--按钮-->
<image bindtap='isShow' class="menuImg {{isShow==true?'menu2':''}}" src='../../images/menu.png'></image>
<view class="menu {{isShow==true?'menu1':''}}">
<view class='pub' bindtap='goMsgComment'>
想说说 <image class='Img' src='../../images/pinglun.png'></image>
</view>
<view class='pub' bindtap='dinazan'>
还不错 <image class='Img' wx:if="{{Msg.bool}}" src='../../images/dmz1.png'></image>
<image class='Img' wx:else src='../../images/dmz.png'></image>
</view>
<view class='pub'>
给他(她)看 <image class='Img' src='../../images/share.png'></image>
</view>
<button class='share' open-type="share"> </button>
</view>
复制代码
3-4.主页面之投票列表页面
<view hidden="{{currentTab!==1}}" wx:for="{{topic}}" wx:key="{{index}}">
<!--调用投票列表组件-->
<LABSCover bindtap='goVotes'
userNum="{{item.userNum}}"
tpImg="{{tpImg}}"
coverImg="{{item.topicImage}}"
title="{{item.topicTitle}}"
desc="{{item.topicDesc}}"
data-id='{{item._id}}'
data-index = '{{index}}'
index = "{{index}}">
</LABSCover>
</view>
复制代码
3-5.投票选项页面
<!--投票封面组件-->
<LABSCover coverImg="{{oneTopic[0].topicImage}}" title="{{oneTopic[0].topicTitle}}" desc="{{oneTopic[0].topicDesc}}" userNum="{{oneTopic[0].userNum}}" index = "{{index}}"></LABSCover>
<view class='options'>
<view wx:for="{{voteOption}}" wx:key="{{index}}">
<!--投票选项界面-->
<vote bind:checked="_checked" data-id="{{item._id}}" optionDesc="{{item.optionDesc}}" optionImg="{{item.optionImg}}"></vote>
</view>
<!--投票图片按钮-->
<image class="voteButton {{checked > 0 ? 'voteButtonAdd' : ''}}" src='../../images/tpbutton.png'
bindtap="vote" data-id='{{topicId}}'
></image>
</view>
<view class='comment'>
<view class='commentHead'>
<view class='commentNum'>{{commentNum}}条评论</view>
<view class='commentBtn' bindtap='discussAct'><image src='../../images/comment.png'></image></view>
</view>
<view wx:for="{{comment}}" wx:key="{{index}}">
<!--评论数据-->
<comment bind:dianzan="_dianzan" bind:twoComment="_twoComment" bool="{{item.bool}}" zan_num="{{item.DZ_num}}" headImg="{{item.avatarUrl}}" uesrname="{{item.nickName}}" commentTime="{{item.time}}" commentDesc="{{item.commentText}}" data-id="{{item._id}}" data-index="{{index}}">
</comment>
</view>
<view class='nomore'>
<text class='nomoreText'>没有更多了</text>
</view>
<!--评论框-->
<view class='inputComment' wx:if="{{discussShow}}">
<textarea class='myComment'
value='{{commentText}}'
bindinput="onCommentTextChange"
cursor-spacing='20rpx'
fixed='true' maxlength='50'
auto-focus='true'
auto-height='true'
placeholder='我要评论'>
</textarea>
<text class='sendBtn' bindtap='addComment' >评论</text>
</view>
</view>
复制代码
3-6.投票结果页面
<!--头部图片-->
<view class='head' >
<image class='lastImg' src='{{lastImg}}'></image>
<view class='text'>
<text class='headTitle'>{{headTitle}}</text>
<text class='commentTitle'>{{commentTitle}}</text>
</view>
</view>
<!--分析结果展现-->
<view class='options'>
<text class='title'>你们的态度</text>
<view wx:for="{{voteOption}}" wx:key="{{index}}">
<proportion proSelected="{{item.selected}}" proImg="{{item.optionImg}}" proNum="{{filter.numberToFix((item.optionNum / sum)*100)}}" voteDesc="{{item.optionDesc}}"></proportion>
</view>
</view>
复制代码
3-7.发表想法页面
<view>
<!--调用封面组件-->
<LABSCover coverImg="{{oneTopic[0].topicImage}}" title="{{oneTopic[0].topicTitle}}" desc="{{oneTopic[0].topicDesc}}" userNum="{{oneTopic[0].userNum}}" index = "{{index}}"></LABSCover>
<view class='talk'>
<!--当前用户编辑框-->
<view class='manage one' bindtap='goEdit'>
<view class='user'>
<image class='userImg' src='{{userInfo.avatarUrl}}'></image>
<view class='userName'>{{userInfo.nickName}}</view>
</view>
<view class='edit'>
<image class='pen' src='../../images/pen.png'></image>
<view class='editText'>说点什么</view>
</view>
</view>
<!--全部用户的话题展现框-->
<talkBox wx:for="{{talkBox}}" wx:key="{{index}}" talk="{{item}}"></talkBox>
</view>
</view>
复制代码
3-8.编辑想法页面
<view class='inputComment'>
<!--文本编辑区-->
<textarea style='height:500rpx;'
class='myComment'
value='{{commentText}}'
contenteditable="true"
bindinput="onCommentTextChange"
cursor-spacing='20rpx'
fixed='true' maxlength='50'
auto-focus='true'
placeholder='我想说...'>
</textarea>
<!--存放要发表图片的盒子-->
<image class='photoImg' src='{{image}}'></image>
<view class='icon'>
<!--经过照相机上传照片-->
<image class='camera img' src='../../images/camera.png' bindtap='camera'></image>
<!--经过本地相册上传照片-->
<image class='photo img' src='../../images/photo.png' bindtap='photo'></image>
<!--上传按钮-->
<text class='sendBtn' bindtap='addspeak' >发表</text>
</view>
</view>
复制代码
3-9.二级评论点赞页面
<!--调用评论组件-->
<twoComment bind:dianzan="_dianzan" bind:reply="discussAct" mainComment="{{mainComment}}" data-id="{{mainComment._id}}"></twoComment>
<!--回复区内容-->
<view class='replyComment'>
<view class='replyNum' wx:if="{{replyNum > 0}}">回复({{replyNum}})</view>
<view wx:for="{{replyComment}}" wx:key="{{index}}">
<twoComment bind:dianzan="_dianzan" bind:reply="replydiscussAct" mainComment="{{item}}" data-id="{{item._id}}" data-name="{{item.nickName}}" data-index="{{index}}"></twoComment>
</view>
</view>
<!--评论内容输入框-->
<view class='inputComment' wx:if="{{discussShow}}">
<textarea class='myComment'
value='{{commentText}}'
bindinput="onCommentTextChange"
cursor-spacing='20rpx'
fixed='true' maxlength='50'
auto-focus='true'
auto-height='true'
placeholder='回复'>
</textarea>
<text class='sendBtn' bindtap='addComment' >回复</text>
</view>
复制代码
4.云开发
完成界面绘制以后，此时就须要用数据将页面渲染出来，由于小程序自身就带云函数和云数据库等功能，且操做起来很简单，让开发者无需管理后端服务架构，便可轻松拥有各类后端能力，极大减轻开发过程当中繁杂的后端操做，使小程序开发更简单。数据库
4-1.云数据库
数据库的设计真的很重要,但愿你们在最初设计的时候必定要细心考虑到每张表所须要的属性,特别是有些表之间存在关联的时候,否则后期发现某张表还缺乏一些属性,再去添加,仍是有点难受的json
4-1-1.如下是我部分的数据库设计
Qdaily-topic 投票话题表 用于存储投票列表的信息
|-id
|-time 话题建立时间
|-topicDesc 话题描述
|-topicImage 话题封面图片
|-topicTitle 话题
|-userNum 参与此话题人数
复制代码
Qdaily-voter 参与用户表 用于记录参与投票的用户
|-id
|-topicId 话题id
|-userid 用户id
复制代码
Qdaily-comments 评论表 用于存储用户发表的评论内容
|-id
|-DZ_num 此评论得到的点赞总数
|-avatarUrl 发表评论的用户的头像
|-commentText 评论的内容
|-nickName 发表评论的用户的昵称
|-topicId 标志是哪一个话题的评论内容
复制代码
Qdaily-vote-option 选项表 用于每一个投票选项内容
|-id
|-optionDesc 选项文字内容
|-optionImg 选项图片
|-optionNum 被选中的次数
|-selected 标志此话题是否被选中,默认false
|-topicId 标志是哪一个话题的选项内容
复制代码
......小程序
4-2.云函数
在我看来,云函数就是像是一门后台语言,能够接收前端发出的请求,而后对数据库的数据进行操做,最后再把前端须要的数据返回给前端(我的理解,若是哪里表述的不正确,还但愿你们给我指正出来).所以,云函数的重要性应该就不言而喻了吧后端
4-2-1.如下是我部分的云函数设计:
添加评论云函数数组
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
const comment = await db.collection('Qdaily-comments').add({
data:{
commentText: event.commentText,
nickName: event.info.nickName,
avatarUrl: event.info.avatarUrl,
time: new Date(),
topicId: event.topicId,
DZ_num:0
}
})
return event;
}
复制代码
添加话题参与者bash
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
// 获取当前用户的openId
const openId = cloud.getWXContext().OPENID
// 获取当前选中的topic
const topic = await db.collection('Qdaily-topic')
.where({
_id: event.topicId
})
.get()
// 获取当前参与此话题的人数
const voters = await db.collection('Qdaily-voter')
.where({
topicId: event.topicId
})
.get()
// 检验当前用户是否已经参与过此话题
const voter = await db.collection('Qdaily-voter')
.where({
userid: openId,
topicId: event.topicId
})
.get()
// 若是当前用户没有参与过此话题,则添加一条数据
if(voter.data.length == 0){
// 参与用户表添加数据
const voter = await db.collection('Qdaily-voter').add({
data:{
userid: openId,
topicId: event.topicId
}
})
// 给当前选中的topic表中的参与人数userName 更新人数
await db.collection('Qdaily-topic').doc(topic.data[0]._id)
.update({
data: {
userNum: voters.data.length + 1
}
})
}
return topic.data[0]._id
}
复制代码
获取评论数据微信
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
// 获取当前用户的openId
const openId = cloud.getWXContext().OPENID
// 获取当前话题的全部评论
const comment = await db.collection('Qdaily-comments')
.where({
topicId: event.topicId
})
.get()
// 判断当前用户是否对某条评论点赞过
for(let i =0; i < comment.data.length; i++){
let isDianzan = await db.collection('Qdaily-dianzan').where({
commentId: comment.data[i]._id,
userId: openId
})
.get()
if(isDianzan.data.length ==0){
comment.data[i].bool = false;
}
else{
comment.data[i].bool = true;
}
}
// 根据评论的时间来排序 距离当前时间越短,越排在前面
let newcomment = (comment.data).sort((a, b) => a.time < b.time ? 1 : -1);
let mainComment = {};
for (let i = 0; i < comment.data.length; i++) {
if (comment.data[i]._id == event.commentId){
mainComment = comment.data[i]
}
}
return{
newcomment: newcomment,
mainComment: mainComment
}
}
复制代码
......
5.功能设计
好了,上面一大串的代码,估计你们也都看得不肯意再看了吧!如今我给你们分享一下我这个小程序的一些主要功能吧!
5-1.投票功能
投票功能算是这个小程序主要的功能,每一个用户选择本身一个感兴趣的话题后,能够进入详情页面投票,有个细节,没选中以前,是不能够投票的,且投票按钮的颜色也是偏淡的,一旦用户选中了某个话题或多个选项,颜色变得高亮,而且此时点击按钮能够进入分析页面,查看有多少比例的用户和本身的选择同样.
//判断是否有选项选中 同时找到选中选项的id
_checked(e) {
// 获取装用户选中的选项id的盒子
var arrOptionid = this.data.optionId;
// 获取当前的选项id
var optionId = e.currentTarget.dataset.id
// 当前选项选中后 check属性变为true 而且存入用户选中的选项盒子optionId里面
if (e.detail.check == true) {
arrOptionid.push(optionId)
this.setData({
// checked用来判断用户是否选择了至少一个选项,当大于0时 则能够进行投票
checked: this.data.checked + 1,
optionId: arrOptionid
})
} else if (e.detail.check == false){
this.removeByValue(arrOptionid, optionId)
this.setData({
checked: this.data.checked - 1
})
}
// console.log(this.data.checked)
console.log(this.data.optionId)
},
//点击投票后成功跳转界面
vote(e){
const that = this
if (that.data.checked > 0){
wx.cloud.callFunction({
// 调用云函数,若是用户是第一次进行投票,则会添加一个参与者信息
name:'addVoter',
data:{
topicId: that.data.topicId
},
success(res){
console.log(res)
// 经过JSON.stringify(obj) 方法将数组转化为字符串进行传递
const opId = JSON.stringify(that.data.optionId)
// 带参跳转页面
wx.navigateTo({
url: "../dataAnalysis/dataAnalysis?topicId=" + e.currentTarget.dataset.id + "&optionId=" + opId + "&topicTitle=" + that.data.oneTopic[0].topicTitle,
})
},
fail(error){
console.log(error)
}
})
}else{
wx.showToast({
title: '没有一项符合您吗?',
icon:'none',
duration:2000
})
}
},
复制代码
5-2.评论功能
因为已进入页面就会获取用户的信息,因此评论的时候就能够把用户数据以及评论的内容一块儿放入数据库,而后从数据库拿出来从新渲染界面
// 往数据库里添加评论
addComment() {
let that = this;
//判断用户是否输入了内容
if (that.data.commentText == ''){
wx.showToast({
title: '评论内容不能为空',
icon: 'none',
duration: 2000
})
}else{
// 调用添加评论云函数
wx.cloud.callFunction({
name: 'addComment',
data: {
commentText: that.data.commentText,
info: that.data.userInfo,
topicId: that.data.topicId
},
success() {
console.log('插入成功');
wx.cloud.callFunction({
// 调用获取评论数据云函数
name: 'getComment',
data: {
topicId: that.data.topicId
},
success(res) {
let newComment = that.newTime(res.result.newcomment)
that.setData({
comment: newComment,
commentNum: res.result.newcomment.length
})
console.log(res.result.data)
}
})
// 评论成功后清空数据,关闭评论框
that.setData({
discussShow: false,
commentText: ''
})
}
})
}
},
复制代码
5-3.回复功能
这是一个二级评论页面,若是是对下面的回复再进行回复,这条评论数据的最前面就会出现"@xxx",表示针对某个用户的回复,若是是对上面评论内容进行回复,则不会有"@xxx"
addComment() {
let that = this;
//判断用户是否输入了内容
if (that.data.commentText == '') {
wx.showToast({
title: '评论内容不能为空',
icon: 'none',
duration: 2000
})
} else {
wx.cloud.callFunction({
// 调用添加回复评论的云函数
name: 'addReply',
data: {
replyText: that.data.commentText,
info: that.data.userInfo,
mainCommentId: that.data.mainComment._id,
mainCommentNickname: that.data.replyNickname,
haveName: that.data.haveName
},
success() {
console.log('插入成功');
wx.cloud.callFunction({
name: 'getReply',
data: {
mainCommentId: that.data.mainComment._id
},
success(res) {
console.log('返回')
console.log(res.result)
let newReply = that.newTime(res.result.newreply)
that.setData({
replyComment: newReply,
replyNum: newReply.length
})
console.log(that.data.replyComment)
},
fail(err) {
console.log(err)
}
})
// 评论成功后清空数据,关闭评论框
that.setData({
discussShow: false,
commentText: ''
})
}
})
}
},
复制代码
5-4.点赞功能
每一个用户针对每条评论的点赞都是惟一的,因此我专门用了一张点赞表来装点赞数据,每次点同意功,我就会往数据库里添加一条数据,同时修改这个评论的所获点赞总数.最后根据返回的值来改变这个'♥'的样式
//点赞功能
_dianzan1(e){
let that = this;
//提早在页面作好改变
// var thisComment = that.data.comment[e.currentTarget.dataset.index];
if (that.data.comment[e.currentTarget.dataset.index].bool) {
that.data.comment[e.currentTarget.dataset.index].bool = false;
that.data.comment[e.currentTarget.dataset.index].DZ_num = that.data.comment[e.currentTarget.dataset.index].DZ_num - 1;
} else {
that.data.comment[e.currentTarget.dataset.index].bool = true;
that.data.comment[e.currentTarget.dataset.index].DZ_num = that.data.comment[e.currentTarget.dataset.index].DZ_num + 1;
}
that.setData({
comment: that.data.comment
})
// 调用点赞云函数
wx.cloud.callFunction({
name: 'Dianzan',
data: {
// userId:
commentId: e.currentTarget.dataset.id,
topicId: that.data.topicId
},
// 成功后返回数据渲染界面
success(res) {
let newComment = that.newTime(res.result.newcomment)
that.setData({
comment: newComment
})
},
fail(error){
console.log(error)
}
})
},
复制代码
5-5.上传本身想法功能 (相似于添加一个评论,不过多了一个图片)
每一个用户不只能够选择投票话题,也能够选择发表想法的话题,能够根据标题发表本身的想法
// 点击不一样的图片会选择相机或相册内选择图片
camera() {
this.chooseImg('camera')
},
photo() {
this.chooseImg('album')
},
// 选择图片
chooseImg (temp) {
const that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 能够指定是原图仍是压缩图，默认两者都有
sourceType: [temp], // 能够指定来源是相册仍是相机，默认两者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths[0]);
// 提早把数据放进去
that.setData({
image: tempFilePaths[0]
})
}
})
},
// 增长数据到数据库
addspeak() {
wx.showLoading({
title: '努力上传中',
})
const that = this;
//若是用户上传了图片 此时把照片传入数据库
if (that.data.image){
let newFile = that.data.image.split('//')[1];
console.log(newFile);
wx.cloud.uploadFile({
cloudPath: 'Qdaily/' + newFile,
filePath: that.data.image, // 文件路径
success: res => {
const fileId = res.fileID
wx.cloud.getTempFileURL({
fileList: [res.fileID],
success: res => {
const fileUrl = res.fileList[0].tempFileURL
//插入数据
wx.cloud.callFunction({
name: 'addSpeak',
data: {
topicId: that.data.topicId,
user: that.data.userInfo,
editText: that.data.commentText,
image: fileUrl,
imageID: fileId
},
success(res) {
wx.hideLoading();
wx.navigateTo({
url: '../speak/speak?topicId=' + that.data.topicId + "&index=" + that.data.index
})
}
})
},
fail: err => {
// handle error
}
})
},
fail: err => {
// handle error
}
})
}
// 用户没有上传图片 会使用默认的背景图片
else {
//插入数据
wx.cloud.callFunction({
name: 'addSpeak',
data: {
topicId: that.data.topicId,
user: that.data.userInfo,
editText: that.data.commentText,
},
success(res) {
wx.navigateTo({
url: '../speak/speak?topicId=' + that.data.topicId + "&index=" + that.data.index
})
}
})
}
},
复制代码
以上就是我这个小程序的主要功能了,其实主要的数据操做都在云函数内,有兴趣继续了解的人能够进入个人项目里的云函数看看
6.遇到的问题
在写这个小程序的时候,总有些地方的效果不让人满意,因此本身进行了一些修改,但愿能给你们带来一点小小的帮助
6-1.获取用户信息
因为我这个程序须要得到用户的信息,因此我最开始直接用了这个方法获取用户弹窗
//获取用户信息
wx.getUserInfo({
success: function (res) {
console.log(res);
that.data.userInfo = res.userInfo;
that.setData({
userInfo: that.data.userInfo
})
}
})
复制代码
结果自从微信接口有了新的调整以后 这个wx.getUserInfo（）便再也不出现受权弹窗了，须要使用button按钮
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">受权登陆</button>
单独一个按钮获取用户信息,难免显得太...突兀了把.因此我想到把个这个按钮放在小程序的封面
// 当页面已经获取到用户信息时,点击按钮直接跳转
goindex(){
wx.redirectTo({
url: '../index/index',
})
},
bindGetUserInfo(e){
if (e.detail.userInfo) {
//用户按了容许受权按钮
wx.redirectTo({
url: '../index/index',
})
} else {
//用户按了拒绝按钮
wx.showToast({
title: '用户信息获取失败,请重试',
duration:2000,
icon:'none'
})
}
},
复制代码
6-2.点赞效果马上显示
不知道写小程序的大家是否也碰到这种状况,就是对云数据库进行发送数据而后再返回数据,这个时间可能须要一两秒,其余的还好,但若是点个赞也须要一两秒才能看到效果,这也太难受了!但我又不知道怎么提高这个往云数据库里存值取值的时间,因此只能在本地想办法了.
个人想法是这样的: 每一个♥都有本身的一个bool属性,若是为true时,才是红色的,不然为false,假设此时的这个♥是true状态,当我点击♥时,经过云函数和云数据库,最后返回一个false状态,此时的♥才被改成false状态.
由于♥的状态只有两种,因此我为何不能够在最开始点击的时候就把它的状态改成另一种,由于我知道此次点击事后通过云函数云数据库返回的状态必定是另一种,先把状态直接改了,让用户马上能够知道本身的点赞或取消点同意功了,而后等数据库的操做进行完成后再返回数据渲染页面,由于此时显示的状态已经和返回的结果同样了,因此看不到变化的效果,但数据库的更新也完成了.
let that = this;
//提早在页面作好改变
// var thisComment = that.data.comment[e.currentTarget.dataset.index];
if (that.data.comment[e.currentTarget.dataset.index].bool) {
that.data.comment[e.currentTarget.dataset.index].bool = false;
that.data.comment[e.currentTarget.dataset.index].DZ_num = that.data.comment[e.currentTarget.dataset.index].DZ_num - 1;
} else {
that.data.comment[e.currentTarget.dataset.index].bool = true;
that.data.comment[e.currentTarget.dataset.index].DZ_num = that.data.comment[e.currentTarget.dataset.index].DZ_num + 1;
}
that.setData({
comment: that.data.comment
})
.....
调用点赞云函数
......
复制代码
不过这个问题还有个小bug,就是当用户点击过快时,界面的确能够当即更新,但由于数据库的调用这些须要时间,可能页面点击了四次,但云函数还连一次的值都没有返回,再等一两秒后,四次结果依次返回:true->false->true->...这个时候,你就会发现页面的♥会出现闪烁状况😭,个人解决办法是,设置点赞按钮每隔一秒才能点击一次(若是你有更好的解决办法,或是别的点赞方法,但愿给我留言啊😁)
_dianzan(e) {
var that = this;
let d = new Date();
let nowtime = d.getTime();//获取点击时间
if (nowtime - that.data.lasttime > 1000) {
that._dianzan1(e);
} else {
wx.showToast({
title: '您点击的太快了',
duration: 1000,
icon: 'none'
})
}
that.setData({
lasttime: nowtime
})
},
复制代码
6-3.一个组件显示两种样式
<view class='msg' wx:if="{{index % 4 == 0}}">
......
<view class='msg1' wx:else>
......
复制代码
在本来的组件里在添加一种样式,而后把wx:for 里的index值传入组件,当index值为4的倍数时(能够根据你本身需求设置),使用第一种样式,其他的都使用第二种样式,这样就能够达到我上面的效果了
写了这么多总算是把整个小程序都给解构完了,可能不少地方讲的仍是有点粗糙,若是您想对我这个小程序了解更多,能够查看个人项目好奇心,但愿能给您带来帮助,也但愿能留下您宝贵的意见
7.结语
学习的过程是痛苦的,但结果是美好的,在这个简单小程序最终出炉的时候,内心仍是有点开心的,写这个小程序不只仅是一个把学习的结果展示出来,更是对本身所学内容的查漏补缺,了解到本身的不足之处,并去弥补才是最重要的,代码的学习之路还很长,还得继续勤勤恳恳的学下去.
若是想一块儿学习的小伙伴也能够加我微信哦😁:zh1318226678
相关文章
- 1. 小程序初体验
- 2. Taro 小程序初体验
- 3. 携程小程序初体验
- 4. 微信小程序初体验(上)
- 5. 微信小程序初体验
- 6. 小程序云开发之初体验
- 7. 微信小程序--初体验
- 8. 小程序之云开发初体验
- 9. 微信小程序开发——初体验
- 10. mpvue写小程序初体验
- 更多相关文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • 算法总结-归并排序
- • Java 8 Stream 教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，帮助设计师远离996
- 2. 错误 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 报告速览，Kubernetes使用率跃升235%！
- 4. TVI-Android技术篇之注解Annotation
- 5. android studio启动项目
- 6. Android的ADIL
- 7. Android卡顿的检测及优化方法汇总（线下+线上）
- 8. 登录注册的业务逻辑流程梳理
- 9. NDK(1)创建自己的C/C++文件
- 10. 小菜的系统框架界面设计-你的评估是我的决策
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 小程序初体验
- 2. Taro 小程序初体验
- 3. 携程小程序初体验
- 4. 微信小程序初体验(上)
- 5. 微信小程序初体验
- 6. 小程序云开发之初体验
- 7. 微信小程序--初体验
- 8. 小程序之云开发初体验
- 9. 微信小程序开发——初体验
- 10. mpvue写小程序初体验