本書系統(tǒng)全面地講解微信小程序的開發(fā)技術(shù)。開篇創(chuàng)建一個小程序項目并解析體驗,介紹如何由零開始創(chuàng)建一個小程序,全面體驗小程序的開發(fā)工具、界面、開發(fā)框架、實現(xiàn)過程及其主要代碼框架,了解小程序的應用場景及開發(fā)要求。接著介紹小程序開發(fā)基礎(chǔ),包括小程序開發(fā)的語言與語法、函數(shù)方法、模塊、事件交互等。然后詳細介紹了組件的應用與開發(fā),包括開發(fā)過程與組件應用技巧,還詳細分析了API接口,包括使用各個微信原生API接口進行小程序開發(fā)的技巧。后介紹了幾個小程序?qū)崙?zhàn)案例,讓讀者實踐小程序各項能力的應用及掌握一些應用技巧。本書結(jié)構(gòu)清晰,由淺入深,可幫助讀者快速掌握小程序項目的開發(fā)。
第1版前言隨著移動互聯(lián)網(wǎng)的興起,互聯(lián)網(wǎng)作為一種信息技術(shù)在傳統(tǒng)社會與傳統(tǒng)工業(yè)中發(fā)揮的作用越來越強大,互聯(lián)網(wǎng)與整個社會運作正在加速深度融合。“互聯(lián)網(wǎng)+”的趨勢顯而易見,政府、社會組織、企業(yè)以及個人,都對移動互聯(lián)網(wǎng)時代的融合或轉(zhuǎn)型充滿期待而又心懷忐忑:移動化的場景如何結(jié)合?是否有足夠的移動應用開發(fā)能力?即便場景與能力都滿足,是否能應對獲取用戶成本、打開頻率等移動互聯(lián)網(wǎng)運營的巨大挑戰(zhàn)?好在我們有微信!這是一款為移動時代而生,讓世界互聯(lián)網(wǎng)震驚的中國創(chuàng)新應用。經(jīng)過5年多的發(fā)展,微信已有超過8億月活用戶且仍在不斷進化與演進,是移動時代當之無愧的超級App王。更加幸運的是,騰訊的微信團隊源源不斷地將微信的能力開放出來,為我們提供了融合與轉(zhuǎn)型的超強連接力。
2016年1月在廣州舉辦的微信公開課上,“微信之父”張小龍在他演講的最后一部分,宣布將推出“應用號”。小龍?zhí)岬剑骸拔易约寒斄硕嗄瓿绦騿T,我覺得我們應該為開發(fā)團體做一些事情!敝劣凇皯锰枴钡臉幼樱↓埉敃r的大概表述是“類似于公眾號,但比公眾號更便捷、更好找,有更容易使用的形態(tài)”。這就是微信小程序的由來。
歷時8個多月,在2016年9月21日,微信小程序公布開啟“內(nèi)測”。隨即這個內(nèi)測消息便刷爆了朋友圈,我在接下來的數(shù)天內(nèi)便接到不下30個“求內(nèi)測邀請碼”需求留言,小程序火爆程度可見一斑。由于微信團隊首批僅開放了200個內(nèi)測號,物以稀為貴,網(wǎng)絡上不久就有傳言:轉(zhuǎn)讓某個帶小程序功能的微信號,賬號有30.7萬女粉絲,起拍價300萬。
2016年11月3日,小程序正式開放公測。我再次在朋友圈刷屏中體驗到了“小程序”的火爆,感受到了開發(fā)者、企業(yè)以及市場對微信小程序的好奇、疑惑,同時也感受到大家在移動浪潮中擁抱變化的期待。
微信官方頁面指出:“小程序可以在微信內(nèi)便捷地獲取和傳播,同時具有出色的使用體驗!睆埿↓堅谛〕绦騼(nèi)測首發(fā)當天,也在朋友圈給出了解釋:小程序是一種不需要下載安裝即可使用的應用,它實現(xiàn)了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開。這也體現(xiàn)了“用完即走”的理念,用戶無須擔心安裝應用過多的問題。應用將無處不在,隨時可用,但又無須安裝卸載。
移動互聯(lián)網(wǎng)時代的微信應用不可或缺,微信小程序切合了時代需要,毫無疑問會成為政府、組織機構(gòu)、企業(yè)以及開發(fā)者必爭的互聯(lián)網(wǎng)應用場景。微信小程序必將再一次擴展微信強大的“連接力”,幫助我們解決現(xiàn)有服務痛點,或者發(fā)掘、衍生出新的商業(yè)模式,幫助行業(yè)、企業(yè)以及政府機構(gòu)改善服務或?qū)崿F(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型。
感謝微信團隊,為我們帶來微信小程序這個新生事物。絕大部分場景下,不用單獨開發(fā)App的時代來臨了。那么如何開發(fā)小程序?如何將現(xiàn)有的服務或場景與小程序結(jié)合?由于小程序是新生事物,基本上多數(shù)人都無經(jīng)驗可言。與小龍一樣,我覺得此時有必要為所有對小程序感興趣、有期待的朋友,提供一些有關(guān)小程序開發(fā)的指南,這是一件非常有意義的事情。
由于我在工作上與微信團隊聯(lián)系緊密,溝通頻繁,有近水樓臺優(yōu)勢;而且對騰訊業(yè)務有相對全面的了解,熟悉豐富的應用場景,學習了大量小程序項目案例。
自小程序內(nèi)測開啟以來,我們更是夜以繼日,同步研讀與理解微信團隊的文檔,梳理開發(fā)邏輯,測試各個場景案例,希望盡早奉獻給大家一本從入門到精通的小程序開發(fā)大全。
我們嘗試通過本書將我們的先發(fā)優(yōu)勢發(fā)揮出來。由小程序的框架、語法、函數(shù)及API開始,結(jié)合豐富實用的案例,幫助大家熟練掌握小程序的開發(fā)與應用,并探討小程序的適用范圍以及未來優(yōu)化演進的方向。
本書讀者對象包括:
前端開發(fā)工程師微信應用開發(fā)者移動開發(fā)愛好者計算機相關(guān)專業(yè)的學生如何閱讀這本書作為“開放連接體系”的一環(huán),微信團隊為小程序提供連接標準與規(guī)范,最大限度地降低了開發(fā)門檻,但開發(fā)小程序還是需要一定的“專業(yè)開發(fā)能力”與程序開發(fā)的理解力。
微信小程序的開發(fā)是基于框架的。因此,開發(fā)者首先要理解“框架”(framework)的概念。
從軟件設計角度,框架是一個可復用的軟件架構(gòu)解決方案?蚣芤(guī)定了應用的體系結(jié)構(gòu),闡明軟件體系結(jié)構(gòu)中各層次間及其層次內(nèi)部各組件間的依賴關(guān)系、責任分配和控制流程,框架表現(xiàn)為一組接口、抽象類以及實例間協(xié)作的方法。
框架一般是成熟、穩(wěn)健的,可以處理系統(tǒng)中很多的細節(jié)問題,比如,事物處理、安全性、數(shù)據(jù)流控制等問題。框架一般都為多人所用,所以結(jié)構(gòu)很好,擴展性也很好,而且它是不斷升級的,可以直接享受別人升級代碼帶來的好處。
顯然,框架極大地方便了開發(fā)者,減少了開發(fā)代碼量并提升了代碼質(zhì)量。
微信團隊為小程序提供的開發(fā)框架為MINA框架,它類似于淘寶Weex、Vue框架。MINA框架經(jīng)過大量底層的優(yōu)化設計,有著接近原生App的運行速度,對Android端和iOS端做到了高度一致的呈現(xiàn),具有完備的開發(fā)和調(diào)試工具。
微信團隊為小程序的開發(fā)者提供了包含UI界面、社交與支付、語音、多媒體、LBS服務、手機硬件、網(wǎng)絡傳輸?shù)然A(chǔ)能力。功能豐富且實用,可以覆蓋絕大部分移動應用的場景需求。
熊普江,現(xiàn)任騰訊微信架構(gòu)師,負責公司業(yè)務資源規(guī)劃與技術(shù)架構(gòu)評審等工作。自1997年涉足互聯(lián)網(wǎng),曾服務美國Supreme、太平洋網(wǎng)絡、PPTV等技術(shù)與互聯(lián)網(wǎng)公司,任網(wǎng)絡營運總監(jiān)、運維總監(jiān)等職務,2012年加入騰訊。逾18年互聯(lián)網(wǎng)從業(yè)背景,擁有豐富的大型網(wǎng)絡架構(gòu)規(guī)劃與建設,海量用戶平臺規(guī)劃與營運技術(shù)支撐,超大規(guī)模業(yè)務資源規(guī)劃與技術(shù)架構(gòu)管理優(yōu)化等經(jīng)驗。
目 錄
第2版前言
序一
序二
第1版前言
第1章 創(chuàng)建自己的第一個小程序 1
1.1 準備工作 1
1.1.1 成為微信公眾平臺開發(fā)者 1
1.1.2 獲取小程序AppID 4
1.1.3 安裝開發(fā)者工具包 4
1.2 創(chuàng)建第一個小程序——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 項目功能 15
1.3.5 運行小程序 15
第2章 小程序初體驗 17
2.1 理解小程序 17
2.1.1 Hello WXapplet項目目錄及文件構(gòu)成 18
2.1.2 Hello WXapplet項目的代碼實現(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添加新頁面及示例代碼 27
2.3 進一步了解小程序開發(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 小程序預覽、上傳、審核與發(fā)布 35
2.4.2 小程序加載運行 37
2.5 深入理解小程序的應用場景 38
2.5.1 小程序入口與界面 38
2.5.2 小程序與HTML 5應用開發(fā)的差異 40
2.5.3 小程序的最佳應用場景 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 頁面配置~page.json 52
3.2 邏輯層 53
3.2.1 注冊程序~App()方法 53
3.2.2 注冊頁面~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ā)應用 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 互動操作組件 118
4.4.1 action-sheet 119
4.4.2 modal 120
4.4.3 toast 121
4.4.4 loading 123
4.5 頁面導航組件 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ā)應用 142
5.1 網(wǎng)絡API 142
5.2 媒體API 148
5.2.1 圖片API 148
5.2.2 錄音API 150
5.2.3 音頻播放控制API 151
5.2.4 音樂播放控制API 154
5.2.5 視頻API 156
5.3 文件API 159
5.4 數(shù)據(jù)緩存API 162
5.5 位置API 166
5.6 設備信息API 169
5.7 界面API 172
5.7.1 交互反饋API 173
5.7.2 頁面導航API 175
5.7.3 動畫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)絡 222
6.3 本地數(shù)據(jù)及緩存 223
6.4 設備硬件 226
6.5 微信開放接口 227
6.6 媒體 228
6.7 后端開發(fā)與設計 231
第7章 小程序經(jīng)典案例 232
7.1 文件上傳與下載——小相冊 232
7.1.1 功能詳解 232
7.1.2 程序結(jié)構(gòu) 232
7.1.3 程序細化 235
7.1.4 程序體驗 245
7.2 流媒體轉(zhuǎn)碼與播放——視頻點播 249
7.2.1 功能詳解 249
7.2.2 程序目錄結(jié)構(gòu) 249
7.2.3 程序細化 250
7.3 互動——高冷機器人 253
7.3.1 功能詳解 253
7.3.2 程序目錄結(jié)構(gòu) 253
7.3.3 程序細化 253
7.4 LBS應用——周邊信息點 257
7.4.1 功能詳解 257
7.4.2 程序結(jié)構(gòu) 257
7.4.3 程序細化 260
7.5 WebSocket高級應用——遠程控制設備 267
7.5.1 應用場景 267
7.5.2 開發(fā)實現(xiàn) 267
7.5.3 案例總結(jié) 271
7.6 掃碼應用——微投票 271
7.6.1 功能詳解 272
7.6.2 程序結(jié)構(gòu) 272
7.6.3 程序細化 272
第8章 小程序優(yōu)化與演進 290
8.1 為什么選擇小程序,而不是公眾號或App 290
8.2 未來演進方向探討 290
8.3 小程序持續(xù)優(yōu)化方法 291
附錄A 微信小程序平臺運營規(guī)范 298
附錄B 微信小程序平臺常見拒絕情形 308
附錄C 溝通聯(lián)絡方法 313