个人简介小程序设计|软件专业课堂案例

前言

这是我第一次接触微信小程序案例，之前编程的前端项目都是发布于网页。这个的寄生环境是微信客户端，编程语言也由html，css变成wxml，wxss。

<!--index.wxml-->
<view>
<!--头像区域-->
  <view class="top">
      <view class="user-img">
        <image src="/images/avatar.png"/>
      </view>
  </view>
  <!--详细信息区域-->
  <view class="menu">
    <view class="item">姓名：yu</view>
    <view class="item">年龄：20</view>
    <view class="item">性别：女</view>
    <view class="item">特长：绘画,弹尤克里里</view>
    <view class="item">爱好：编程</view>
  </view>
</view>

这个页面涉及到框架和样式还包含了一些图片，算数小项目只有一个主页。

有前端编程基础应该很好上手微信小程序的编程。

.top{
  background: #3A4861;
  width:100%;
  padding:30rpx 0;
}
.top .user-img{
  width:252rpx;
  margin:0 auto;
}
.top image{
  width:252rpx;
  height:252rpx;
  border-radius: 50%;
  border:6rpx solid #777F92;
}
.menu .item{
  height:96rpx;
  line-height:96rpx;
  border-bottom:2rpx solid #ccc;
  padding: 0 4rpx;
  font-size:34rpx;
}

注意wxss的尺寸单位是rpx

设计了边框的样式，头像图片圆角边框，字符大小。

对于一些美观度还可以优化字符对其，颜色统一风格。

细节注意

全局配置文件app.json中，显示页面的路径记得更改哦！

  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black"
  },