一、开源LinUI组件库实例

LinUI环境搭建

首先安装nodejs/npm环境
进入项目目录，使用npm init进行项目初始化,新增package.json文件
使用npm i lin-ui@0.8.7安装环境
小程序需要选择"工具"-"构建npm",完成引用包的构建，项目结构如下

使用自定义组件avatar

首先在页面的json文件中进行如下设置

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

随后在页面的页面的.wxml中引入自定义组件即可

<l-avatar class="l-avatar" placement="bottom" shape="circle" open-data="{{['userAvatarUrl','userNickName']}}" size="200"/>

注：在编译时报了如下错误

是由于调试基础库版本过低导致，调高版本即可解决

二、小程序内置组件实例

swiper组件-滑块视图容器

swiper需要与swiper-item结合使用

<view>
  <swiper>
    <swiper-item>
      <image src="/images/bestplayers.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/jumpfly.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/lpl.png"></image>
    </swiper-item>
  </swiper>
</view>

注：设置swiper中图片的宽和高，需要在swiper与image中都设置宽高

<swiper style="width:100%;height:460rpx">
    <swiper-item >
      <image style="width:100%;height:460rpx" src="/images/bestplayers.png">	  </image>
    </swiper-item>
</swiper>

swiper组件实现显示标志点和定时滑动功能

<swiper indicator-dots="true" autoplay="true">

注:若要取消标志点，需要indicator-dots="{{false}}"，true值可省略

swiper其他组件属性使用

可在微信开放文档中查看具体属性

下面是标志点设成纵轴，循环，定时1s滚动写法

<swiper interval="1000" circular vertical indicator-dots autoplay>

效果图如下

三、flex布局设计内容部分

基本思想：从整体到局部,从外至内

分析设计每个单独模块的布局

首先书写wxml的文字结构

<view class="post-container">
  <view class="post-author-date">
    <image class="post-author" src="/images/avatar/3.png"></image>
    <text class="post-date">Dec 27 2020</text>
    <text></text>
  </view>
  <text>2020LPL季后赛观赛指南</text>
  <image src="/images/lpl.png"></image>
  <text>英雄联盟赛事官网...</text>
  <view>
    <image src="/images/icon/chat.png"></image>
    <text>100</text>
    <image src="/images/icon/view.png"></image>
    <text>102</text>
  </view>
</view>

然后添加wxss中添加对应样式,使用flex实现布局 下面列举了整体的样式和用户信息模块的样式,模块其他部分原理类似

.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top: #ededed 1px solid;
  border-bottom: #ededed 1px solid;
  padding-bottom: 10rpx;
}
.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
}
.post-date{
  margin-left: 20rpx;
  font-size: 26rpx;
}

最终效果图如下

微信小程序入门2--组件与页面布局(一)