1. 小程序與普通網(wǎng)頁開發(fā)的區(qū)別

(1)開發(fā)語言

• 小程序的主要開發(fā)語言是 JavaScript
• 小程序的開發(fā)同普通的網(wǎng)頁開發(fā)相比有很大的相似性

(2)邏輯層和渲染層

• ?網(wǎng)頁開發(fā)渲染線程和腳本線程是互斥的（長時間的腳本運行可能會導(dǎo)致頁面失去響應(yīng)）
  說明：網(wǎng)頁開發(fā)者可以使用到各種瀏覽器暴露出來的 DOM API善玫，進行 DOM 選中和操作科乎。
• 小程序的邏輯層和渲染層是分開的壁畸，分別運行在不同的線程中
  說明：小程序的邏輯層運行在 JSCore 中，并沒有一個完整瀏覽器對象，因而缺少相關(guān)的DOM API和BOM API捏萍。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫太抓，例如 jQuery、 Zepto 等令杈，在小程序中是無法運行的走敌。同時 JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運行的逗噩。

(3)開發(fā)者面對的運行環(huán)境

• 網(wǎng)頁開發(fā)者需要面對的環(huán)境是各式各樣的瀏覽器
  說明：PC 端需要面對 IE掉丽、Chrome、QQ瀏覽器等异雁；在移動端需要面對Safari捶障、Chrome以及 iOS、Android 系統(tǒng)中的各式 WebView
• 小程序開發(fā)過程中需要面對的是兩大操作系統(tǒng) iOS 和 Android 的微信客戶端纲刀，以及用于輔助開發(fā)的小程序開發(fā)者工具

(4)?開發(fā)準(zhǔn)備工作及流程

• 網(wǎng)頁開發(fā)者在開發(fā)網(wǎng)頁的時候项炼，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可
• 小程序的開發(fā)需要經(jīng)過申請小程序帳號柑蛇、安裝小程序開發(fā)者工具芥挣、配置項目等等過程方可完成。
  說明：
  a. 申請小程序帳號并獲取AppID：進入小程序注冊頁 進行注冊就可以擁有自己的小程序帳號（在這個小程序管理平臺耻台，你可以管理你的小程序的權(quán)限空免，查看數(shù)據(jù)報表，發(fā)布小程序等操作）盆耽。登錄 小程序后臺 蹋砚，我們可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了，注意這里要區(qū)別于服務(wù)號或訂閱號的 AppID （小程序的 AppID 相當(dāng)于小程序平臺的一個身份證摄杂，后續(xù)你會在很多地方要用到 AppID）坝咐。
  b. 安裝小程序開發(fā)者工具并用微信掃碼登錄：申請小程序帳號后，我們需要安裝小程序開發(fā)者工具來開發(fā)小程序析恢。前往 開發(fā)者工具下載頁面 墨坚，根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進行安裝，之后打開小程序開發(fā)者工具映挂，用微信掃碼登錄開發(fā)者工具泽篮，準(zhǔn)備開發(fā)。

2. 小程序與普通網(wǎng)頁開發(fā)的聯(lián)系（代碼構(gòu)成）

備注：網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合柑船，其中 HTML 是用來描述當(dāng)前這個頁面的結(jié)構(gòu)帽撑，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互鞍时。同樣道理亏拉，在小程序中也有同樣的角色扣蜻，其中 WXML 充當(dāng)?shù)木褪穷愃?HTML 的角色及塘，但比HTML更簡單，主要體現(xiàn)在便簽的簡化和規(guī)范上吮旅；WXSS 充當(dāng)?shù)木褪穷愃?CSS 的角色味咳，但是對 CSS 進行了修改和拓展檬嘀；JS邏輯交互只使用到了JavaScript的核心部分鸳兽。

2.1 .json 后綴的 JSON 配置文件(JSON 配置)

• 當(dāng)前小程序全局配置 app.json
• 小程序開發(fā)者工具配置 project.config.json
• 小程序局部頁面配置 page.json

說明：JSON 是一種數(shù)據(jù)格式，并不是編程語言全陨，在小程序中辱姨，JSON扮演的靜態(tài)配置的角色戚嗅。
注意：
a. JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達數(shù)據(jù)替久。JSON的Key必須包裹在一個雙引號中蚯根。忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤胀糜。
b. JSON的值只能是以下幾種數(shù)據(jù)格式(數(shù)字、字符串矩距、Bool值锥债、數(shù)組、對象登夫、Null)允趟，其他任何格式都會觸發(fā)報錯潮剪，例如 JavaScript 中的 undefined。
c. JSON 文件中無法使用注釋狮斗，試圖添加注釋將會引發(fā)報錯弧蝇。

