微信小程序---点赞（图片和点赞数更改）

微信小程序点赞功能实现

在微信小程序中，点赞功能是非常常见的需求之一。下面我们将详细描述如何实现点赞功能，包括图片和点赞数的更新。

1. 小程序结构首先，我们需要创建一个新的微信小程序项目。在 `index.wxml` 文件中，我们定义了一个视图组件，包含一个按钮和一张图片。我们还定义了一个变量 `liked` 来表示当前用户是否已经点赞过。

```wxml

```

2. 点赞逻辑当用户点击按钮时，我们需要执行点赞逻辑。我们可以在 `index.js` 文件中定义一个函数 `dianzan` 来处理这个事件。

```javascriptPage({

data: {

liked:0,

favor_img: '',

favor_img2: ''

},

dianzan: function() {

// 点赞逻辑实现 var that = this;

wx.cloud.callFunction({

name: 'dianzan',

data: {

openid: app.globalData.openid,

id:1 },

success: function(res) {

console.log('点赞成功');

that.setData({

liked:1,

favor_img: '',

favor_img2: ''

});

},

fail: function(res) {

console.log('点赞失败');

}

})

}

})

```

在这个函数中，我们使用 `wx.cloud.callFunction` 来调用一个云函数 `dianzan`。这个云函数负责更新数据库中的点赞数和用户的点赞状态。

3. 云函数实现下面是云函数 `dianzan` 的实现：

```javascriptexports.main = async (event) => {

const db = wx.cloud.database();

const openid = event.openid;

const id = event.id;

// 更新数据库中的点赞数和用户的点赞状态 await db.collection('article').doc(id).update({

data: {

likes: db.command.inc(1),

liked: openid }

});

return {

errCode:0,

message: '点赞成功'

};

}

```

在这个云函数中，我们使用 `wx.cloud.database` 来连接数据库。我们更新了数据库中的点赞数和用户的点赞状态。

4. 点赞数显示最后，我们需要在小程序中显示点赞数。在 `index.wxml` 文件中，我们可以添加一个新的视图组件来显示点赞数：

```wxml

点赞数: {{likes}}

```

在 `index.js` 文件中，我们需要更新数据绑定来显示点赞数：

```javascriptPage({

data: {

liked:0,

favor_img: '',

favor_img2: '',

likes:0 },

dianzan: function() {

// 点赞逻辑实现 var that = this;

wx.cloud.callFunction({

name: 'dianzan',

data: {

openid: app.globalData.openid,

id:1 },

success: function(res) {

console.log('点赞成功');

that.setData({

liked:1,

favor_img: '',

favor_img2: '',

likes: res.result.likes });

},

fail: function(res) {

console.log('点赞失败');

}

})

}

})

```

在这个函数中，我们更新了数据绑定来显示点赞数。

通过以上步骤，我们成功实现了微信小程序的点赞功能，包括图片和点赞数的更新。

小程序点赞