微信小程序静态初步

社团微信小程序（1）

由于兴趣驱动，一直在学习微信小程序，由于之前一直学习Java，但是大三第一学期即将结尾，所以为了能让下学期的学习减少工作量所以就打算利用闲散时间开发小程序，于是就拿社团为例子，自己一步步摸索。
现在只是初步学习，所以这些天一直在搭建一个静态页面用来检验学习成果

一，首页构建

思路：
1.使用Lin Ui 组件的头像组件，“Hello Dream” 带圆角线框“开启梦想之旅”
2.使用tabar，做三个页面“首页”“内容”“我的”
3.首页页面，背景，导航栏，颜色均统一为一种颜色
4.首页中头像，文字，线框均纵向布局，且之间有间隔，头像组件距离顶部有间距。

代码如下
（app.js和app.wxss使用默认不需要改动，只改动app.json中代码）

{
  "pages":[
    "pages/home/home",
    "pages/content/content",
    "pages/mine/mine"
  ],
  "window":{
    "navigationBarBackgroundColor": "#48D1CC"
  },
  "tabBar": {
    "backgroundColor": "#48D1CC",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "pages/images/主页.png",
      "selectedIconPath": "pages/images/主页.png"
    },
    {
      "pagePath": "pages/content/content",
      "text": "内容",
      "iconPath": "pages/images/查看.png",
      "selectedIconPath": "pages/images/查看.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "pages/images/我的.png",
      "selectedIconPath": "pages/images/我的.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

我将三个页面都放在Page文件下

二.布置首页页面
（home.wxml）

<view class="index">
  <l-avatar class="l-avatar" size="200" placement="bottom" open-data="{{['userAvatarUrl','userNickName']}}"></l-avatar>
  
  <text class="home-text">Hello Drem</text>
 
  <view class="start">
    <text class="home-start">开启梦想之旅</text>
  </view>
  
</view>

（home.wxss）

page{
  background-color: #48D1CC;
}
.index{
 display: flex;
 flex-direction: column;
 align-items: center;
}
.l-avatar{
  margin-top: 160rpx;
}

.home-text{
  font-size: 35rpx;
  font-weight: bold;
  margin-top: 160rpx;
  /* 距离最近的元素底部的距离 */
  margin-bottom: 160rpx;
  padding:center;
  text-align: center;
}

.start{
  /* 圆角边框的弧度 */
  border-radius: 160px;
  /* 圆角边框：线条粗细 加粗 颜色 */
  border: 2px solid #405f80;
  width: 240rpx;
  height: 50rpx;
  /*水平居中*/
  text-align: center;
  /* 距离最近的元素顶部的距离 */
  margin-top: 100rpx;
  /* 垂直居中 */
  list-style: height 80rpx;
}
.home-start{
  /* 字体大小 */
  font-size: 35rpx;
  /* 字体加粗 */
  font-weight: bold;
  color: teal;
  /* 垂直居中 */
  list-style: height 80rpx;
  /* 水平居中 */
  text-align: center;
}

(home.json)

{
  "usingComponents": {
    "l-avatar":"/miniprogram_npm/lin-ui/avatar/index"
  }
}

因为使用了第三方的组件，所以我在home.json中做了设置,最后效果：