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

## 效果

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

```

<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/