实现的结果如下：
u甜甜圈发布页面.png
分析如何实现
- 导航栏的实现很简单就不说了，可参考我之前的文章
- 重点是中间的 ② 是内容区域
- 区域三是功能操作区
内容区域的实现
- 第一个是文本区域
- 第二个是水平的图片展示区域
这里的内容区域使用的是小程序的textarea组件，具体的使用方式可参考 官方文档
图片显示的区域使用的是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
网友评论