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分离