編寫第一個小程序頁面

筆記內容：開發第一個小程序頁面
筆記日期：2018-01-04

---

自動生成的小程序文件結構簡介

新建一個項目：

建立完項目後，能夠看到左邊有個手機窗口般的界面，這是效果的展現頁面：

還能夠查看啓動日誌：

右邊則是工程代碼編寫的地方，pages目錄下存放着全部頁面相關的文件或目錄，index目錄和logs目錄就表明着以上的兩個頁面：

程序的入口文件，這三個文件在全局中是惟一的，並且文件名稱是固定的：

接着咱們先來看看web開發常見的文件結構：

而後再來看看小程序的文件結構：

能夠看到，與web開發的文件結構很類似，因此不難看出實際上小程序開發用的就是web的技術。

在上圖的文件結構中，.js文件和.json就沒什麼好說的了，就是JavaScript文件和json文件，除此以外能夠看到有.wxml和.wxss文件，這個兩個文件分別對應着html和css文件。並且也有就近原則：當有兩個樣式文件對某個組件設置了樣式的話，會以最近的那個樣式文件爲準。例如，我要改變index頁面的文本顏色，我在app.wxss文件中設置了文本顏色爲紅色，而後再到index.wxss文件裏設置了文本顏色爲藍色，最終會以index.wxss文件裏設置的爲準，由於它離index.wxml近。其餘文件也是同樣的。

關於頁面的層級：
上圖中的index.wxml是一級頁面，而logs.wxml是二級頁面，雖然看似兩個頁面的目錄是平級的，可是由於須要經過index.wxml才能到logs.wxml，因此logs.wxml是二級頁面，而官方規定小程序的層級頁面最多隻有五級。

新建一個本身的項目

上面演示建立的是官方提供的模板項目，此次咱們來建立一個本身的項目：

建立完成，是一個空白的項目：

因爲尚未建立入口文件，因此控制檯會報錯。

項目建立好後，開始建立相應的目錄、文件：

基本的目錄、文件建立完成：

開始製做項目啓動頁

而後咱們來編寫第一個程序：Hello World！，首先編輯welcome.wxml文件爲如下內容：

<view>
  <text>hello world！</text>
</view>

這段代碼意思是在窗口中顯示這個文本內容。

編輯welcome.js爲如下內容：

Page({

})

這是爲了調用頁面對象，即使什麼都沒有寫，由於新版本不這麼作會報錯。

編輯app.json爲如下內容：

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。上面這段是用於指明頁面文件所在的路徑。

運行結果：

ps：除了微信官方提供的開發工具，咱們也可使用其餘的開發工具進行代碼的編輯，例如：Sublime、WebStorm等，而後代碼調試在微信開發工具裏進行調試就能夠了。

關於移動設備的分辨率和自適應單位rpx

首先來看一個問題，經過這個問題來描述移動設備的分辨率：
問題：爲何模擬器下ip6的寬度分辨率是375，而設計圖通常給750？
咱們先來看看下圖中，Iphone系列機型的物理分辨率：

咱們先來看看圖中的pt和px，pt是邏輯分辨率，簡單來理解就是一個長度單位、視覺單位，與屏幕的尺寸相關。而px則是物理分辨率，與屏幕的尺寸無關，px是像素點，點是不能描述大小的，1px表明1個像素點。一個邏輯分辨率（pt）下能夠包含多個物理像素點（px），因此在一樣的pt分辨率下，px分辨率越高的屏幕就會越清晰。上圖中的Reader就描述了每一個機型的pt分辨率和px分辨率的關係，@1表示1:1的關係，@2則是2:1，@3則是3:1，以此類推。

PPI那一列表示的是每一寸包含多少個物理像素點，那麼這個數字是怎麼求出來的？使用勾股定理，例如求iPhone3GS的PPI，就是以320x480平方開根號而後除以3.5英寸就能獲得PPI的數字。

知道邏輯分辨率和物理分辨率的關係後，如今就能回答剛剛那個問題了：在小程序模擬器中給出的ip6的寬度分辨率是375，這是邏輯分辨率（pt），而不是一個物理分辨率（px）。設計圖通常都給的是物理分辨率，在上圖中能夠看到ip6的邏輯分辨率和物理分辨率的關係是@2x，也就是2倍關係，或者說2:1的關係，因此就能夠得知：375 * 2 = 750。這就是爲何模擬器中給的是375，而設計圖通常給的是750的緣由了。

自適應單位rpx：

首先要知道在小程序中最好是使用rpx來表示分辨率，rpx表示的是邏輯分辨率，而一般咱們web前端開發中使用的px是物理分辨率。使用px來表示分辨率不能起到自適應的效果，而rpx則有自適應的效果，由於使用rpx的話小程序會自動在不一樣的分辨率下進行轉換。而px則不能夠，因爲小程序會運行在不一樣分辨率的手機上，因此使用px是不行的，由於分辨率一變樣式就會亂掉。

