添加3个大小不同的气泡代码

其样式，如下：

/*气泡样式*/
.big-circle{
  background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/
  width: 260px;
  height: 260px;
  border-radius: 130px;/*半径*/
  position: absolute;/*绝对位移方式*/
  left:-150px;
  top:150px;
}
.medium-circle{
  background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/
  width: 160px;
  height: 160px;
  border-radius: 80px;/*半径*/
  position: absolute;/*绝对位移方式*/
  right:-80px;
  top:110px;
}
.small-circle{
  background-color: rgba(0, 165, 34, 0.7);/*半透明背景色*/
  width: 50px;
  height: 50px;
  border-radius: 25px;/*半径*/
  position: absolute;/*绝对位移方式*/
  left:-10px;
  bottom:110px;
}

添加名字和名字拼音代码，其中{{name}}和{{spell}}是在js文件中date{ }中声明的变量

其样式如下：

/*位置样式*/
.cover-info{
  position: absolute;/*绝对位移方式*/
  left: 50px;/*位移位置*/
  top: 30px;
}
/*文字样式*/
.cover-name{
  font-size: 30px;
  font-weight: bold;/*加粗*/
  display: block;/*block模型，自动换行*/
  letter-spacing: 1px;/*字符间距*/
}
/*拼音部分文字样式*/
.cover-spell{
  font-size: 20px;
  letter-spacing: 1px;/*字符间距*/
}

.photo{
  display: block;/*将模型修改为block模型*/
  width:90%;/*设置宽度为90%，避免图片溢出*/
  margin-left: auto;/*左对齐：自动*/
  margin-right: auto;/*右对齐：自动*/
  left: 5%;
  position: fixed;/*悬挂到底端*/
  bottom: 0;/*底端距离是0像素*/
}

添加图片代码

若需要保持原图片比例，需要在<image></image>中添加mode="widthFix"

若修改图片格式，需要为图片定义一个类进行设置class="photo"，然后在wxss文件中对class进行编写。

动态获取屏幕尺寸，并将其保存到模型层。

在页面上面根据该尺寸设置高度。

在sitemap.json文件中修改页面被爬虫索引（默认全部页面都允许，不用修改）

另外"desc:"后面跟的是备注信息，可以不管。

在app.json中的"navigationBarTitleText": "WeChat",中修改导航条文字

在app.wxss中添加全局样式

page{  
    color: #333;  
    background-color: #fff;
}

在app.json中的"navigationBarTitleText": "WeChat",中修改导航条文字

在app.wxss中添加全局样式

page{  
    color: #333;  
    background-color: #fff;
}

修改纵向对齐方式

.container{
    display:flex;
    flex-direction:row; //水平排列（从左到右）
    justify-content:space-around; //环绕对齐
    background-color:pink;
    height:200px;
    align-items:flex-start;//默认顶端对齐
    //align-items:flex-end;//底端对齐
    //align-items:center;//垂直居中对齐
    //align-items:stretch;//拉伸对齐，该对齐需要在控件的类中添加htight:auto;属性
    //align-items:baseline;//文字基线对齐，根据上一个文件的底下基线对齐（需空间有文字）如图
}

修改水平对齐方式
.container{
    display:flex;
    flex-direction:row; //水平排列（从左到右）
    justify-content:flex-start; //默认为起点对齐（左对齐） 
    //justify-content:flex-end;     //末端对齐（右对齐）
    //justify-content:center;         //居中对齐
    //justify-content:space-between; //两端对齐
    //justify-content:space-around; //环绕对齐，每个控件之间距离相等
}

.container{
    display:flex;
    //flex-direction:row; //默认为水平排列（从左到右） row-reverse（从右往左）
    flex-direction:column; //修改为垂直排列（从上到下） column-reverse（从下到上）
}

Flex布局的方向轴

1. Flex布局有两根方向轴：水平的主轴和垂直的交叉轴。

2. Flex布局默认排版方向为水平的主轴。
   

先在wxml文件中编写以下内容。

<view class="container">
    <view class="S1"></view>  
    <view class="S2"></view>  
    <view class="S3"></view>  
    <view class="S4"></view>
</view>

然后在对应的wxml文件中编写图中，每个类对应的内容。flex-grow:1;为弹性布局，该控件可以自动伸展以铺满屏幕，该方法可同时用在多个类中。

其中container为父类，空间对齐方法在里面。display:flex;

添加Flex布局

如果想要让某个空间实现Flex布局，必须要给它的父空间设置上Flex样式。

图一为html代码（若是wxml需要将div标签修改为view标签）

图二为css代码，只需写括号里面第一句现标准的写法。

Flex布局的优点

1. Flex布局可以设置空间的排列方向和顺序。

2. Flex布局可以设置各种对齐方式。

3. Flex布局可以设置弹性放大或者缩小。