上一章节我们学习了果酱先生的登录跟完善用户信息。
这一章节我们来学习如何发布打卡。涉及到的知识点有:
wx.chooseImage()
wx.uploadFile()
整体为上下布局。
textarea 组件 跟上传图片为一个整体模块。
发布打卡按钮单独为一个模块。
released.wxml 代码
<view class="gj_released_page">
<view class="released-content">
<view class="share-notes">
<textarea name="text" id="" maxlength="-1" placeholder="分享新鲜事..." ></textarea>
</view>
<view class="share-wrap">
<view class="share-item">
<view class="share-img bgsize" style="background-image: url('https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3864452827,2593929039&fm=26&gp=0.jpg')">
</view>
<view class="iconfont icon-shibai delete"></view>
</view>
<view class="share-item item_dashed" >
<view class="chooseimg" >
<view class="iconfont icon-juxing addimg"></view>
<span>上传照片</span>
</view>
</view>
</view>
<view class="share_prompt">
* 建议上传竖版图片
</view>
</view>
<view class="released-btn">
<button formType="submit">发布打卡</button>
</view>
</view>
released.less 代码
.gj_released_page{
.released-content {
padding: 20px 35px 34px 35px;
background-color: #ffffff;
.share-notes {
height: 150px;
textarea {
height: 100%;
line-height: 20px;
color: #4A4A4A;
}
.textplaceholder {
color: #9B9B9B;
font-size: 14px;
line-height: 20px;
}
}
.share-wrap {
display: flex;
flex-wrap: wrap;
.share-item {
position: relative;
border: 1px solid #d9d9d9;
padding: 7px;
width: 26%;
border-radius: 2px;
margin-right: 5px;
margin-bottom: 5px;
.delete {
position: absolute;
color: #cccccc;
top: -5px;
right: -2px;
}
.share-img {
width: 100%;
height: 0;
overflow: hidden;
margin: 0 auto;
padding-bottom: 100%;
}
.bgsize {
background-size: 100% 100%;
background-repeat: no-repeat;
}
&.item_dashed {
border: 1px dashed #d9d9d9;
background: #fafafa;
}
.chooseimg {
text-align: center;
color: rgba(0, 0, 0, 0.45);
font-size: 12px;
padding: 13px 0;
.addimg {
font-size: 25px;
padding-bottom: 10px;
}
span {
font-size: 7px;
color: rgba(0, 0, 0, .65);
line-height: 11px;
}
}
}
}
.share_prompt {
padding: 7px 0 12px 0;
font-size: 10px;
color: #9B9B9B;
line-height: 24px;
}
.share-activity {
display: flex;
align-items: center;
padding: 17px 0;
font-size: 14px;
.tip {
color: #4A4A4A;
font-size: 16px;
padding: 0 10px 0 5px;
}
.add-activity {
flex: 1;
color: #4A4A4A;
}
.under {
color: #9B9B9B;
font-size: 12px;
}
}
}
.released-btn {
margin: 30px 15px 0 15px;
button {
font-size: 16px;
line-height: 22px;
padding: 9px 0;
border: 1px solid #002FA7;
color: #002FA7;
border-radius: 3px;
background: #ffffff;
}
}
}
上面我们使用了 textarea 组件,下面我们来讲解 。
textarea 是由客户端创建的原生组件。
为什么强调原生组件呢?因为原生组件有限制:
z-index
有多高,都无法盖在原生组件上。position: fixed
overflow: hidden
来裁剪原生组件的显示区域value
: 输入框的内容placeholder
:输入框为空时占位符placeholder-class
:指定 placeholder
的样式类bindinput
:当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上。组件使用方法:
<textarea placeholder="分享新鲜事..." bindinput="changeText" ></textarea>
事件函数:
data:{
describe:''
},
changeText(e){
let describe = e.detail.value;
this.setData({
describe:describe
})
}
这样子我们就获取到 textarea 组件里面输入的内容了。
下一章节我们继续讲解 从本地相册选择图片 wx.chooseImage()
,将本地资源上传到服务器 wx.uploadFile()
。