201711671116 实训学习日志二

（一）主要内容

微信小程序项目环境基础搭建

1、使用微信web开发者工具搭建微信小程序项目；

2、微信小程序项目的基本配置；

3、完成作业：实现骰子布局，把整个骰子做出来放到页面上。

（二）.wxml中的源码

<view>

<text>骰子布局</text>

</view>

<div class="box">

<div class="main">

<div class="item"></div>

</div>

 

<div class="main2">

<div class="item"></div>

<div class="box1"></div>

</div>

</div>

<div class="box">

<div class="main3">

<div class="item"></div>

<div class="item"></div>

<div class="item"></div>

</div>

 

<div class="main4">

<div class="column">

<div class="item"></div>

<div class="item"></div>

</div>

<div class="column">

<div class="item"></div>

<div class="item"></div>

</div>

</div>

</div>

<div class="box">

<div class="main5">

<div class="column2">

<div class="item"></div>

<div class="item"></div>

</div>

<div class="column2">

<div class="item"></div>

</div>

<div class="column2">

<div class="item"></div>

<div class="item"></div>

</div>

</div>

 

<div class="main6">

<div class="column3">

<div class="item"></div>

<div class="item"></div>

</div>

<div class="column3">

<div class="item"></div>

<div class="item"></div>

</div>

<div class="column3">

<div class="item"></div>

<div class="item"></div>

</div>

 

</div>

</div>

 

（三）在.wxss中输入布局的源码

.box{

display:flex;

flex-direction:row;

justify-content: space-around;

align-items: center;

 

}

body{

background:#000;

}

.main {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 20px auto;

padding: 25px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

justify-content: center;

align-items:center;

}

.main >div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.main2 {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 50px auto;

padding: 25px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

justify-content: space-between;

}

.main2 >div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.box1:nth-child(2){

align-self:flex-end;

}

 

.main3 {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 30px auto;

padding: 25px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

}

.main3 >div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.item:nth-child(2){

align-self:center;

}

.item:nth-child(3){

align-self:flex-end;

}

 

.main4 {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 50px auto;

padding: 25px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

flex-wrap:wrap;

align-content:space-between;

}

.column >div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.column{

flex-basis:100%;

display:flex;

justify-content: space-between;

}

 

.main5 {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 50px auto;

padding: 25px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

flex-wrap:wrap;

align-content:space-between;

}

.column2 > div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.column2{

flex-basis:100%;

display:flex;

justify-content: space-between;

}

.column2:nth-child(2){

justify-content: center;

}

 

.main6 {

width: 100px;

height: 100px;

background: #eee;

border-radius: 20px;

margin: 50px auto;

padding: 15px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

display: flex;

align-content:space-between;

flex-wrap:wrap;

}

.column3 > div{

width:20px;

height:20px;

background:#000;

border-radius:10px;

}

.column3{

flex-basis:100%;

display:flex;

justify-content: space-between;

}

（四）界面效果