微信小程序学习笔记(三)——两名片小程序实例

项目一

项目结构

新建img文件夹，放入一张图片(练手的话随便即可)

title

修改app.json中 navigationBarTitleText值即可

index.wxml

首先将我们整体界面的结构构造出来。

代码如下：

<image src="../img/pic.jpg"></image>
<view class="comment">
仰望星空亦要脚踏实地
</view>
<view class="body">
    <view class="title">星空是什么?</view>
    <view>星空是由肉眼可见的宇宙中的天体形成的。</view>
    <view></view>
    <view class="title">天体是什么?</view>

    <view>所谓的天体指的就是人们平日所说的星星，指的是肉眼可见的宇宙中的天体。星星内部的能量的活动使星星变的形状不规则。</view>

</view>

index.wxss

现在就是调整样式，规划布局。

代码如下：

.comment{
  text-align: center;
  font-size: 14px;
  color:#999;
}
.body{
  /* 左右间距 */
  padding: 30px;
  /* 行高 */
  line-height: 2;
}
.title{
  font-size: 18px;
  /* 加粗 */
  font-weight: bold;
  /* 上间距 */
  padding-top: 10px;
  /* 下间距 */
  padding-bottom: 10px;
}

最终效果

项目二

项目结构

title

修改app.json中 navigationBarTitleText值即可

index.wxml

首先将我们整体界面的结构构造出来。

代码如下：

<view class="title">
  <image class="bg" src="../img/bg.jpg" mode="widthFix">
  <image class="avatar" src="../img/avatar.png"></image>
  </image>

  <view class="info">
    <view class="name">文师傅</view>
    <view class="detail">
      <view>著名作者</view>
      <view>著作:《胃不好的人如何吃饭》</view>
      <!-- 空格让两个书名对齐 -->
      <!-- &nbsp;适应字体大小的空格 -->
      <!-- &ensp;半个汉字的空格-->
      <!-- &emsp;一个汉字的空格 -->
      <view><text decode="{{true}}">&nbsp;&ensp;&ensp;&ensp;&ensp;《如何少奋斗十年》</text>
      </view>
    </view>
    </view>
  </view>

index.wxss

调整样式，规划布局。

代码如下：

.title{
  /* 四边距 */
  margin: 10px;
  position: relative;/*相对定位*/
}
.bg{
  width: 100%;
  /* 圆角 */
  border-radius: 5px;
  /*  阴影
  参数分别为x偏移量，y偏移量，模糊半径，阴影颜色
  */
  box-shadow: 0 0 5px black;
}
.avatar{
  width: 60px;
  height: 60px;
  position: absolute;/*绝对定位*/
  top: 10px;
  right: 20px;
}
.info{
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 16px;
  color: #5F687E;
}
.name{
  /* 加粗 */
  font-weight: bold;
}
.detail{
  margin-top: 10px;
  margin-bottom: 10px;
}

最终效果

内容纯属搞笑，如有雷同，纯属撞鬼。

项目地址

CSDN下载