小程序基本布局和样式控制及数据交互

1、页面视图文件wxml

（1）由一个根节点承载父容器

     <view class="main-panel">
       	<!-- 内部嵌套布局很多子节点 -->
     </view>

（2）行元素、块元素

   小程序中，默认<view></view>及<button></button> 为块元素，即按垂直方向分布；

   <image src="" /> 及 <text></text>为行元素，即按水平方向分布。

（3）小程序表单

wxml:

<!-- type="number"：限打开数字键盘 maxlength="11"：最多输入11个数字 bindinput="inputForm"：监听输入，绑定事件inputForm data-type="mobile"：监听事件绑定数据传参 value="": 输入框回显数据(空串""为清空)-->
<input type="number" maxlength="11" bindinput="inputForm" data-info="mobile" value="{{userInfo.mobile}}" />
<input type="number" maxlength="4" bindinput="inputForm" data-type="smsCode" value="" placeholder="请输入验证码" />

<!-- 文本域 -->
<textarea maxlength="300" bindinput="getIntroduce" placeholder="请简要的介绍一下你自己" value="{{userInfo.selfIntroduce}}" />
<text class="count">{{wordCount}}/300</text>

<!-- 富文本展示 -->
<rich-text nodes="{{userInfo.experience}}"/>

<!-- 日期控件：mode="date"；bindchange="pickDate"：监听变更，绑定事件pickDate -->
<picker mode="date" value="{{userInfo.birthday}}" bindchange="pickDate">
{{userInfo.birthday}}
</picker>

<!-- 开关滑动控件 -->
<switch color="#ff5555" checked="{{showHide}}" bindchange="showHide"/>
  
<!-- button 有时设定的css样式会无效果，需要通过内联样式style调控; bindtap绑定点击事件 -->
<button style="width: 92%; margin-top: 50rpx;" bindtap="confirm">
		<!-- 若子元素遮挡了父元素的点击事件，可以追加子元素点击事件，用catchtap而不用bindtap可以阻止冒泡 -->
		<text catchtap="confirm">确定</text>
</button>

js:

Page({
  data: {
      userInfo: {},
      wordCount: 0,
      showHide: true
  }，
  
  // 获取表单信息
  inputForm(e){
      // 获取表单输入框录入信息
      let value = e.detail.value
      // 与input标签中的data-type后缀保持一致，且全用小写
      let type = e.currentTarget.dataset.type
      if(type == 'mobile'){
          this.setData({
              ['userInfo.mobile']: value
          })
      }else if(type == 'smsCode'){
        this.setData({
       			 ['userInfo.smsCode']: value
        })
 		 }
  },

  // 获取简介
  getIntroduce(e) {
      let introduce = e.detail.value
      let wordCount = introduce.length
      if(wordCount > 0){
          this.setData({
              // 对象属性动态赋值
              ['userInfo.selfIntroduce']: introduce,
              wordCount: wordCount
          })
      }
  },

  // 选择日期
  pickDate(e){
      this.setData({
     			 ['userInfo.birthday']: e.detail.value
      })
  },

  // 在线或隐身
  showHide() {
      let showHide = this.data.showHide
      this.setData({
      			showHide: !showHide
      })
  },
  
})

（4）页面数据交互（小程序也遵循MVVM 双向数据绑定）

<!-- 分支 wx:if="{{true}}" wx:elif="{{true}}" wx:else -->
<!-- 循环 wx:for="{{dataList}}" wx:key="index" 遍历绑定当前元素默认为item；若嵌套循环，则内循环需指定wx:for-index="index1" wx:for-item="item1" -->
<view wx:if="{{dataList.length > 0}}">
    <view wx:for="{{dataList}}" wx:key="index" class="data-list">
        <view class="data-item">
            <view class="item-index">{{index}}</view>
            <view class="item-desc">{{item.desc}}</view>
        </view>
    </view>
</view>

2、页面展示样式文件wxss

（1）父容器整体布局样式

.main-panel {
        /* 设置自适应最大宽度100%，固定屏幕页面，避免左右移动 */
        max-width: 100vw;
        /* 设置自适应最小高度100%，屏幕页面超出后可以沿竖直方向自由滑动 */
        min-height: 100vh;
        /* 设置页面整体背景色 */
        background: #f7f7f7;
}

（2）flex 弹性布局

/* 弹性布局 */
display: flex;
/* 布局方向，默认为row, 水平方向; column则为垂直方向*/
flex-direction: column;
/* left:左对齐; right:右对齐; center:水平居中; space-between:两端对齐; space-around:均匀分布*/
justify-content: center;
/* 垂直居中 */
align-items: center;

（3）小程序样式尺寸单位 (rpx)

微信官方文档解释：
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，

则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

实际开发时，小程序端需根据UI自定义设置单位转换(比如我司的UI设计默认屏宽750像素，即750px, 则需要设置1rpx = 1px)：

设计图上选中某一节点后，复制右侧样式代码

 

（4）文字长度控制

  如果需要定宽不折行，但文字不定长，超出部分用省略号代替，可如下设置：

width: 100rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

（5）动态切换样式及图片

<!-- 动态切换样式背景 -->
<view class="bg{{showFlag ? 2 : 1}}"></view>

<!-- 动态切换图片 -->
<image src="/img/light-{{index}}.png"/>

（6）wxml文件中也可以使用内联样式style, 但不建议这么做, 尽量保持wxml与wxss分离