1. 如果是我们自己编辑页面的话,先是在.wxml里面编辑,之后出现报错,那是因为在app.json为空,应该在其里面编辑代码:
{
"pages":[
"pages/welcome/welcome"
]
}
注意这里是{}大括号,而不是小括号。
2. 在wxml中编写小程序的骨架。
3. 物理像素/2=逻辑像素,即:2rpx=1px;在微信小程序中很少直接使用px。因为在机器中并不是所有分辨率都是一样的。
4. 可以再wxml中写样式,也可以在wxss(一般正式在这个里面书写)中书写。
5. 在class和style里面都可以编写样式,但是究竟他们两个有没有区别呢?当然有:
静态属性:用class
动态属性:用Style
6. 如果在wxss样式中有通用的样式,比如说字体样式和颜色都一样,那么就可以放在app.wxss中。(全局)
7. 在调试的时候出现:“pages/welcome/welcome 出现脚本错误或者未正确调用Page()”----原因以及解决办法为:可能在welcome.js里面编辑的为空,我们要想解决这个问题,应该在welcome.js里面编辑:Page({})方法。
8. 当要想把共同的样式,比如说是6中所说。则应该在app.wxss中设置:text{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}而不是<text></text>。
9.要想设置背景颜色,如果单单在container里面设置是不行的,颜色没有铺满。即使设置了100%。那我们如果提前知道了显示器的屏幕大小,比如说苹果6,那我们可以在container里面背景颜色、并且设置为 height: 1334rpx;
但是,假设我们要设置的背景大小不知道或者说是变化的,那么这种方法就是行不通的。下面我们再在container外面嵌套page。如下:
page{
height:100%;
background-color: #b3d4db;
}
10.1个pt可以有1个或者多个px组成,注意:在苹果6中,一个pt是由2个px组成的。苹果6中1px=1rpx=0.5pt。
11. 之前出现的图片和“哈喽,七月”在一行上,然后也不对齐的现象,原因就是老师剪切视频的时候出错了。但是我根据自己的经验也能解决这个问题,但是不知道代码到底对不对,先记住:
.container{
display: flex;
flex-direction:column;
align-items:center;
height: 1334rpx;
}
.user-avatar{
width: 100rpx;
height: 100rpx;
margin-top: 300rpx;
margin-left: 300rpx;
border-radius: 40%;
}
.user-name{
display: flex;
margin-top: 100rpx;
margin-left: 280rpx;
font-size:32rpx;
font-weight: bold;
text-align: center;
}
.moto-container{
display: flex;
margin-top:100rpx;
margin-left: 200rpx;
border: 1rpx solid #405f80;
width:300rpx;
height:90rpx;
border-radius: 5px;
text-align: center;
}
.moto{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 23rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}
page{
height:100%;
background-color: #b3d4db;
}
其实,修改过来也很简单。在welcome.wxml中View设置
<view class="container">
原来的代码如下:
.container{
display: flex;
flex-direction:column;
align-items:center;
}
.user-avatar{
width: 100rpx;
height: 100rpx;
margin-top: 300rpx;
border-radius: 40%;
}
.user-name{
margin-top: 100rpx;
font-size:32rpx;
font-weight: bold;
text-align: center;
}
.moto-container{
display: flex;
margin-top:100rpx;
border: 1rpx solid #405f80;
width:202rpx;
height:90rpx;
border-radius: 5px;
text-align: center;
}
.moto{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 23rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}
page{
height:100%;
background-color: #b3d4db;
}