我的第一個微信小程序（二）--制作啟動頁

下面正式開始制作啟動頁

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