實現的結果如下：

分析如何實現

• 導航欄的實現很簡單就不說了，可參考我之前的文章
• 重點是中間的 ② 是內容區域
• 區域三是功能操作區

內容區域的實現

• 第一個是文字區域
• 第二個是水平的圖片展示區域
  這裡的內容區域使用的是小程式的 textarea 元件，具體的使用方式可參考 官方文件

圖片顯示的區域使用的是scroll-view元件，設定為水平方向滑動 <scroll-view class="image-group" scroll-x="true">，圖片的選擇是使用了wx.chooseImage API，

在圖片的右上角有關閉按鈕，這裡使用的是icon元件，具體可參考

主要的實現程式碼如下：

<view class="content">
  <form bindsubmit="formSubmit">
    <view class="text-content">
      <view class='text-area'>
        <textarea name="input-content" type="text" placeholder="說點什麼吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
      </view>

    </view>
    <scroll-view class="image-group" scroll-x="true">
      <block wx:for='{{images}}' wx:for-index='idx'>
      <view>
        <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
        <icon type='clear' bindtap='removeImg'  data-index="{{idx}}" ></icon>
      </view>
      </block>
      
    </scroll-view>
    <view class='btn-func'>
      <button class="btn-img" bindtap='chooseImage'>選擇圖片</button>
      <button class="btn" formType='submit'  open-type="getUserInfo">釋出圈圈</button>
      <!-- <image hidden=''></image> -->
    </view>
  </form>

</view>
 

佈局樣式如下：

.content {
  height: 100%;
  width: 100%;
}

textarea {
  width: 700rpx;
  padding: 25rpx 0;
}

.text-content {
  background-color: #f3efef;
  padding: 0 25rpx;
}

.image-group {
  display: flex;
  white-space: nowrap;
  margin-top: 30px;
}

.image-group view{
  display: inline-block;
  flex-direction: row;
  width: 375rpx;
  height: 375rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  background-color: #cfcccc;
}

.image-group view image{
  width: 100%;
  height: 100%;
  align-items: center;
}

.image-group view icon{
  display: inline-block;
  vertical-align: top;
  position: absolute
}
.btn-func {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  align-items: center;
}

.btn-img {
  width: 220px;
  height: 45px;
  line-height: 45px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(113, 98, 250);
  color: #fff;
  border-radius: 50px;
}

.btn {
  width: 220px;
  height: 45px;
  line-height: 45px;
  background-color: #d50310;
  color: #fff;
  border-radius: 50px;
  margin-bottom: 20px;
}
 

頁面佈局之後就該從 js中去處理資料了，在js中主要實現的功能有

• 文字內容的獲取
• 圖片的選擇
• 圖片的閱覽
• 圖片的刪除
• 將結果釋出到雲資料庫中

基本上都是 API 的呼叫，也沒啥難度的，下面直接貼出原始碼：
textarea 文字內容的獲取

 /**
   * 獲取填寫的內容
   */
  getTextAreaContent: function(event) {
    this.data.content = event.detail.value;
  },

圖片的選擇

 /**
   * 選擇圖片
   */
  chooseImage: function(event) {
    var that = this;
    wx.chooseImage({
      count: 6,
      success: function(res) {
        // tempFilePath可以作為img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths

        for (var i in tempFilePaths) {
          that.data.images = that.data.images.concat(tempFilePaths[i])
        }
        // 設定圖片
        that.setData({
          images: that.data.images,
        })
      },
    })
  },

圖片的預覽

 // 預覽圖片
  previewImg: function(e) {
    //獲取當前圖片的下標
    var index = e.currentTarget.dataset.index;

    wx.previewImage({
      //當前顯示圖片
      current: this.data.images[index],
      //所有圖片
      urls: this.data.images
    })
  },

圖片的刪除

/**
   * 刪除圖片
   */
  removeImg: function(event) {
    var position = event.currentTarget.dataset.index;
    this.data.images.splice(position, 1);
    // 渲染圖片
    this.setData({
      images: this.data.images,
    })
  },

釋出內容到資料庫中

資料釋出到資料中，需要先開啟雲開發，然後在資料庫中建立集合也就是表之後就是呼叫資料庫的增刪改查API即可

 /**
   * 新增到釋出集合中
   */
  saveToHistoryServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    db.collection('history').add({
      // data 欄位表示需新增的 JSON 資料
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一個物件，其中有 _id 欄位標記剛建立的記錄的 id
        console.log(res)
      },
      fail: console.error
    })
  },

文章介紹到這裡就結束了，有問題可以聯絡我一起討論~

這是我上線的一個小程式，走了很多彎路，現在也在整理筆記，過幾天會發布。歡迎老鐵掃碼先體驗一波（目前掃碼出現可能是查快遞頁面，這是個人開發者繞過上線提交的頁面，12月份會改為查開獎頁面，敬請期待）