2.2 .wxml 后綴的 WXML 模板文件(WXML 模板)

小程序開發(fā)中的WXML 充當(dāng)?shù)木褪穷愃凭W(wǎng)頁編程中HTML 的角色看疗。和 HTML 非常相似，WXML 由標(biāo)簽摔寨、屬性等等構(gòu)成盗扇。但是也有很多不一樣的地方：
(1)標(biāo)簽名字有點不一樣

• 網(wǎng)頁HTML經(jīng)常會用到的標(biāo)簽是 div, p, span（開發(fā)者在寫一個頁面的時候可以根據(jù)這些基礎(chǔ)的標(biāo)簽組合出不一樣的組件疗隶，例如日歷、彈窗等等）
  說明：既然大家都需要這些組件蒋纬，為什么我們不能把這些常用的組件包裝起來蜀备，大大提高我們的開發(fā)效率荒叶。
• 小程序WXML 用的標(biāo)簽是 view, button, text 等等（這些標(biāo)簽就是小程序給開發(fā)者包裝好的基本能力，我們還提供了地圖脂凶、視頻、音頻等等組件能力）

(2)多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式

• 在網(wǎng)頁的一般開發(fā)流程中亭病，我們通常會通過 JS 操作 DOM (對應(yīng) HTML 的描述產(chǎn)生的樹)嘶居，以引起界面的一些變化響應(yīng)用戶的行為。
  說明：當(dāng)項目越來越大的時候整袁，你的代碼會充斥著非常多的界面交互邏輯和程序的各種狀態(tài)變量葬项，顯然這不是一個很好的開發(fā)模式迹蛤，因此就有了 MVVM 的開發(fā)模式（例如 React, Vue）盗飒，提倡把渲染和邏輯分離陋桂。簡單來說就是不要再讓 JS 直接操控 DOM，JS 只需要管理狀態(tài)即可宣渗，然后再通過一種模板語法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可痕囱。
• 小程序的框架就是用到了這個思路暴匠。通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數(shù)據(jù)綁定帮掉。僅僅通過數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系蟆炊，還需要 if/else, for等控制能力瀑志，在小程序里邊肩祥，這些控制能力都用 wx: 開頭的屬性來表達混狠。

2.3 .wxss 后綴的 WXSS 樣式文件(WXSS 樣式)

WXSS 具有 CSS 大部分的特性将饺，小程序在 WXSS 也做了一些擴充和修改：
(1) 新增了尺寸單位 rpx（ rpx可以根據(jù)屏幕寬度進行自適應(yīng)）

• 在寫 CSS 樣式時痛黎，開發(fā)者需要考慮到手機設(shè)備的屏幕會有不同的寬度和設(shè)備像素比，采用一些技巧來換算一些像素單位
• WXSS 在底層支持新的尺寸單位 rpx 掖蛤，開發(fā)者可以免去換算的煩惱蚓庭，只要交給小程序底層來換算（換算采用的浮點數(shù)運算仅仆，所以運算結(jié)果會和預(yù)期結(jié)果有一點點偏差）

建議： 開發(fā)微信小程序時設(shè)計師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)墓拜。
(2)提供了全局的樣式和局部樣式（類似 app.json和page.json 的概念）

• 定義在 app.wxss 中的樣式為全局樣式，作用于當(dāng)前小程序所有頁面
• 在 page 的 wxss 文件中定義的樣式page.wxss為局部頁面樣式僅對當(dāng)前頁面生效夏醉，并會覆蓋 app.wxss 中相同的選擇器

(3)WXSS 僅支持部分 CSS 選擇器

WXSS目前支持的選擇器.png

2.4 .js 后綴的 JS 腳本邏輯文件(JS 邏輯交互)

說明：一個服務(wù)僅僅只有界面展示是不夠的释树，還需要和用戶做交互：響應(yīng)用戶的點擊擎淤、獲取用戶的位置等等。在小程序里邊桩盲，我們就通過編寫 JS 腳本文件來相應(yīng)處理用戶的操作赌结。

• 響應(yīng)用戶的操作-事件
• 在 JS 中調(diào)用小程序提供的豐富的 API，利用這些 API 可以很方便的調(diào)起微信提供的能力柬姚，例如獲取用戶信息、本地存儲搬设、微信支付等

拓展-目錄結(jié)構(gòu)：

目錄結(jié)構(gòu).png

如開發(fā)目錄結(jié)構(gòu).png