## 效果
编辑并share页面如下：
点击分享以后，跳转到以前share过的朋友圈页面，点击左上角可以返回，如下：
## 说明
本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"
],
```
### 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/
