编写第一个微信小程序界面

　　不忘初心，方得始终；初心易得，始终难守。　　

传统的 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 。

巴特西

编写第一个微信小程序界面

编写第一个微信小程序界面

传统的 web 结构

小程序文件目录结构

小程序页面层级结构

编写第一个小程序

移动设备的分辨率与 rpx

如何做不同分辨率设备的自适应？

为什么要用 iphone6 的物理分辨率来做设计图？

最新文章

热门文章