本書系統(tǒng)全面地講解微信小程序的開發(fā)技術(shù)。開篇?jiǎng)?chuàng)建一個(gè)小程序項(xiàng)目并解析體驗(yàn),介紹如何由零開始創(chuàng)建一個(gè)小程序,全面體驗(yàn)小程序的開發(fā)工具、界面、開發(fā)框架、實(shí)現(xiàn)過(guò)程及其主要代碼框架,了解小程序的應(yīng)用場(chǎng)景及開發(fā)要求。接著介紹小程序開發(fā)基礎(chǔ),包括小程序開發(fā)的語(yǔ)言與語(yǔ)法、函數(shù)方法、模塊、事件交互等。然后詳細(xì)介紹了組件的應(yīng)用與開發(fā),包括開發(fā)過(guò)程與組件應(yīng)用技巧,還詳細(xì)分析了API接口,包括使用各個(gè)微信原生API接口進(jìn)行小程序開發(fā)的技巧。后介紹了幾個(gè)小程序?qū)崙?zhàn)案例,讓讀者實(shí)踐小程序各項(xiàng)能力的應(yīng)用及掌握一些應(yīng)用技巧。本書結(jié)構(gòu)清晰,由淺入深,可幫助讀者快速掌握小程序項(xiàng)目的開發(fā)。
第1版前言隨著移動(dòng)互聯(lián)網(wǎng)的興起,互聯(lián)網(wǎng)作為一種信息技術(shù)在傳統(tǒng)社會(huì)與傳統(tǒng)工業(yè)中發(fā)揮的作用越來(lái)越強(qiáng)大,互聯(lián)網(wǎng)與整個(gè)社會(huì)運(yùn)作正在加速深度融合!盎ヂ(lián)網(wǎng)+”的趨勢(shì)顯而易見,政府、社會(huì)組織、企業(yè)以及個(gè)人,都對(duì)移動(dòng)互聯(lián)網(wǎng)時(shí)代的融合或轉(zhuǎn)型充滿期待而又心懷忐忑:移動(dòng)化的場(chǎng)景如何結(jié)合?是否有足夠的移動(dòng)應(yīng)用開發(fā)能力?即便場(chǎng)景與能力都滿足,是否能應(yīng)對(duì)獲取用戶成本、打開頻率等移動(dòng)互聯(lián)網(wǎng)運(yùn)營(yíng)的巨大挑戰(zhàn)?好在我們有微信!這是一款為移動(dòng)時(shí)代而生,讓世界互聯(lián)網(wǎng)震驚的中國(guó)創(chuàng)新應(yīng)用。經(jīng)過(guò)5年多的發(fā)展,微信已有超過(guò)8億月活用戶且仍在不斷進(jìn)化與演進(jìn),是移動(dòng)時(shí)代當(dāng)之無(wú)愧的超級(jí)App王。更加幸運(yùn)的是,騰訊的微信團(tuán)隊(duì)源源不斷地將微信的能力開放出來(lái),為我們提供了融合與轉(zhuǎn)型的超強(qiáng)連接力。
2016年1月在廣州舉辦的微信公開課上,“微信之父”張小龍?jiān)谒葜v的最后一部分,宣布將推出“應(yīng)用號(hào)”。小龍?zhí)岬剑骸拔易约寒?dāng)了多年程序員,我覺得我們應(yīng)該為開發(fā)團(tuán)體做一些事情!敝劣凇皯(yīng)用號(hào)”的樣子,小龍當(dāng)時(shí)的大概表述是“類似于公眾號(hào),但比公眾號(hào)更便捷、更好找,有更容易使用的形態(tài)”。這就是微信小程序的由來(lái)。
歷時(shí)8個(gè)多月,在2016年9月21日,微信小程序公布開啟“內(nèi)測(cè)”。隨即這個(gè)內(nèi)測(cè)消息便刷爆了朋友圈,我在接下來(lái)的數(shù)天內(nèi)便接到不下30個(gè)“求內(nèi)測(cè)邀請(qǐng)碼”需求留言,小程序火爆程度可見一斑。由于微信團(tuán)隊(duì)首批僅開放了200個(gè)內(nèi)測(cè)號(hào),物以稀為貴,網(wǎng)絡(luò)上不久就有傳言:轉(zhuǎn)讓某個(gè)帶小程序功能的微信號(hào),賬號(hào)有30.7萬(wàn)女粉絲,起拍價(jià)300萬(wàn)。
2016年11月3日,小程序正式開放公測(cè)。我再次在朋友圈刷屏中體驗(yàn)到了“小程序”的火爆,感受到了開發(fā)者、企業(yè)以及市場(chǎng)對(duì)微信小程序的好奇、疑惑,同時(shí)也感受到大家在移動(dòng)浪潮中擁抱變化的期待。
微信官方頁(yè)面指出:“小程序可以在微信內(nèi)便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)!睆埿↓?jiān)谛〕绦騼?nèi)測(cè)首發(fā)當(dāng)天,也在朋友圈給出了解釋:小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開。這也體現(xiàn)了“用完即走”的理念,用戶無(wú)須擔(dān)心安裝應(yīng)用過(guò)多的問(wèn)題。應(yīng)用將無(wú)處不在,隨時(shí)可用,但又無(wú)須安裝卸載。
移動(dòng)互聯(lián)網(wǎng)時(shí)代的微信應(yīng)用不可或缺,微信小程序切合了時(shí)代需要,毫無(wú)疑問(wèn)會(huì)成為政府、組織機(jī)構(gòu)、企業(yè)以及開發(fā)者必爭(zhēng)的互聯(lián)網(wǎng)應(yīng)用場(chǎng)景。微信小程序必將再一次擴(kuò)展微信強(qiáng)大的“連接力”,幫助我們解決現(xiàn)有服務(wù)痛點(diǎn),或者發(fā)掘、衍生出新的商業(yè)模式,幫助行業(yè)、企業(yè)以及政府機(jī)構(gòu)改善服務(wù)或?qū)崿F(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型。
感謝微信團(tuán)隊(duì),為我們帶來(lái)微信小程序這個(gè)新生事物。絕大部分場(chǎng)景下,不用單獨(dú)開發(fā)App的時(shí)代來(lái)臨了。那么如何開發(fā)小程序?如何將現(xiàn)有的服務(wù)或場(chǎng)景與小程序結(jié)合?由于小程序是新生事物,基本上多數(shù)人都無(wú)經(jīng)驗(yàn)可言。與小龍一樣,我覺得此時(shí)有必要為所有對(duì)小程序感興趣、有期待的朋友,提供一些有關(guān)小程序開發(fā)的指南,這是一件非常有意義的事情。
由于我在工作上與微信團(tuán)隊(duì)聯(lián)系緊密,溝通頻繁,有近水樓臺(tái)優(yōu)勢(shì);而且對(duì)騰訊業(yè)務(wù)有相對(duì)全面的了解,熟悉豐富的應(yīng)用場(chǎng)景,學(xué)習(xí)了大量小程序項(xiàng)目案例。
自小程序內(nèi)測(cè)開啟以來(lái),我們更是夜以繼日,同步研讀與理解微信團(tuán)隊(duì)的文檔,梳理開發(fā)邏輯,測(cè)試各個(gè)場(chǎng)景案例,希望盡早奉獻(xiàn)給大家一本從入門到精通的小程序開發(fā)大全。
我們嘗試通過(guò)本書將我們的先發(fā)優(yōu)勢(shì)發(fā)揮出來(lái)。由小程序的框架、語(yǔ)法、函數(shù)及API開始,結(jié)合豐富實(shí)用的案例,幫助大家熟練掌握小程序的開發(fā)與應(yīng)用,并探討小程序的適用范圍以及未來(lái)優(yōu)化演進(jìn)的方向。
本書讀者對(duì)象包括:
前端開發(fā)工程師微信應(yīng)用開發(fā)者移動(dòng)開發(fā)愛好者計(jì)算機(jī)相關(guān)專業(yè)的學(xué)生如何閱讀這本書作為“開放連接體系”的一環(huán),微信團(tuán)隊(duì)為小程序提供連接標(biāo)準(zhǔn)與規(guī)范,最大限度地降低了開發(fā)門檻,但開發(fā)小程序還是需要一定的“專業(yè)開發(fā)能力”與程序開發(fā)的理解力。
微信小程序的開發(fā)是基于框架的。因此,開發(fā)者首先要理解“框架”(framework)的概念。
從軟件設(shè)計(jì)角度,框架是一個(gè)可復(fù)用的軟件架構(gòu)解決方案。框架規(guī)定了應(yīng)用的體系結(jié)構(gòu),闡明軟件體系結(jié)構(gòu)中各層次間及其層次內(nèi)部各組件間的依賴關(guān)系、責(zé)任分配和控制流程,框架表現(xiàn)為一組接口、抽象類以及實(shí)例間協(xié)作的方法。
框架一般是成熟、穩(wěn)健的,可以處理系統(tǒng)中很多的細(xì)節(jié)問(wèn)題,比如,事物處理、安全性、數(shù)據(jù)流控制等問(wèn)題?蚣芤话愣紴槎嗳怂,所以結(jié)構(gòu)很好,擴(kuò)展性也很好,而且它是不斷升級(jí)的,可以直接享受別人升級(jí)代碼帶來(lái)的好處。
顯然,框架極大地方便了開發(fā)者,減少了開發(fā)代碼量并提升了代碼質(zhì)量。
微信團(tuán)隊(duì)為小程序提供的開發(fā)框架為MINA框架,它類似于淘寶Weex、Vue框架。MINA框架經(jīng)過(guò)大量底層的優(yōu)化設(shè)計(jì),有著接近原生App的運(yùn)行速度,對(duì)Android端和iOS端做到了高度一致的呈現(xiàn),具有完備的開發(fā)和調(diào)試工具。
微信團(tuán)隊(duì)為小程序的開發(fā)者提供了包含UI界面、社交與支付、語(yǔ)音、多媒體、LBS服務(wù)、手機(jī)硬件、網(wǎng)絡(luò)傳輸?shù)然A(chǔ)能力。功能豐富且實(shí)用,可以覆蓋絕大部分移動(dòng)應(yīng)用的場(chǎng)景需求。
熊普江,現(xiàn)任騰訊微信架構(gòu)師,負(fù)責(zé)公司業(yè)務(wù)資源規(guī)劃與技術(shù)架構(gòu)評(píng)審等工作。自1997年涉足互聯(lián)網(wǎng),曾服務(wù)美國(guó)Supreme、太平洋網(wǎng)絡(luò)、PPTV等技術(shù)與互聯(lián)網(wǎng)公司,任網(wǎng)絡(luò)營(yíng)運(yùn)總監(jiān)、運(yùn)維總監(jiān)等職務(wù),2012年加入騰訊。逾18年互聯(lián)網(wǎng)從業(yè)背景,擁有豐富的大型網(wǎng)絡(luò)架構(gòu)規(guī)劃與建設(shè),海量用戶平臺(tái)規(guī)劃與營(yíng)運(yùn)技術(shù)支撐,超大規(guī)模業(yè)務(wù)資源規(guī)劃與技術(shù)架構(gòu)管理優(yōu)化等經(jīng)驗(yàn)。
目 錄
第2版前言
序一
序二
第1版前言
第1章 創(chuàng)建自己的第一個(gè)小程序 1
1.1 準(zhǔn)備工作 1
1.1.1 成為微信公眾平臺(tái)開發(fā)者 1
1.1.2 獲取小程序AppID 4
1.1.3 安裝開發(fā)者工具包 4
1.2 創(chuàng)建第一個(gè)小程序——Hello WXapplet 6
1.3 微信Web開發(fā)者工具的操作與使用 7
1.3.1 界面與操作 7
1.3.2 編輯功能 8
1.3.3 調(diào)試功能 10
1.3.4 項(xiàng)目功能 15
1.3.5 運(yùn)行小程序 15
第2章 小程序初體驗(yàn) 17
2.1 理解小程序 17
2.1.1 Hello WXapplet項(xiàng)目目錄及文件構(gòu)成 18
2.1.2 Hello WXapplet項(xiàng)目的代碼實(shí)現(xiàn) 19
2.2 小程序的線程架構(gòu)與開發(fā)步驟 25
2.2.1 小程序線程架構(gòu) 25
2.2.2 小程序開發(fā)步驟 27
2.2.3 為Hello WXapplet添加新頁(yè)面及示例代碼 27
2.3 進(jìn)一步了解小程序開發(fā)框架 30
2.3.1 MINA框架 31
2.3.2 目錄結(jié)構(gòu) 33
2.3.3 邏輯層 33
2.3.4 視圖層 33
2.3.5 數(shù)據(jù)層 34
2.4 小程序的發(fā)布與使用 35
2.4.1 小程序預(yù)覽、上傳、審核與發(fā)布 35
2.4.2 小程序加載運(yùn)行 37
2.5 深入理解小程序的應(yīng)用場(chǎng)景 38
2.5.1 小程序入口與界面 38
2.5.2 小程序與HTML 5應(yīng)用開發(fā)的差異 40
2.5.3 小程序的最佳應(yīng)用場(chǎng)景 41
2.5.4 小程序?qū)ζ髽I(yè)、開發(fā)者的意義與影響 42
2.5.5 開發(fā)者角色與技能要求 42
2.5.6 小程序的能與不能 43
第3章 小程序開發(fā)基礎(chǔ) 47
3.1 配置 47
3.1.1 全局配置~app.json 47
3.1.2 頁(yè)面配置~page.json 52
3.2 邏輯層 53
3.2.1 注冊(cè)程序~App()方法 53
3.2.2 注冊(cè)頁(yè)面~Page()方法 54
3.2.3 模塊及調(diào)用 61
3.2.4 微信原生API 62
3.3 視圖層 65
3.3.1 WXML詳解 65
3.3.2 WXSS詳解 81
3.3.3 框架組件 85
第4章 框架組件的開發(fā)應(yīng)用 87
4.1 視圖容器組件 87
4.1.1 view 87
4.1.2 scroll-view 88
4.1.3 swiper 90
4.1.4 swiper-item 91
4.2 基礎(chǔ)內(nèi)容組件 92
4.2.1 icon 92
4.2.2 text 93
4.2.3 progress 95
4.3 表單組件 95
4.3.1 button 96
4.3.2 checkbox-group 98
4.3.3 checkbox 98
4.3.4 form 99
4.3.5 input 102
4.3.6 label 105
4.3.7 picker 108
4.3.8 picker-view 110
4.3.9 radio-group 112
4.3.10 slider 114
4.3.11 switch 115
4.3.12 textarea 117
4.4 互動(dòng)操作組件 118
4.4.1 action-sheet 119
4.4.2 modal 120
4.4.3 toast 121
4.4.4 loading 123
4.5 頁(yè)面導(dǎo)航組件 124
4.6 媒體組件 126
4.6.1 image 126
4.6.2 audio 131
4.6.3 video 133
4.7 地圖組件 136
4.8 畫布組件 139
4.9 WXML組件與HTML的差異 140
第5章 API接口的開發(fā)應(yīng)用 142
5.1 網(wǎng)絡(luò)API 142
5.2 媒體API 148
5.2.1 圖片API 148
5.2.2 錄音API 150
5.2.3 音頻播放控制API 151
5.2.4 音樂(lè)播放控制API 154
5.2.5 視頻API 156
5.3 文件API 159
5.4 數(shù)據(jù)緩存API 162
5.5 位置API 166
5.6 設(shè)備信息API 169
5.7 界面API 172
5.7.1 交互反饋API 173
5.7.2 頁(yè)面導(dǎo)航API 175
5.7.3 動(dòng)畫API 177
5.7.4 繪圖API 180
5.7.5 其他API 196
5.8 開放API 197
5.8.1 登錄API 197
5.8.2 用戶信息API 202
5.8.3 微信支付API 203
5.8.4 模板消息API 204
5.8.5 客服消息API 209
5.8.6 分享API 218
5.8.7 獲取二維碼API 219
第6章 小程序開發(fā)綱要 220
6.1 界面 220
6.2 網(wǎng)絡(luò) 222
6.3 本地?cái)?shù)據(jù)及緩存 223
6.4 設(shè)備硬件 226
6.5 微信開放接口 227
6.6 媒體 228
6.7 后端開發(fā)與設(shè)計(jì) 231
第7章 小程序經(jīng)典案例 232
7.1 文件上傳與下載——小相冊(cè) 232
7.1.1 功能詳解 232
7.1.2 程序結(jié)構(gòu) 232
7.1.3 程序細(xì)化 235
7.1.4 程序體驗(yàn) 245
7.2 流媒體轉(zhuǎn)碼與播放——視頻點(diǎn)播 249
7.2.1 功能詳解 249
7.2.2 程序目錄結(jié)構(gòu) 249
7.2.3 程序細(xì)化 250
7.3 互動(dòng)——高冷機(jī)器人 253
7.3.1 功能詳解 253
7.3.2 程序目錄結(jié)構(gòu) 253
7.3.3 程序細(xì)化 253
7.4 LBS應(yīng)用——周邊信息點(diǎn) 257
7.4.1 功能詳解 257
7.4.2 程序結(jié)構(gòu) 257
7.4.3 程序細(xì)化 260
7.5 WebSocket高級(jí)應(yīng)用——遠(yuǎn)程控制設(shè)備 267
7.5.1 應(yīng)用場(chǎng)景 267
7.5.2 開發(fā)實(shí)現(xiàn) 267
7.5.3 案例總結(jié) 271
7.6 掃碼應(yīng)用——微投票 271
7.6.1 功能詳解 272
7.6.2 程序結(jié)構(gòu) 272
7.6.3 程序細(xì)化 272
第8章 小程序優(yōu)化與演進(jìn) 290
8.1 為什么選擇小程序,而不是公眾號(hào)或App 290
8.2 未來(lái)演進(jìn)方向探討 290
8.3 小程序持續(xù)優(yōu)化方法 291
附錄A 微信小程序平臺(tái)運(yùn)營(yíng)規(guī)范 298
附錄B 微信小程序平臺(tái)常見拒絕情形 308
附錄C 溝通聯(lián)絡(luò)方法 313