使用微信小程序云开发实现类似朋友圈效果

最新推荐文章于 2026-03-06 17:34:43 发布

原创最新推荐文章于 2026-03-06 17:34:43 发布 · 3k 阅读

39 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #javascript

前端专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用微信小程序的云开发功能，包括云数据库和云存储，来创建类似朋友圈的效果。通过初始化云开发环境，新建特定页面，以及设计页面布局，实现了编辑、分享和查看朋友圈的功能。

效果

编辑并share页面如下：
在这里插入图片描述
点击分享以后，跳转到以前share过的朋友圈页面，点击左上角可以返回，如下：

说明

本demo会用到微信小程序的云开发功能，包括云数据库，云存储

实现步骤

1. 云开发环境的初始化

详见：https://blog.csdn.net/Panda325/article/details/108117775

2. 新建page

新建两个pageshare和pyq，share用于编辑文案并选择配图，pyq用于查看以前发过的朋友圈
app.json的pages字段如下：

"pages": [
    "pages/share/share",
    "pages/pyq/pyq"
  ],

在这里插入图片描述

3. `share`页面

share页面从上到下依次是：多行输入框 textarea，选择图片的按钮 button，分享按钮 button
share.wxml如下：

<textarea placeholder="输入您的文案" bindblur="bindTextAreaBlur"
   value="{{details}}" class='text'> </textarea>
<input>\n\n</input>
<button bindtap="seleteAndUploadPicture">
<image src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2444066247,3899866315&fm=26&gp=0.jpg'></image>
</button>
<input>\n\n</input>
<button bindtap="share">分享</button>

share.js如下：

const DB = wx.cloud.database().collection("pyq")
Page({
 data: {
   details: '',
   imgURL: ''
 },
 bindTextAreaBlur: function (e) {
   console.log(e.detail.value);
   var that = this;
   that.setData({
     details: e.detail.value
   });
 },
 seleteAndUploadPicture() {
   let that = this
   wx.chooseImage({
     count: 1,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success: res => {
       console.log('choose successfully', res)
       that.setData({
         imgURL: res.tempFilePaths[0]
       })
     },
     fail(res) {
       console.log('choose failed', res)
     }
   })
 },
 share() {
   console.log('调用share的方法')
   let that = this
   wx.cloud.uploadFile({
     cloudPath: new Date().getTime() + '.png',
     filePath: this.data.imgURL, // 文件路径
     success: function (res) {
       console.log('upload successfully', res)
       that.setData({
         imgURL: res.fileID
       })
     },
     fail(res) {
       console.log('upload failed', res)
     }
   })
   DB.add({
     data: {
       descption: this.data.details,
       imgURL: this.data.imgURL
     },
     success(res) {
       console.log("share成功", res)
       wx.navigateTo({
         url: "../../pages/pyq/pyq"
       })
       wx.showToast({
         title: '成功',
         icon: 'success',
         duration: 2000
       })
     },
     fail(res) {
       console.log("share失败", res)
     }
   })
 }
})

share.wxss如下：

.text{
 /* height: 100rpx;
 line-height: 100rpx; */
 width: 100%;
 font-size: 60rpx;
 background-color: #bfa;
}

4. `pyq`页面

pyq.wxml如下：

<view wx:for="{{array}}">
<view>{{index}} : {{item.descption}}</view>
<image src="{{item.imgURL}}"></image>
<view>\n</view>
</view>

pyq.js如下：

const DB = wx.cloud.database().collection("pyq")
Page({
 data: {
   array: []
 },
 onLoad() {
   let that = this
   DB.get({
     success(res) {
       that.setData({
         array: res.data
       })
       for (let i = 0; i < res.data.length; i++) {
         console.log(res.data[i].descption)
         console.log(res.data[i].imgURL)
       }
     }
   })
 }
})

我的邮箱：1125806272@qq.com
我的博客：http://9pshr3.coding-pages.com/
或https://zhenglin-li.github.io/
我的csdn：https://me.csdn.net/Panda325
我的简书：https://www.jianshu.com/u/e2d945027d3f
我的今日头条：https://www.toutiao.com/c/user/4004188138/#mid=1592553312231438
我的博客园：https://www.cnblogs.com/zhenglin-li/