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

## 效果

编辑并share页面如下:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200820100623691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BhbmRhMzI1,size_16,color_FFFFFF,t_70#pic_center)

点击分享以后,跳转到以前share过的朋友圈页面,点击左上角可以返回,如下:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200820101912679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BhbmRhMzI1,size_16,color_FFFFFF,t_70#pic_center)

## 说明

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

## 实现步骤

### 1. 云开发环境的初始化

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

### 2. 新建page

新建两个page`share`和`pyq`,`share`用于编辑文案并选择配图,`pyq`用于查看以前发过的朋友圈

`app.json`的`pages`字段如下:

```

"pages": [

    "pages/share/share",

    "pages/pyq/pyq"

  ],

```

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200820102112926.png#pic_center)

### 3. `share`页面

`share`页面从上到下依次是:多行输入框 `textarea`,选择图片的按钮 `button`,分享按钮 `button`

`share.wxml`如下:

```

\n\n

\n\n

```

  `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`如下:

```

{{index}} : {{item.descption}}

\n

```

  `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)

        }

      }

    })

  }

})

```

```

我的邮箱:[email protected]我的博客: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/

你可能感兴趣的:(使用微信小程序云开发实现类似朋友圈效果)