编写第一个微信小程序界面
不忘初心，方得始终；初心易得，始终难守。
传统的 web 结构
小程序文件目录结构
小程序页面层级结构
编写第一个小程序
1. 创建小程序目录结构
2. 编写代码
welcome.wxml
<!-- wxml 是编写小程序骨架的文件 -->
<!-- <div>一样的效果 -->
<view class='container'>
<image class='user-avatar' src='/images/1.jpg'></image>
<text class='user-name'>Hello , 王佳伟</text>
<view class='moto-container'>
<text class='moto'>开启小程序之旅</text>
</view>
</view>
welcome.wvss
.container{
/* 布局修改 */
display: flex;
/* 纵向排列 */
flex-direction: column;
/* 内容居中 */
align-items: center;
}.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}.user-name{
margin-top: 100rpx;
font-size: 32rpx;
font-weight: bold;
}.moto{
font-size: 22rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}.moto-container{
margin-top: 200rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
}page{
height: 100%;
background-color: #b3d4db;
}
app.json
{
"pages": [
"pages/welcome/welcome"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
app.wxss
text{
/* 设置字体 */
font-family: MicroSoft Yahei;
}
移动设备的分辨率与 rpx
为什么模拟器下ip6的分辨率为375而设计图一般给750？
pt ：逻辑分辨率，和屏幕物理尺寸有关，可以简单的理解为长度和视觉单位。
px ：物理分辨率，与屏幕尺寸无关，简单理解为像素点，因为点不能描述大小，只能描述个数，所有不是长度单位。
关系：1个 pt 可以有一个 px 构成，也可以有两个，还可以有3个甚至更多组成。
ip6 下2个 px 构成一个 pt。
PPI：每一寸包含多少物理像素点。
因为小程序模拟器给出的ip6的375分辨率是逻辑分辨率，设计师给的设计图750分辨率是物理分辨率，存在两倍关系。
如何做不同分辨率设备的自适应？
以 ip6 的物理像素750X1334为视觉稿进行设计，而在小程序中使用 rpx 为单位。
ip6 下 1px = 1rpx = 0.5pt 。
使用 rpx 小程序会自动在不同分辨率下进行转换，而使用 px 为单位不会。
为什么要用 iphone6 的物理分辨率来做设计图？
ip6 下 1px = 1 rpx
ip6 plus 下 1px = 0.6 rpx
官方API也是建议使用ip6进行设计换算
注意：不是所有的单位都适合用 rpx，例如字体，字体自适应的话，小机型就会造成字体过小，用户看不清，应该用px 。
