前言: 相对于oc或者swift来说，学习微信小程序给我感觉就是简单，明了，不绕弯子。基础不懂的同学可以去微信 小程序API学习
对于界面搭建，创建控件本文以自身demo为例
微信小程序自学Demo地址
先上图
DC35C4D8-B7D1-4B86-A7C0-91FA137DF4B6.png
界面样式正如上图所示，比较简单，主要就用到了几个标签1.<view></view>相当于父视图，里边可以放你想放的任一子视图 2.<text></text>，<label></label>这两个相当去文字控件 3.<input></input>这个标签相当于iOS中的textfield，输入框，
直接上创建代码和样式布局
<!--pages/personal/personal.wxml-->
<view class="container">
<!--姓名 -->
<view class='objectClass'>
<text>{{actualName}}</text>
<input placeholder='请输入' maxlength='15' bindinput='nameClick'>{{userName}}</input>
</view>
<!--性别 -->
<view class='objectClass'>
<text>{{sex}}</text>
<view class='changeSex'>
<label style='background-color: {{sexManColor}}' bindtap='setManClick'>男</label>
<label style='background-color: {{sexWomenColor}}' bindtap='setWomenClick'>女</label>
</view>
</view>
<!--出生年月 -->
<view class='objectClass'>
<text>{{birthdayTime}}</text>
<picker mode="date"
value="{{date}}"
start="1965-09-01"
end="2020-09-01"
bindchange="bindDateChange"
style='font-size: 35rpx'>
<view style='color: {{birthdayColor}}'>
{{birthdayTitle}}
</view>
</picker>
</view>
<!--底部灰色视图 -->
<view class='bottomNormalView'></view>
<!--最高学历选择 -->
<view class='objectClass'>
<text>{{education}}</text>
<text bindtap='selectEducation' style='color: {{educationColor}}'>{{educationTitle}}</text>
</view>
<!--工作年限选择 -->
<view class='objectClass'>
<text>{{workYear}}</text>
<picker bindchange="bindPickerChange"
value="{{index}}" range="{{array}}">
<view style='color: {{workYearColor}};font-size: 35rpx'>
{{workYearTitle}}
</view>
</picker>
</view>
<!--底部灰色视图 -->
<view class='bottomNormalView'></view>
<!--手机号码 -->
<view class='objectClass'>
<text>{{phoneText}}</text>
<input placeholder='请输入' maxlength='11' bindinput='phoneClick'>{{phoneNumber}}</input>
</view>
<!--联系邮箱 -->
<view class='objectClass'>
<text>{{emailText}}</text>
<input placeholder='请输入' maxlength='100' bindinput='emailClick'>{{emailNumber}}</input>
</view>
<!--底部灰色视图 -->
<view class='bottomNormalView'></view>
<!--所在城市 -->
<view class='objectClass'>
<text>{{cityText}}</text>
<text style='color: {{cityColor}};font-size: 35rpx' bindtap='cityClick'>{{chouseCity}}</text>
</view>
<!--当前状态 -->
<view class='objectClass'>
<text>{{userText}}</text>
<text style='color: {{jobStateColor}};font-size: 35rpx' bindtap='jobStateClick'>{{chouseJobState}}</text>
</view>
<!--一句话介绍自己 -->
<view class='normalView'>一句话介绍自己</view>
<view class='item_tarea'>
<textarea placeholder='用简短的一句话概括介绍以下您自己吧' maxlength='58' bindinput="bindTextAreaBlur"></textarea>
<text>{{oberseverAreaLength}}</text>
</view>
<button bindtap='comfirmData'>保存</button>
</view>
代码注释比较详细，主要样式的话，这里和html很相似的，可能唯一区别就是px改为了微信小程序的rpx了。样式布局同样采用的是class声明，然后在wxss里边进行布局，这里用到的css样式如下
/* pages/personal/personal.wxss */
.objectClass{
width: 90%;
height: 86rpx;
/*让文字在当前view垂直剧中，可以使用行高 */
line-height: 86rpx;
/*设置视图底部线条，加颜色 dotted代表虚线 solid 代表实线*/
border-bottom: 1rpx #eeeeee solid;
/*保证子视图在同一个水平线内 */
display: flex;
flex-flow: row;
/*
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
*/
justify-content: space-between;
}
.objectClass input{
text-align: right;
line-height: 86rpx;
height: 86rpx;
font-size: 35rpx;
}
.objectClass text{
/*文字大小 */
font-size: 35rpx;
}
/*性别选择样式 */
.changeSex{
width: 40%;
text-align: right;
}
.changeSex label{
/*label需要做特殊处理，行内元素给宽高没用，必须改变为行内块元素才可以给宽高起作用 */
display: inline-block;
height: 60rpx;
line-height: 60rpx;
width: 40%;
text-align: center;
}
.bottomNormalView{
background-color: rgb(239, 239, 239);
height: 20rpx;
width: 100%;
margin-top: -1rpx;
}
.normalView{
height: 60rpx;
line-height: 60rpx;
background-color: rgb(239, 239, 239);
text-align: left;
width: 100%;
font-size: 30rpx;
/*缩进 */
text-indent: 24rpx;
margin-top: -1rpx;
}
textarea{
font-size: 33rpx;
padding: 20rpx 10rpx;
width: 100%;
height: 200rpx;
line-height: 30rpx;
overflow-x: hidden
}
button{
background-color: orange;
width: 100%;
border-radius: 0;
color: #fff;
}
.button-hover{
background-color: orange;
color: #fff;
}
.jobState{
width: 400rpx;
}
.item_tarea{
width: 100%;
position: relative;
/*英文，数字不会自动换行，需要强制换行 */
word-wrap:break-word;
}
.item_tarea text{
position: absolute;
right: 12rpx;
bottom: 0;
}
