1、微信小程序的特點(diǎn)
針對(duì)傳統(tǒng)H5應(yīng)用的不足，微信小程序?qū)τ脩艚换バ阅茏隽吮姸嗟膬?yōu)化，使微信小程序的應(yīng)用在部分用戶體驗(yàn)上接近了App的水準(zhǔn)。
微信小程序沒有采用網(wǎng)頁(yè)編程中的HTML5+CSS3+JavaScript組合，微信小程序使用騰訊全新定義的技術(shù)規(guī)范和架構(gòu)。不過(guò)微信小程序的開發(fā)與網(wǎng)頁(yè)編程以及微信公眾號(hào)編程非常類似，對(duì)
于前端開發(fā)者而言，從網(wǎng)頁(yè)開發(fā)遷移到微信小程序的開發(fā)成本并不高。微信小程序吸收了主流前端開發(fā)中數(shù)據(jù)、樣式、控制邏輯分離的理念，將每個(gè)頁(yè)面分為四個(gè)文件：WXML文件、
WXSS文件、JSON文件、JS文件。其中JS文件采用標(biāo)準(zhǔn)的JavaScript語(yǔ)法規(guī)范，用于邏輯操作。JSON文件基于JSON語(yǔ)法規(guī)范，用于頁(yè)面文件的配置。WXML文件基于XML語(yǔ)法規(guī)范，用于頁(yè)
面視覺組件的描述。而WXSS繼承了標(biāo)準(zhǔn)的CSS語(yǔ)法，用于WXML組件樣式的定義。
網(wǎng)頁(yè)開發(fā)中渲染線程和腳本線程是互斥的，而在微信小程序中二者是分開的，分別運(yùn)行在不同的線程中。微信小程序的渲染層和邏輯層分別由兩個(gè)線程管理：渲染層的界面使用了
WebView 進(jìn)行渲染；邏輯層采用JsCore線程運(yùn)行JS腳本。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView線程，這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)
求也經(jīng)由Native轉(zhuǎn)發(fā)，小程序的通信模型如圖所示。
網(wǎng)頁(yè)開發(fā)者可以使用瀏覽器DOM API來(lái)操作DOM對(duì)象。小程序的邏輯層和渲染層是分開的，邏輯層運(yùn)行在JSCore中，并沒有一個(gè)完整瀏覽器對(duì)象，因而缺少相關(guān)的DOM API和BOM API。
這一區(qū)別導(dǎo)致了前端的一些庫(kù)，例如jQuery、Zepto等在小程序中是無(wú)法運(yùn)行的。同時(shí)JSCore的環(huán)境同 NodeJS環(huán)境也是不盡相同，所以一些NPM的包在小程序中也是無(wú)法運(yùn)行的。
小程序每次冷啟動(dòng)時(shí)，都會(huì)檢查是否有需要更新版本，如果發(fā)現(xiàn)有新版本，將會(huì)下載新版本的代碼包到本地。因此小程序的頁(yè)面加載是基于本地的，不需要通過(guò)頻繁的發(fā)送網(wǎng)絡(luò)請(qǐng)求來(lái)獲
取頁(yè)面文件，所有的頁(yè)面跳轉(zhuǎn)也都不需要通過(guò)與服務(wù)端進(jìn)行交互。這將使小程序的執(zhí)行效率大大提高，比使用H5的Web應(yīng)用模式有更好的用戶體驗(yàn)，操作流暢度與反應(yīng)速度也會(huì)更好。這
也意味著在沒有網(wǎng)絡(luò)連接的環(huán)境下也可以使用微信小程序。結(jié)合本地存儲(chǔ)，小程序可以滿足暫時(shí)斷網(wǎng)或網(wǎng)絡(luò)情況較差的場(chǎng)景需求，這是微信服務(wù)號(hào)和
微信小程序的出現(xiàn)，為開發(fā)者提供了一種新的應(yīng)用開發(fā)框架。即除了能夠選擇APP開發(fā)、H5開發(fā)（HTML5網(wǎng)頁(yè)開發(fā)）、微信公眾號(hào)開發(fā)，還可以選擇使用微信小程序來(lái)實(shí)現(xiàn)移動(dòng)端應(yīng)用。
接下來(lái)分別將微信小程序與APP以及微信公眾號(hào)進(jìn)行對(duì)比，使大家了解微信小程序、APP以及微信公眾號(hào)這三個(gè)產(chǎn)品各自的優(yōu)勢(shì)與不足，方便大家開發(fā)應(yīng)用時(shí)做出合適的選擇。
小程序與App的區(qū)別
Native App，大多數(shù)情況下也稱為APP，具有性能、體驗(yàn)非常良好，組件支持完善、接口豐富等特點(diǎn)。但App也有一系列缺點(diǎn)，主要有：
App不支持跨平臺(tái)開發(fā)，有多少個(gè)平臺(tái)就要開發(fā)多少個(gè)版本，大多數(shù)APP都需要同時(shí)開發(fā)安卓版本和IOS版本。
首次使用門檻高。首先要在應(yīng)用市場(chǎng)下載并安裝，然后注冊(cè)登錄后才能使用。下載安裝需要耗費(fèi)網(wǎng)絡(luò)流量以及安裝時(shí)間，另外安裝在手機(jī)上會(huì)消耗手機(jī)的存儲(chǔ)空間。App的這個(gè)缺陷會(huì)造
成部分用戶因?yàn)橄螺d安裝的繁瑣而拒絕下載APP，造成用戶的流失。微信小程序恰好能夠解決上面的問(wèn)題，微信小程序已經(jīng)做好了安卓和IOS的兼容，開發(fā)好微信小程序后既能在安卓手機(jī)
上使用，也能在IOS手機(jī)上使用。另外小程序不需要下載安裝，通過(guò)掃一掃就能直接使用。不過(guò)相對(duì)于App，微信小程序有以下不足：
在擴(kuò)展性這方面，App顯然有更大的優(yōu)勢(shì)，App可以全方位訪問(wèn)原生系統(tǒng)提供的API，而微信小程序建立在微信客戶端上，小程序的功能完全受限于微信客戶端提供的API。
App的用戶體驗(yàn)更佳，App安裝在手機(jī)客戶端，不需要從服務(wù)器加載，減少了應(yīng)用加載的時(shí)間。
App使用路徑更短，App雖然首次使用比較麻煩，需要下載安裝，但是安裝后的使用相對(duì)便捷。App就在用戶的手機(jī)桌面上，打開手機(jī)就能直接使用。小程序使用的時(shí)候則有點(diǎn)繁瑣，需要
打開微信客戶端，然后在小程序列表中找，用戶難以快速發(fā)現(xiàn)并打開小程序?？傮w來(lái)說(shuō)微信小程序適合用戶體驗(yàn)要求不高的應(yīng)用，基本上適合Web應(yīng)用的都可以用小程序來(lái)實(shí)現(xiàn)。另外還
有一些“重量級(jí)“的應(yīng)用早起也會(huì)采用微信小程序來(lái)開發(fā)，這些應(yīng)用的早期會(huì)采用微信小程序來(lái)快速實(shí)現(xiàn)業(yè)務(wù)模型，并進(jìn)行市場(chǎng)驗(yàn)證，然后在業(yè)務(wù)發(fā)展到一定階段后再采用App重構(gòu)應(yīng)用系
統(tǒng)。
2、微信小程序與微信公眾號(hào)
微信小程序與微信公眾號(hào)（服務(wù)號(hào)）在功能上有部分重疊，都能夠用來(lái)實(shí)現(xiàn)面向企業(yè)的應(yīng)用，特別是早期微信只提供了微信公眾號(hào)，面向企業(yè)的應(yīng)用基本上用微信公眾號(hào)來(lái)實(shí)現(xiàn)。微信公
眾號(hào)本質(zhì)上是一種H5應(yīng)用，它具有傳統(tǒng)H5應(yīng)用的特點(diǎn)，例如每次刷新頁(yè)面都要去服務(wù)器讀取內(nèi)容。因此微信公眾號(hào)雖然也能夠?qū)崿F(xiàn)業(yè)務(wù)服務(wù)，但是在用戶體驗(yàn)上距離Native PP有較大的差
距。而微信小程序的目標(biāo)就要提升應(yīng)用的用戶體驗(yàn)，使之接近APP的水準(zhǔn)。因此微信小程序出現(xiàn)后使之與微信公眾號(hào)在定位上有了明顯的區(qū)別?；旧峡梢曰谝韵聵?biāo)準(zhǔn)進(jìn)行取舍：
3、定位的不同
小程序面向產(chǎn)品與服務(wù)，主要以實(shí)現(xiàn)業(yè)務(wù)功能為主，致力于打造線上線下相融合的企業(yè)服務(wù)場(chǎng)景。
微信公眾號(hào)主要服務(wù)于企業(yè)和個(gè)人的營(yíng)銷與信息傳遞需求，是一種新的信息傳播方式。公眾號(hào)依賴粉絲經(jīng)濟(jì)，結(jié)合H5后，能夠在公眾號(hào)內(nèi)提供一些簡(jiǎn)單的營(yíng)銷和交互功能。
4、用戶體驗(yàn)的差別
微信小程序?qū)τ糜脩艚换バ阅茏隽吮姸嗟膬?yōu)化，使用體驗(yàn)接近App。而公眾號(hào)開發(fā)借助于H5 開發(fā)技術(shù)來(lái)實(shí)現(xiàn)交互功能，運(yùn)行環(huán)境是基于瀏覽器，等同于手機(jī)網(wǎng)頁(yè)端的應(yīng)用。因此上微信公
眾號(hào)主要用于業(yè)務(wù)邏輯與交互簡(jiǎn)單的應(yīng)用中，體驗(yàn)良好的應(yīng)用都應(yīng)該用小程序來(lái)創(chuàng)建或者重構(gòu)。
具體上來(lái)說(shuō)微信小程序被微信平臺(tái)開放了更多的接口功能，基本可覆蓋大多數(shù)行業(yè)的需求。相較于公眾號(hào)，它在視頻直播、商城、小游戲等強(qiáng)互動(dòng)的領(lǐng)域表現(xiàn)更佳。公眾號(hào)開發(fā)適合用戶
交互相對(duì)較少的應(yīng)用類型，比如微商城、微官網(wǎng)等。
雖然微信公眾號(hào)與小程序各有一定的應(yīng)用場(chǎng)景，但是在實(shí)際上使用時(shí)不是二選一的，一個(gè)企業(yè)可以同時(shí)注冊(cè)微信公眾號(hào)和小程序。企業(yè)使用微信小程序承載企業(yè)的業(yè)務(wù)服務(wù)，并使用公眾
號(hào)進(jìn)行企業(yè)的宣傳與營(yíng)銷。微信公眾號(hào)是單獨(dú)申請(qǐng)的，微信小程序即可以單獨(dú)申請(qǐng)，也可以通過(guò)微信公眾號(hào)快捷申請(qǐng)。對(duì)于沒有公眾號(hào)和小程序的商家來(lái)說(shuō)，正確的申請(qǐng)注冊(cè)流程應(yīng)該是
先申請(qǐng)認(rèn)證微信公眾號(hào)，然后在公眾號(hào)后臺(tái)的【小程序管理】頁(yè)面中直接快速注冊(cè)小程序。微信公眾號(hào)+小程序的模式已經(jīng)成為企業(yè)運(yùn)營(yíng)推廣的一個(gè)標(biāo)配。
5、 微信小程序開發(fā)過(guò)程
1.2.1 注冊(cè)小程序
開發(fā)微信小程序需要首先注冊(cè)一個(gè)小程序賬號(hào)，注冊(cè)成功后登錄微信小程序管理后臺(tái)，完成小程序開發(fā)者綁定、開發(fā)信息配置，然后開發(fā)者就可以下載開發(fā)者工具、使用開、發(fā)者工具進(jìn)
行小程序的開發(fā)了。
微信公眾號(hào)是單獨(dú)注冊(cè)申請(qǐng)的，微信小程序即可以單獨(dú)注冊(cè)申請(qǐng)，也可以通過(guò)微信公眾號(hào)快捷申請(qǐng)注冊(cè)。對(duì)于沒有公眾號(hào)和小程序的商家來(lái)說(shuō)，正確的申請(qǐng)注冊(cè)流程應(yīng)該是先申請(qǐng)認(rèn)證公
眾號(hào)，然后在公眾號(hào)管理后臺(tái)的【小程序管理】頁(yè)面快速申請(qǐng)小程序。微信公眾平臺(tái)的網(wǎng)址為：https://mp.weixin.qq.com。微信小程序注冊(cè)是需要一個(gè)郵箱作為賬號(hào)，小程序注冊(cè)成功
后，可以使用該郵箱+登錄密碼登錄微信小程序管理后臺(tái)。為方便開發(fā)者開發(fā)和體驗(yàn)小程序的各種功能，開發(fā)者可以申請(qǐng)小程序的測(cè)試號(hào)，并使用此帳號(hào)在開發(fā)者工具創(chuàng)建項(xiàng)目并進(jìn)行開
發(fā)測(cè)試，以及真機(jī)預(yù)覽體驗(yàn)。小程序的測(cè)試號(hào)使開發(fā)者避免了繁瑣的注冊(cè)過(guò)程，降低了初始使用小程序開發(fā)的門檻。小程序的測(cè)試號(hào)的申請(qǐng)地址為：
https://mp.weixin.qq.com/wxamp/sandbox?doc=1
1.2.2 小程序開發(fā)配置
小程序開發(fā)的賬號(hào)申請(qǐng)成功之后，需要登錄小程序管理后臺(tái)進(jìn)行小程序的設(shè)置，填寫小程序基本信息，例如名稱、頭像、介紹以及服務(wù)范圍等。
您可以在【開發(fā)】->【開發(fā)管理】頁(yè)面中看到小程序的AppID。小程序的AppID相當(dāng)于小程序平臺(tái)的一個(gè)身份證，后續(xù)你會(huì)在很多地方用到它。
另外在進(jìn)行小程序開發(fā)前，需要在微信小程序后臺(tái)將開發(fā)人員的微信號(hào)添加到項(xiàng)目成員中。只有添加到小程序項(xiàng)目成員的人員才可以使用微信小程序開發(fā)工具進(jìn)行小程序開發(fā)、調(diào)試、上
傳程序包等功能。建議您可以將全部研發(fā)人員加入到項(xiàng)目成員中，項(xiàng)目組的其他非開發(fā)人員若需要體驗(yàn)小程序功能則需要添加到體驗(yàn)成員中。
1.2.3 使用開發(fā)者工具開發(fā)小程序
由于小程序采用的是渲染和邏輯分離的運(yùn)行機(jī)制，這種做法與傳統(tǒng)的網(wǎng)頁(yè)的運(yùn)行機(jī)制存在差異，無(wú)法使用傳統(tǒng)的網(wǎng)頁(yè)編程中的開發(fā)、調(diào)試工具，為此微信專門為小程序開發(fā)推出了一個(gè)一
站式IDE：微信開發(fā)者工具。開發(fā)者可以借助微信開發(fā)者工具完成小程序的代碼開發(fā)、編譯運(yùn)行、界面和邏輯調(diào)試、真機(jī)預(yù)覽和提交發(fā)布版本等功能。
在小程序開發(fā)文檔中可以找到小程序開發(fā)工具的下載頁(yè)面，或者直接輸入以下 網(wǎng)址進(jìn)入小程序開發(fā)工具的下載頁(yè)面：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。在小程序開發(fā)工具的下載頁(yè)面中根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包并進(jìn)行安裝。需要注意的是，小程序開發(fā)
工具在Windows僅支持Windows 7及以上版，在Mac上支持OS X 10.8及以上版本。另外需要說(shuō)明的是微信小程序Web開發(fā)工具需要掃碼登陸才可以使用，所以在使用前必須先綁定開發(fā)
者。
首次使用開發(fā)者工具調(diào)試小程序時(shí)會(huì)出現(xiàn)這樣的報(bào)錯(cuò)：“xxxxxxxxxx不在合法域名列表中”，這是因?yàn)樵谛〕绦蛑邪l(fā)起了wx.request請(qǐng)求，但是請(qǐng)求的域名沒有在小程序管理后臺(tái)中進(jìn)行設(shè)置
所致。服務(wù)器域名的設(shè)置請(qǐng)到小程序管理后臺(tái)【開發(fā)】->【開發(fā)管理】->【開發(fā)設(shè)置】->【服務(wù)器域名】中進(jìn)行配置。配置時(shí)需要注意：域名只支持https （wx.request、
wx.uploadFile、wx.downloadFile） 和 wss (wx.connectSocket) 協(xié)議。域名不能使用 IP 地址（小程序的局域網(wǎng) IP 除外）或 localhost。
為了降低開發(fā)門檻，開發(fā)者工具提供了一個(gè)選項(xiàng)，即使沒有申請(qǐng)服務(wù)器域名也可以進(jìn)行小程序的編碼和調(diào)試。在微信開發(fā)者工具中點(diǎn)擊【詳情】->勾選【不校驗(yàn)合法域名】。這樣就可以
正常使用wx.request函數(shù)發(fā)送網(wǎng)絡(luò)請(qǐng)求了。但是需要注意的是這做只是為了簡(jiǎn)化開發(fā)，當(dāng)小程序發(fā)布上線時(shí)這種方式是行不通的，這個(gè)時(shí)候就需要配置合法域名了。
如果小程序中使用了Webview，并引用了第三方頁(yè)面，在運(yùn)行調(diào)試小程序是會(huì)出現(xiàn)“頁(yè)面找不到”的錯(cuò)誤提示。這個(gè)時(shí)候需要進(jìn)行業(yè)務(wù)域名的配置。由于微信小程序本身的限制，不能直接
在Web-view中隨意跳轉(zhuǎn)H5頁(yè)面，需要先配置業(yè)務(wù)域名，才能在Web-view中跳轉(zhuǎn)H5頁(yè)面。
業(yè)務(wù)域名必須是https協(xié)議的，且業(yè)務(wù)域名需經(jīng)過(guò)ICP備案。業(yè)務(wù)域名配置時(shí)需要下載校驗(yàn)文件，并將文件放置在域名根目錄下，并確?？梢栽L問(wèn)到該文件。
1.2.4 審核與發(fā)布
完成小程序開發(fā)后，提交代碼至微信團(tuán)隊(duì)進(jìn)行審核，審核通過(guò)后即可發(fā)布。詳細(xì)發(fā)布說(shuō)明請(qǐng)參見后面的章節(jié)。
1.3 第一個(gè)小程序
打開微信小程序開發(fā)者工具，掃碼登錄后進(jìn)入小程序項(xiàng)目管理界面：
點(diǎn)擊小程序項(xiàng)目管理界面中部的添加小程序指示區(qū)即可打開小程序的新建項(xiàng)目界面：
每個(gè)微信小程序必須指定一個(gè)小程序的APPID，小程序的APPID可以在小程序管理后臺(tái)的界面中獲取，具體獲取方法參見章節(jié)1.2.2。在圖1-9所示的界面中選擇小程序項(xiàng)目，輸入小程序的
項(xiàng)目名稱，選擇代碼存放的路徑，填入在小程序管理后臺(tái)獲取到的APPID，勾選 “不使用云服務(wù)”，點(diǎn)擊新建，你就創(chuàng)建了你的第一個(gè)小程序項(xiàng)目了。
使用微信小程序開發(fā)者工具創(chuàng)建小程序項(xiàng)目時(shí)，微信小程序開發(fā)者工具會(huì)生成一些demo代碼，真正的開發(fā)中通常會(huì)刪除這些預(yù)生成的代碼。為了快速理解微信小程序的結(jié)構(gòu)，我們也刪除
這些代碼，從頭開始建立一個(gè)簡(jiǎn)單的小程序，這個(gè)小程序只輸出一行文字：Hello World。
