tar .com 結構 image www. 整體 文件中 hover 文件的

1、頁面註冊

既然我們希望跳轉到新的頁面，那自然要新建頁面相關的文件才行。在開篇已經講過，一個小程序頁面由四個文件組成，假如我們的頁面名為welcome，那麽這四個文件則是：

• welcome.js
• welcome.json
  
• welcome.wxml
  
• welcome.wxss

另外需要註意的是，json文件中至少包含空的結構體 { }，而js文件中最好包含空的Page({ })方法，否則會編譯出錯（新版的IDE中對於空的js文件好像已經不再報錯，不過還是建議加上） 新建頁面到這裏就結束了嗎？顯然沒有，你還必須主動告訴小程序，我新增了頁面，這樣小程序才知道哪些頁面需要加載，到哪讀取。這就是我們說的頁面註冊了，如何註冊？我們說過，app.json 是指小程序整體的配置文件，所以我們到這裏去進行 ”頁面註冊“： 其中pages和第一個welcome是指文件夾的名稱，而第二個welcome指文件夾下的文件名，因為小程序開發規定同個頁面的相關文件都必須同名，所以這裏也只需要名稱，不需要提供文件的類型後綴。
這樣就完成了welcome頁面的註冊，另外要提一點的是（以下摘錄自官方文檔）：pages，接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。文件名不需要寫文件後綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。
為了能看到效果，我們現在就把welcome頁面調整到第一行，這樣小程序的初始頁面就是welcome.wxml了： 為了能看到效果，我們在welcome.wxml中加上以下內容： 好了，保存一下代碼，我們現在點擊一下IDE上的”編譯“，然後看看模擬器，頁面註冊沒問題：

2、基本組件

這裏簡單闡述下三種最基本的組件，拋磚引玉，更詳細和更多的組件還是請參考API文檔。

<text>

文本組件，需要顯示的文本用<text>進行標記，文本組件中一個最要的特性就是：除了文本節點以外的其他節點都無法長按選中。如果你希望文本信息能被用戶長按選中，進行復制等操作，那麽一定要使用文本組件。
另外，<text>還有一些特有屬性：

• selectable 文本是否可選
• space 顯示連續空格
• decode 是否解碼

<image>

圖片組件，和HTML中的<img>類似，但是微信中該組件的屬性更加豐富靈活，其中重點提一下mode屬性，該屬性的說明為“圖片裁剪、縮放的模式”，它可以靈活地處理圖片的顯示內容。
其中mode有13種模式，介於篇幅，下面簡單列取幾種值：

• aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來
  
• widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
  
• top 不縮放圖片，只顯示圖片的頂部區域
  
• center 不縮放圖片，只顯示圖片的中間區域
  
• ...

<view>

視圖容器，該組件我個人理解和HTML中的<div>很相似，但是在小程序中還承載了諸如點擊效果等功能，如屬性：

• hover-class 指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
  
• hover-start-time 按住後多久出現點擊態，單位毫秒
  
• hover-stay-time 手指松開後點擊態保留時間，單位毫秒
  

以上屬性結合使用，比如可以模擬卡片點擊的動畫效果。

3、flex布局

對於小程序中的wxss布局方式，不推薦使用諸如position，float之類的屬性，而是采用flex布局，靈活快捷自適應，關鍵是自適應！
此處另起標題也是為了表達我對其強烈的推薦，因為我這個後端都能用flex很好的布局，可見其簡單快捷性！
強烈推薦阮一峰老師的兩篇博文：

• Flex 布局教程：語法篇
  
• Flex 布局教程：實例篇
  

微信小程序開發 [02] 頁面註冊和基本組件