我的第一个微信小程序（二）--制作启动页

下面正式开始制作启动页

第一步：打开微信web开发者工具，创建项目

没有appid可以不填

 第二步：在项目根目录下添加，app.js,app.json,app.wxss不一定要添加。

 

在箭头指向的方向添加文件和文件夹，添加一个Pages文件夹，用于存放小程序页面，我们添加一个start启动页吧，在app.json里添加如下代码:

{
    "pages": [
      "Pages/start/start"
    ]
}

写完后，保存，在Pages/start这个文件夹下会自动生成start.js,start.json,start.wxml,start.wxss四个文件，是不是很方便，省的我们自己添加。

,再添加Images文件夹，存图片，最后的文件结构如下所示。

 下面开始添加启动页代码，在start.wxml里写，这里主要用到微信小程序组件，不知道的可以去这看看

下面就是主要的代码，大家可以自己试着写一写：

<!-- start.wxml -->
<view class="container">
    <image class="logo" src="/Images/alien.png"></image>
    <text class="userName">你好新手</text>
    <view class="start-container">
        <text class="start">开启我的小程序</text>
    </view>
</view>

/*start.wxss*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.logo {
  width: 250rpx;
  height: 250rpx;
  margin-top: 160rpx;
}

.userName {
  font-size: 33rpx;
  font-family: MicroSoft Yahei;
  font-weight: bolder;
  margin-top: 100rpx;
}

.start {
  font-size: 30rpx;
  font-family: MicroSoft Yahei;
  font-weight: bolder;
  line-height: 88rpx;
  color: blue;
}

.start-container {
  margin-top: 150rpx;
  border: 1px solid darkorchid;
  width: 250rpx;
  height: 88rpx;
  border-radius: 5px;
  text-align: center;
}

page {
  height: 100%;
  background-color: aqua;
}

css里主要用到弹性盒模型，display:flex;如果不懂可以看看看看这篇文章，讲的很详细

弹性盒模型

 

app.json
{
    "pages": [
      "Pages/start/start"
    ],
    "window": {
      "navigationBarBackgroundColor": "#00FFCC",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "外星人",
      "backgroundColor": "#00FFCC",
      "backgroundTextStyle": "light",
      "enablePullDownRefresh": false
    }
}

在start.wxss里大家看到了，尺寸单位并没有使用px作为尺寸单位，而是使用自适应单位rpx，这里就要说一下移动端的适配。下面看这个表：

移动设备	屏幕尺寸	pt（逻辑分辨率）	px（物理分辨率）	DPR(PX/PT)
iphone4	3.5寸	320*480	320*480	1(即1pt=1px)
iphone5/5s/5c	4.0寸	320*586	640*1136	2（即1pt=1px）
iphone6/6s	4.7寸	375*667	750*1334	2
iphone6/6s plus	5.5寸	414*736	1242*2208（渲染后达到1080*1920）	3
ipnone7	4.7寸	375*667	750*1334	2
ipnone7 plus	5.5寸	414*736	1242*2208（渲染后达到1080*1920）	3

 

 

 

 

 

    通过表格和图片对比，使用微信开发工具，我们选择了不同的逻辑分辨率,pt只和屏幕尺寸有关系，px即像素点，不能用px来描述长度，大小，pt和px可以理解为单位长度内像素点的个数，pc端px代表物理分辨率，但是移动端px代表逻辑分辨率。

   有了上面的概念，就可以讲讲rpx，iphone6下1px=1rpx=0.5pt