上一章节我们学习了果酱先生的登录跟完善用户信息。

这一章节我们来学习如何发布打卡。涉及到的知识点有：

• 发布打卡如何布局
• textarea 原生组件
• 从本地相册选择图片 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 原生组件

textarea 是由客户端创建的原生组件。

限制

为什么强调原生组件呢？因为原生组件有限制：

• 层级最高，无论其他组件的设置的 z-index 有多高，都无法盖在原生组件上。
• 后插入的原生组件可以覆盖之前的原生组件。
• 部分 CSS 样式无法应用于原生组件
• 无法对原生组件设置 CSS 动画
• 无法定义原生组件为 position: fixed
• 不能在父级节点使用 overflow: hidden来裁剪原生组件的显示区域
• 原生组件还无法在 picker-view 中使用。

常用属性

• 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 组件里面输入的内容了。

总结

• 样式布局
• textarea 原生组件

下一章节我们继续讲解 从本地相册选择图片 wx.chooseImage()，将本地资源上传到服务器 wx.uploadFile()。