一、小程序概述
2017 年 1 月 9 日小程序正式上線，騰訊開放了個人開發者開發小程序，小程序從此就開始火爆，這一年，小程序狂攬 4 億用戶、1.7 億的日常活躍，上線 58 萬個。這是一個巨大的機會，對於企業宣傳，拉新用戶存在變革性的影響。
小程序的本質是：輕應用，就是不用安裝就能使用的手機APP。
“跳一跳”養成了大家下拉尋找常用小程序的習慣。
小程序對開發者而言也是非常友好的。
微信就是一個“虛擬機”，小程序使用JavaScript編程，小程序將JavaScript翻譯為機器能夠識別的Java、OC等語言，能操作硬件，比如蜂鳴器、陀螺儀、相冊、閃關燈、攝像頭。
小程序屏蔽了手機操作系統之間的差異，我們寫iOS的小程序、安卓的小程序是不需要考慮系統的差異的。
二、小程序開發賬號注冊
一個人最多只能有5個小程序項目，只能有5個小程序AppID，公司賬戶可以有20個小程序項目。
去自己的郵箱點擊激活右鍵的超級鏈接：
然后在打開的頁面選擇個人開發者，需要讓你填寫身份證號碼和用戶真實姓名，這里為了隱私就不截圖了。
三、獲得AppID下載使用開發者工具
3.1 添加小程序信息
3.2 添加開發者
可以有15個人為我們的小程序進行測試。
最高管理員有所有的權限：
添加了一些同學當做體驗者權限：
3.3 獲得AppID
即可看到AppID，備份好。
3.4 開發者工具
微信官方的開發者工具，集項目創建、開發、調試於一身。
下載地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安裝完畢之后，使用：
勾選「建立普通快速啟動模板」后，會為項目生成一份Hello World代碼，這樣可以方便我們了解小程序框架的代碼目錄結構。你也可以對比看看不勾選時建立的空項目是如何的。
微信小程序開發工具集成度很高：
實時調試熱更新
腳手架起步
預覽自動打包
控制台有網絡請求和console，集成了Chrome瀏覽器的功能
由於開發條件的限制，不可能對所有尺寸手機的屏幕進行測試，但往往很多bug出現在屏幕適配的問題上，所以這些提供了很多屏幕尺寸進行測試。
四、小程序程序開發初步
4.1 認識默認的文件夾結構
當創建“默認普通快速啟動模板”之后，項目會自動創建了一些文件。把這樣的能夠幫我們起步的工具叫做“腳手架”。React，有腳手架React-cli。Vue有腳手架vue-cli，還有第三方腳手架，比如yeoman。
零散文件：
| app.js |
微信小程序本質上JavaScript開發，程序都是.js結尾的。 app.js這個文件是整個小程序的第一個入口文件。寫法必須是App({})。 App函數是小程序內置的，每個項目必須有且只能有一個，必須出現在app.js中。大括號中描述這個App的一些生命周期和全局數據。 |
| app.json |
小程序當前項目的“程序配置”。可以配置小程序有哪些頁面，標題欄，tab欄等內容。 |
| app.wxss |
小程序的全局的樣式表，小程序使用wxss而不是css，基本上和css差不多。這個樣式表是所有頁面都能夠看見的樣式。 |
| project.config.json 項目配置文件 |
通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等，當你換另外一台電腦重新安裝工具時，還要重新配置。 project.config.json文件就是為了減少開發者重復配置開發工具而產生的，通過json數據格式，每個小程序項目都在配置文件里定義了開發者習慣的配置參數，無論開發環境如何變更，只要載入同一個項目的代碼包，開發者工具就通過project.config.json自動恢復開發項目的個性化配置，其中會包括編輯器的顏色、編輯設置、代碼上傳時自動壓縮等等一系列選項。 關於其他配置項細節可以參考文檔「開發者工具的配置」 。 事實上這個文件不需要手動更改，可以在菜單中可視化面板進行更改。
|
| page.json頁面配置文件 |
作為頁面的個性化配置，page.json里只能定義app.json中window 相關的配置項，這部份比較簡單，可以直接參考文檔「小程序的配置 page.json」，這里不作贅述。 |
刪除app.js文件大括號中的默認配置：
App({ });
看一下pages文件夾，文件夾中的子文件夾就是小程序的一個個頁面。一個頁面就是一個文件夾。
每個頁面文件夾中，有四個文件，都是同名文件。
| .js |
頁面的程序邏輯 |
| .json |
頁面的配置 |
| .wxml |
頁面的結構，類似於HTML |
| .wxss |
頁面的樣式表 |
將index.wxml的頁面刪除干凈：
<view class="container"> <view>你好，我是小程序</view> </view>
將index.js文件刪干凈：
Page({ });
這里Page函數是內置的函數，表示創建一個頁面。大括號中的內容是頁面的一些生命周期、數據。
刪除logs文件頁面，和utils文件夾，此時項目非常干凈：
4.2 app.json全局配置
每個小程序都是由多個頁面組成的，但在這些頁面之上，存在被所有頁面共用的內容，比如標題顏色，網絡超時設置等，這些被統稱為「全局配置」，而app.json文件里保存的就是這些配置內容。
「全局配置」包含5個部份，包括 ：
pages 「頁面路徑」：用於指定小程序里所有頁面對應的目錄路徑，只有加入到這個配置項里，頁面才會生效
window「窗口表現」：用於指定小程序窗口的外觀表現，比如上面提到的標題顏色、背景顏色等等
tabBar「底部tab」：小程序允放進開發者設置底部tab進行頁面切換，這個配置項就是用於定義底部tab按鈕樣式。
networkTimeout「網絡請求超時」：在開發小程序的開發過程中，不可避免會出現網絡請求失敗的情況，如果沒有設置一個網絡超時時間，在出現錯誤的時候，小程序就會一直等待請求響應數據，如果有了超時時間，在超過設置的時間沒有收到數據時，我們可以為用戶輸出異常反饋信息，並引導用戶后續可以嘗試的操作，提高程序代碼的可用性
debug「調試模式」：開啟調試模式時，調試信息會輸出到控制台里，包括頁面路由，數據更新，事件觸發等，可以幫助開發者快速定位常見問題。
關於其他配置項細節可以參考文檔「小程序的配置 app.json」 。
手冊：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
4.2.1 pages配置
接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。
文件名不需要寫文件后綴，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。
4.2.2 window配置
寫程序就兩個東西：API、算法，API不用背，算法忘不掉。
{ "pages": [ "pages/index/index", "pages/haha/haha" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#2bb", "navigationBarTitleText": "小灰灰的家", "navigationBarTextStyle": "white", "backgroundColor" : "#eee" } }
4.2.3 tabBar配置
tabBar的屬性：
其中list屬性數組項的屬性：
更改之后的完整的app.json文件：
{ "pages":[ "pages/index/index", "pages/meishi/meishi", "pages/lvyou/lvyou" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#2bb", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { "color": "#eee", "selectedColor": "#2bb", "backgroundColor": "#fff", "list": [ { "text": "首頁", "pagePath": "pages/index/index", "iconPath": "images/i1_a.png", "selectedIconPath" : "images/i1_b.png" }, { "text": "美食", "pagePath": "pages/meishi/meishi", "iconPath": "images/i2_a.png", "selectedIconPath": "images/i2_b.png" }, { "text": "旅游", "pagePath": "pages/lvyou/lvyou", "iconPath": "images/i3_a.png", "selectedIconPath": "images/i3_b.png" } ] } }
4.3小程序開發語言
小程序采用 WXML + WXSS + JS 三種開發語言組合，其和網頁編程采用的 HTML + CSS + JS 類似，WXML 用來描述當前這個頁面的結構，WXSS 用來描述頁面的樣式，JS 用來處理這個頁面和用戶的交互。
4.3.1 WXML
WXML（WeXin Markup Language）和 HTML 類似，也有標簽和屬性，但針對小程序平台做了些優化。
相較 HTML，小程序的標簽顯得更加簡潔，比如 div、section、header等塊級標簽統一為view、p、span、b 等文案類標簽統一為text，同時新增很多實用標簽，比如 picker 滾動選擇器、map 地圖、web-view 網頁容器等。
可以簡單理解為，小程序所有的標簽都是原生組件。
4.3.2 WXSS
WXSS（WeXin Style Sheets）是微信定義的一套樣式語言，其具有 CSS 大部分特性，同時為了更適合開發微信小程序，WXSS 對 CSS 進行了擴充以及修改。
小程序使用 rpx（responsive pixel）作為尺寸單位。屏幕寬度固定為 750rpx，設置了 rpx 單位的元素可以根據屏幕寬度進行自適應，所以設計稿統一以 750px 輸出（iPhone 6 標准）。
小程序沒有 html 、body標簽，如果想要設置頁面的樣式，可以直接使用 page 選擇器：
page{ background: #FFFFFF; }
4.3.3 JavaScript
小程序中JavaScript沒有 window、document 等變量，大部分瀏覽器中全局方法會被禁用，比如 alert。但也有部分被支持，比如 setTimeout、encodeURIComponent等，具體可以在開發者工具中嘗試使用，官方文檔並沒有詳細的介紹。
五、WXSS與CSS的開發差異
5.1選擇器
小程序官網上只列出6種可支持的選擇器，實際上可支持的選擇器很多。通過圖表，我們可以對比WXSS與CSS選擇器的差異：
| 選擇器 |
WXSS官方公布可用 |
目前WXSS版本實際可用 |
CSS版本可用 |
| .class |
O |
O |
CSS1 |
| #id |
O |
O |
CSS1 |
| * |
X |
X |
CSS2 |
| element |
O |
O |
CSS1 |
| element,element |
O |
O |
CSS1 |
| element element |
X |
O |
CSS1 |
| element>element |
X |
X |
CSS2 |
| element+element |
X |
X |
CSS2 |
| element1~element2 |
X |
X |
CSS3 |
| [attribute] |
X |
X |
CSS2 |
| [attribute=value] |
X |
X |
CSS2 |
| [attribute-=value] |
X |
X |
CSS2 |
| [attribute\=value] |
X |
X |
CSS2 |
| :link |
X |
X |
CSS1 |
| :visit |
X |
X |
CSS1 |
| :active |
O |
O |
CSS1 |
| :hover |
X |
X |
CSS1 |
| :focus |
X |
O |
CSS2 |
| :first-letter |
X |
O |
CSS1 |
| :first-line |
X |
O |
CSS1 |
| :first-child |
X |
O |
CSS2 |
| :last-child |
X |
O |
CSS3 |
| :before |
O |
O |
CSS2 |
| :after |
O |
O |
CSS2 |
| :lang |
X |
X |
CSS2 |
| :first-of-type |
X |
O |
CSS3 |
| :last-of-type |
X |
O |
CSS3 |
| :only-of-type |
X |
O |
CSS3 |
| :only-child |
X |
O |
CSS3 |
| :nth-child(n) |
X |
X |
CSS3 |
| :nth-last-child(n) |
X |
X |
CSS3 |
| :nth-of-type(n) |
X |
X |
CSS3 |
| :nth-last-of-type(n) |
X |
X |
CSS3 |
| :root |
X |
O |
CSS3 |
| :empty |
X |
X |
CSS3 |
| :target |
X |
X |
CSS3 |
| :enabled |
X |
X |
CSS3 |
| :disabled |
X |
X |
CSS3 |
| :checked |
X |
X |
CSS3 |
| :not(selected) |
X |
X |
CSS3 |
| ::selection |
X |
X |
CSS3 |
注：表格中的可用性是經過測試得出，小程序升級迭代可能發生變化。
5.2適配
rpx，即responsive pixel，是微信小程序團隊推出的彈性單位。它規定屏幕寬度為750rpx，可以根據屏幕寬度進行自適應。
rpx最大的優勢在於，寬度為750px的設計稿不再需要進行任何轉換即可完成適配。750px的設計稿上，量出來是多少px，就是多少rpx。舉個例子，iphone6的屏幕寬度為375px,共有750個物理像素，也就是1px有2個物理像素，則750rpx=375px=750物理像素，即：1rpx=0.5px=1物理像素。
如果設計稿尺寸為640px，那么1px=640/750rpx,。所以小程序的視覺設計稿應該盡量使用750px。
另外，微信小程序也支持rem尺寸單位，rem和rpx的換算關系：
rem: 規定屏幕寬度為20rem；
在寬度為750px的設計稿中，1rem = (750/20)rpx = 37.5px；
在寬度為640px的設計稿中，1rem = (640/20)rpx = 32px。
rpx實際上就是系統級的rem（把頁面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸縮布局的width=750。也就是說，微信小程序的rpx幫大家把rem中設置根元素字體尺寸這步省了，或者減少了scale伸縮布局不能開啟GPU raster的問題。
5.3樣式級聯
表格中提到的“element element”，是一種常見的級聯方式。
<!-- WXML-->
上面一段代碼中，我們讓圖片具2像素，色值為#f00的實線邊框，該怎么寫樣式呢？
首先來看級聯寫法：
view image{ border:2px solid #f00 }
很明顯，這樣的寫法非常低效。更高效的寫法應該為：
.demo_img_1{ border:2px solid #f00 }
在WXSS中，雖然現在還能使用級聯寫法，但從提高WXSS性能的角度上看，建議大家盡量不適用級聯。微信小程序團隊推薦使用BEM，即Block（塊）、Element（元素）、Modifier（修飾符）,是有Yandex團隊提出的CSSClass命名方法。
六、WXML與HTML
歸根結底，小程序的頁面與H5網頁，一樣是運行在客戶端WebView組件中的，而這些頁面也同樣經過腳本引擎和渲染引擎處理。那為什么不能直接沿用網頁的HTML+CSS+JavaScript的組合呢？WXML與HTML的差異主要體現在哪些地方？
6.1小程序沙盒模型
隨着前端開發技術的發展，H5頁面的能力越來越大，我們既可以利用IndexedDB建立瀏覽器本地數據庫，也可以通過WebRTC進行網絡間點對點實時通信，甚至於利用FileReader和Blob等對本地文件進行讀取和修改等操作。另一方面，小程序在設計上，也需要為開發者提供許多微信獨有的API，比如獲取用戶微信昵稱，調用微信支付接口等等。如果這些API與現有的前端能力相結合，開發者的能力將被極大擴展，更可能超過微信保護用戶的可控范圍。為了在“保護用戶數據”和“對開發者開放能力”之間找到平衡，自然有必要把這兩者放在自己力所能及的「沙盒模型」中實現。而這個沙盒，也就是我們的小程序框架，我們使用WXML+WXSS+JavaScript構建的小程序，都是運行在這個沙盒模型中。
6.2組件化
傳統的網頁開發，是使用HTML進行頁面構建的，開發者經常會用到div、span、ul/li等標簽進行頁面布局，這些基礎標簽通過互相結合並與CSS定義的樣式搭配，從而實現許多功能組件，比如用戶確認窗口、日歷選擇器、滑動廣告板等等。在小程序中，開發者同樣也會用到標簽，但這些標簽，已經過微信的一層封裝，以組件的形式提供給開發者使用，每個組件都會實現自己特有的功能，提高了開發效率，而布局一般是采用view組件來實現。「組件化」使WXML標簽更具語義，通過名稱就可以知道組件的具體功能。
6.3數據綁定
WXML還有一個特點與HTML有所不同，就是「數據綁定」。傳統的HTML需要通過JavaScript對DOM結點進行操作，才能動態改變頁面內容。而在WXML里，數據可以跟頁面結構進行綁定，JavaScript只對數據進行操作，而這些數據的修改，最終會反饋給綁定數據的頁面結構並動態更新。這種機制類似於Vue.js的聲明式渲染，實現了頁面和數據的分離。
6.4邏輯控制
在WXML里，我們還可以通過特定的語法對結構進行邏輯控制，包括條件控制和循環控制，使頁面開發更加靈活。而HTML只能依賴於JavaScript生成或刪除結構，開發人員不只要關心數據，還要關心對頁面結構的操作，數據和展示往往耦合在一起，增加管理代碼的成本。
七、像素和DPR
在web開發的過程中，經常會提到「像素」這個詞，那么，像素到底是什么？移動端的像素與桌面端是否有區別？同樣大小的手機屏幕，為什么有的像素高，有的像素低？下面讓我們通過資料閱讀找到這些問題的答案吧。
7.1像素的定義
「像素」是圖像顯示的基本單位，譯自英文「pixel」，一個像素就是屏幕上能夠顯示一種特定顏色的最小區域。如下圖右側圖片中，每一小格子代表一像素：
當設備尺寸相同，但像素變得更密集時，屏幕能顯示的畫面過渡更細致，圖像看起來就更清晰明快。由此定義了「屏幕像素密度PPI（pixel per inch）」，用於代表屏幕上每英寸可以顯示的像素點的數量：
7.2像素的分類
像素實際上分為兩種：
1．物理像素：又稱設備像素(device pixels)，指設備屏幕的物理像素，一個屏幕里的物理像素數量是固定的。
2． 邏輯像素：又稱CSS像素(CSS pixels)，是為web開發而創造的抽象概念，用於在CSS和JavaScript中以「px」描述位置、大小和間距的單位尺寸。
由於不同的設備屏幕，特別是移動端手機屏幕尺寸千差萬別，物理像素也不一而同，在web開發過程中都是使用邏輯像素，物理像素很少會被用到。
隨着移動設備屏幕技術的發展，手機的PPI(屏幕像素密度)越來越高。一個典型的例子就是，從iPhone4開始，蘋果公司推出了retina視網膜屏幕。之所以叫做視網膜屏幕，是因為屏幕的PPI太高，人的視網膜無法分辨出屏幕上的像素點。iPhone4的PPI提高了一倍，但屏幕尺寸卻沒有變化，這意味着同樣大小的屏幕上，像素多了一倍。
像素的增加對於同樣大小的網頁圖像，在舊手機里全屏展示，在新手機里卻只需要一半的屏幕就顯示出來了，剩下的另一半屏幕將成為空白，這降低了web用戶的體驗。如何適配不同的手機屏幕，成為web開發者需要關心的問題。
7.3 DPR
設備像素比DPR(devicePixelRatio)，是指默認屏幕內容無縮放時，物理像素和邏輯像素的比值：
DPR = 物理像素 / 邏輯像素
在JavaScript里可以通過window.devicePixelRatio獲取到用戶設備的DPR值。
7.4屏幕適配方案
了解了DPR的概念之后，我們就可以通過規則，將邏輯像素進行相應的轉換，滿足不同屏幕的顯示需要，具體規則如下：
當DPR為1時，使用1（1×1）個物理像素顯示1個邏輯像素；
當DPR為2時，使用4（2×2）個物理像素顯示1個邏輯像素；
當DPR為3時，使用9（3×3）個物理像素顯示1個邏輯像素。
圖示如下：
對應到web開發中，就是需要根據不同的DPR縮放網頁內容，計算公式為：
圖片縮放尺寸 = 圖片邏輯像素 x DPR
具體以iPhone6為例，其屏幕寬度的物理像素共750個，邏輯像素是375px，所以DPR = 750 / 375 = 2，為了適配iPhone6，應該使用2倍大小的圖片進行展示。
小程序為開發者提供了更方便的像素單位「rpx（responsive pixel）」實現屏幕適配，在后續的小程序課程里我們再詳細講解其使用方法。
7.5自定義屏幕尺寸
如何知道自己手機屏幕尺寸？
1、通過手機購買網站查詢手機屏幕的「物理像素」（分辨率）；
2、使用微信的示例小程序獲取手機屏幕的邏輯像素：
微信掃碼進入 – 底部「接口」按鈕 – 「設備」選項 - 「獲取手機系統信息」選項 - 「獲取手機系統信息」按鈕 – 「屏幕寬度」和「屏幕高度」。
計算DPR后在下圖所示入口進行尺寸設置。
