个人第一个微信小程序（二）--制做启动页

下面正式开始制做启动页

第一步：打开微信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