分享一个微信小程序编辑页面的WXML模板

分享一个微信小程序编辑页面的WXML模板

最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建，大致格式如图所示：

• 顶部：返回按钮和确认按钮，在中间还可以自行加上一些别的元素。
• 中间部分：编辑的标题和内容
• 底部：显示内容的字数或者另外一些别的操作(例如添加图片，设置日期等等…)

模板文件WXML:

用到的组件库为VantWeapp
组件的使用方法可以看微信小程序中使用VantWeapp组件库

<!--pages/addArticle/addArticle.wxml-->
<view class="header">
    <view class="backBox" bindtap="backUp"><van-icon name="arrow-left" color="#CAB9E3" size="20px" /></view>
    <view class="finishBox" bindtap="prepareConfirm"><van-icon name="success" color="#CAB9E3" size="20px" /></view>
</view>
<input value="{{ title }}" placeholder="标题(可选)" maxlength="18" class="titleArea" bindinput="titleInput"></input>
<textarea value="{{ content }}" placeholder="生活不可能像你想象的那么好,也不可能像你想象的那么糟。" placeholder-style="font-size: 14px;" show-confirm-bar="{{false}}" maxlength="-1" class="contentArea" style="height: calc(90% - 44px)" bindinput="contentInput"></textarea>
<!-- 新增底部操作区域 -->
<view class="footer">
  <view class="wordsNumber">当前字数：{{content.length}}</view>
  <view class="handleBox">
    ...
  </view>
</view>

在制作中间部分即编辑的标题和内容部分时，原本以为使用组件会更方便地进行数据的双向绑定，但是样式始终不是很好，所以没用到组件，用小程序原生的官方组件来写。