微信小程序学习1界面搭建

前言: 相对于oc或者swift来说，学习微信小程序给我感觉就是简单，明了，不绕弯子。基础不懂的同学可以去微信 小程序API学习

对于界面搭建，创建控件本文以自身demo为例

微信小程序自学Demo地址

先上图

界面样式正如上图所示，比较简单，主要就用到了几个标签1.相当于父视图，里边可以放你想放的任一子视图 2.，这两个相当去文字控件 3.这个标签相当于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;
}

大家有没有发现，这个作者写的代码，注释不是一般的详细哈。因为我也是初学者，便于记忆所以不会的不懂的地方都加了注释，方便以后观看哈。

以上就是作者写的第一个微信小程序Demo，写出来加深印象同时也是给又需要的人观看。最后再附上demo地址

#

微信小程序自学Demo地址

下一章节会讲下具体代码内部js的基本使用