px、rpx以及pt單位在iphone6下的換算關係（注意是iphone6，在其餘不一樣分辨率的機型下就不同了）：

1px = 1rpx = 0.5pt

爲何要用iphone6的物理分辨率來作設計圖？理由只有三個字：好換算，例如ip6下是1px=1rpx，而在ip6 plus下是1px=0.6px，這樣比較起來就能夠看出ip6 plus換算起來就比較麻煩，而ip6則很方便直接就是1:1的關係，這是由於小程序當時就是基於iphone6來設計的rpx。

要注意的是：不是全部的單位都適合用rpx，由於有些樣式的分辨率就不須要有自適應的效果，這種狀況下使用rpx只會拔苗助長，因此要根據狀況來使用相應的單位。

編寫一個帶有圖片的簡單頁面，圖片的分辨率是 200x200px ：

<!-- wxml是編寫小程序骨架的文件 -->
<!-- view和html中的div是同樣的 -->
<view>
  <!-- rpx是邏輯分辨率，在iphone6下與px的轉換關係是1:1的比例 -->
  <image style='width:200rpx;height:200rpx' src='/images/image.png'></image>
  <text>Hello Wolrd！</text>
  <view>
    <text>開啓小程序之旅</text>
  </view>
</view>

以上這個頁面的圖片能夠適應不一樣機型的屏幕分辨率。

注意：在小程序中，只有被text標籤包圍的文字，才能在手機上長按選中。

樣式與彈性盒子模型

在咱們編寫web頁面的時候須要引用某個css文件中的樣式都須要使用link標籤來將css文件導入後，才能進行引用，可是在小程序中卻不須要，直接引用就能夠了。例如，我在wxss文件裏有這樣一個樣式：

.user-avatar{
  width: 200rpx;
  height:200rpx
}

wxml裏我不須要導入這個樣式文件也可以引用該文件中的樣式：

<!-- wxml是編寫小程序骨架的文件 -->
<!-- view和html中的div是同樣的 -->
<view>
  <!-- 無需導入wxss文件 -->
  <image class='user-avatar' src='/images/image.png'></image>
  <text>Hello Wolrd！</text>
  <view>
    <text>開啓小程序之旅</text>
  </view>
</view>

這是由於咱們在app.json文件中已經配置好了：

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

這段配置會把welcome目錄下以welcome爲前綴的文件都關聯到一塊兒，因此在wxml中就無需去導入樣式文件就能引用樣式了。

關於style中寫樣式仍是在樣式文件中寫樣式：

• 若是是靜態樣式的話，寫在樣式文件裏會提升性能和複用性
• 動態樣式則能夠寫在style屬性裏，方便於動態改變

關於彈性盒子模型：
可能不少人在web開發時使用的是塊（block）來做爲顯示，使用block的話，須要本身手動去調整樣式的排列，而使用彈性盒子模型（flex），就能夠很方便的橫向或縱向排列樣式，例如我要一個view標籤內的元素都縱向排列而且居中就能夠這麼寫：

.container{
  // 使用彈性盒子模型
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar{
  width: 200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.user-name{
  font-size: 32rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
}
.moto{
  font-size: 22rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
}

若是有通用性較強的樣式能夠寫在app.wxss裏，這樣就能夠做用於全局。

而後在wxml裏引用這個樣式便可：

<!-- wxml是編寫小程序骨架的文件 -->
<!-- view和html中的div是同樣的 -->
<view class="container">
  <!-- 無需導入wxss文件 -->
  <image class="user-avatar" src="/images/image.png"></image>
  <text class="user-name">Hello Wolrd！</text>
  <view>
    <text class="moto">開啓小程序之旅</text>
  </view>
</view>

運行結果：

上方這個黑色的導航欄能夠經過配置app.json來改變顏色，配置內容以下：

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db"
  }
}

其餘相關配置的官方參考文檔地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

完善以前編寫的頁面，如下是完整的代碼：
welcome.wxml代碼：

<!-- wxml是編寫小程序骨架的文件 -->
<!-- view和html中的div是同樣的 -->
<view class="container">
  <!-- 無需導入wxss文件 -->
  <image class="user-avatar" src="/images/image.png"></image>
  <text class="user-name">Hello Wolrd！</text>
  <view class="moto-container">
    <text class="moto">開啓小程序之旅</text>
  </view>
</view>

welcome.wxss代碼：

.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;
}
image{
  border-radius: 50%;
}
page{
  // 小程序頁面中會默認有一個page標籤，相似於html中的根標籤
  height: 100%;
  background-color: #b3d4db;
}

app.wxss代碼：

text{
  font-family: MicroSoft Yahei;
}

app.json配置內容：

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db"
  }
}

完成效果：