個人第一個微信小程序（二）--製做啓動頁

下面正式開始製做啓動頁

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