微信小程式~雲開發 Demo 實現發表頁面

小程式開發雲開發 · 發表 2018-11-25 07:05:53

摘要：實現的結果如下： u甜甜圈釋出頁面.png 分析如何實現導航欄的實現很簡單就不說了，可參考我之前的文章重點是中間的 ② 是內容區域區域三是功能操作區內容區域的實現第一個是文字區域第...

實現的結果如下：

u甜甜圈釋出頁面.png

分析如何實現

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

內容區域的實現

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

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

在圖片的右上角有關閉按鈕，這裡使用的是 icon 元件，具體可參考 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月份會改為查開獎頁面，敬請期待）

image