## 效果
編輯并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我的簡書：http://www.lxweimin.com/u/e2d945027d3f我的今日頭條：https://www.toutiao.com/c/user/4004188138/#mid=1592553312231438我的博客園：https://www.cnblogs.com/zhenglin-li/
