本書的特點(diǎn)與特色
興許是我向來(lái)不喜歡很多編程書籍開篇就大篇幅羅列知識(shí)點(diǎn)的做法，從業(yè)八年以來(lái)，每每翻閱技術(shù)類書籍，看到連篇累牘的概念理論就頭疼不已。接到清華大學(xué)出版社的邀約后，我長(zhǎng)久思忖如何組織小程序開發(fā)這本書的編寫思路，寫出一本我自己也喜歡看的書籍。
如果能讓讀者身臨其境地開發(fā)一個(gè)幾近真實(shí)的項(xiàng)目，在不知不覺中就可以學(xué)會(huì)小程序開發(fā)，那該多好。慶幸的是，小程序不是一門語(yǔ)言，它不需要像Java、Python、JavaScript等基礎(chǔ)語(yǔ)言教學(xué)一樣羅列一個(gè)個(gè)基礎(chǔ)語(yǔ)法，它*好的學(xué)習(xí)方式就是本書的“實(shí)踐式”學(xué)習(xí)。因此，本書將用一個(gè)較為完整的“案例項(xiàng)目”把小程序的各個(gè)知識(shí)點(diǎn)“串接”起來(lái)，一邊做項(xiàng)目，一邊學(xué)習(xí)小程序的開發(fā)。做完一個(gè)項(xiàng)目就可以入門小程序是本書的目的。
我喜歡這種“實(shí)踐式”學(xué)習(xí)所帶來(lái)的“代入感”（如果你玩過各類角色扮演游戲，你就明白什么是代入感），跟著本書一步步coding，你不僅收獲了知識(shí)，更是直接完成了一個(gè)像模像樣的小程序，這種成就感是學(xué)習(xí)編程*大的動(dòng)力。即使你是一個(gè)基礎(chǔ)較好的開發(fā)者，只看官方的文檔也能學(xué)會(huì)小程序的開發(fā)，我依然建議你認(rèn)真閱讀本書，因?yàn)楸緯鴮槟愎?jié)約大量“試錯(cuò)”時(shí)間。
本書在很多時(shí)候并沒有直接給出一個(gè)問題的*優(yōu)解決方案，而是首先給出一個(gè)看似很蠢的思路來(lái)解決問題。因?yàn)檫@是我們*直接的思維，也是*簡(jiǎn)單的解決方案。通過分析這個(gè)解決方案有什么缺點(diǎn)，*后給出一個(gè)更加優(yōu)秀的解決問題的建議。我想，這符合我們編程里“重構(gòu)”的概念。相比于直接給出*優(yōu)解（事實(shí)上編程里很難有*優(yōu)解，只是相對(duì)“優(yōu)秀”），漸進(jìn)式的解決問題更加能讓讀者體會(huì)到優(yōu)秀解決方案的優(yōu)勢(shì)，避免對(duì)知識(shí)的生搬硬套。
我一直認(rèn)為，本書的編寫思路也是程序員自學(xué)的思路，由點(diǎn)及面、由具體到抽象。在工作中遇到了問題，想辦法解決問題，查閱資料學(xué)習(xí)這個(gè)問題的相關(guān)知識(shí)點(diǎn)，*后把這些知識(shí)點(diǎn)總結(jié)、歸納，形成自己的知識(shí)體系，這是一個(gè)通用的學(xué)習(xí)“套路”。編程的各類語(yǔ)言、框架太多了，技術(shù)發(fā)展的速度也快得驚人，即使類似功能的框架也多達(dá)十幾個(gè)，我們很難像學(xué)習(xí)經(jīng)典數(shù)學(xué)、基礎(chǔ)物理學(xué)、現(xiàn)代經(jīng)濟(jì)學(xué)這樣先學(xué)習(xí)理論再付諸實(shí)踐。Coder有時(shí)就要有這種直面未知的勇氣：先解決、再學(xué)習(xí)，管它三七二十一。
本書雖然定位于入門，但其中不乏一些小程序的進(jìn)階知識(shí)，這主要體現(xiàn)在微信開放接口上。學(xué)習(xí)微信開放接口不僅需要你擁有前端的知識(shí)，更要有一定的服務(wù)器編程經(jīng)驗(yàn)，否則你很難理解為什么微信要這么設(shè)計(jì)開放接口的調(diào)用流程？為什么需要這么復(fù)雜的簽名與令牌體系？
退一步講，不理解也沒關(guān)系，遇到類似問題和功能時(shí)，你知道怎么去解決即可。在編程里，我們不理解的東西太多了，誰(shuí)能保證我們將做過的項(xiàng)目、產(chǎn)品每一個(gè)細(xì)節(jié)都理解得清清楚楚、明明白白？有時(shí)候記住怎么去做，比為什么這么做更加重要。理解清楚只是一個(gè)相對(duì)的概念，沒人能夠準(zhǔn)確定義理解到什么程度才能稱為“理解清楚”，也沒有人能夠說(shuō)明深入到什么程度才算是“深入學(xué)習(xí)”。所以，有選擇地學(xué)習(xí)原理，把更多精力放在解決問題上，我認(rèn)為是一個(gè)正確的 選擇。
在本書中，當(dāng)遇到你不熟悉的知識(shí)體系時(shí)，沒有關(guān)系，先寫上去，實(shí)現(xiàn)這個(gè)功能。當(dāng)以后有了更豐富的經(jīng)驗(yàn)再回過頭來(lái)看看這些知識(shí)點(diǎn)即可。本書的詳細(xì)程度完全可以讓你即使不懂某個(gè)知識(shí)點(diǎn)，也可以完成整個(gè)Orange Can項(xiàng)目。
小程序開發(fā)需要的前置技能
如果不考慮服務(wù)器，小程序開發(fā)只需要開發(fā)者具有JavaScript和CSS相關(guān)知識(shí)即可。
有很多文章說(shuō)，開發(fā)者開發(fā)小程序還需要掌握Vue、AngularJS，這有些強(qiáng)人所難了。小程序確實(shí)有很多和Vue、AngularJS相似的地方，這主要體現(xiàn)在數(shù)據(jù)綁定上。但Vue和AngularJS遠(yuǎn)比微信小程序要復(fù)雜得多，為了開發(fā)一個(gè)簡(jiǎn)單的小程序，學(xué)習(xí)遠(yuǎn)比這個(gè)簡(jiǎn)單的東西復(fù)雜多倍的框架實(shí)在沒有必要。
從先來(lái)后到的角度看，Vue、AngularJS等經(jīng)典MVVM框架確實(shí)先于小程序出現(xiàn)，且小程序借鑒了許多這些MVVM框架中的經(jīng)典思想。但對(duì)于既沒有開發(fā)過小程序，也沒有任何AngularJS、Vue經(jīng)驗(yàn)的開發(fā)者，這個(gè)先來(lái)后到的理念對(duì)你沒有任何意義。反正都不會(huì)，自然是優(yōu)先學(xué)習(xí)簡(jiǎn)單的，再進(jìn)階復(fù)雜的框架。如果你是一個(gè)iOS和Android轉(zhuǎn)型過來(lái)的開發(fā)者，完全沒有必要理會(huì)Vue和AngularJS，小程序開發(fā)中的很多思想相信你在自己的iOS和Android領(lǐng)域已有體會(huì)。
如果你只是為了開發(fā)小程序前端部分，更沒有必要學(xué)習(xí)NodeJS。前端是前端，服務(wù)器是服務(wù)器，我們能把一端做到極致就已經(jīng)非常了不起了。如果你想一個(gè)人開發(fā)一個(gè)完整的小程序，那服務(wù)器語(yǔ)言也沒有規(guī)定必須是NodeJS。選擇一個(gè)你喜歡的服務(wù)器語(yǔ)言，PHP、NodeJS、Python、Java、C#、Ruby都是可以的。
小程序開發(fā)需要掌握什么，在我看來(lái)是一個(gè)偽命題。小程序應(yīng)該成為零基礎(chǔ)入門開發(fā)者學(xué)習(xí)前端的首選開發(fā)平臺(tái)（以學(xué)習(xí)與實(shí)踐為目的），因?yàn)樗銐蚝?jiǎn)單，又同現(xiàn)在的主流MVVM框架非常類似，學(xué)習(xí)曲線很平滑。它應(yīng)該成為入門其他更復(fù)雜、功能更強(qiáng)大的框架的“墊腳石”。
對(duì)于一個(gè)傳統(tǒng)的Web開發(fā)者，在編寫小程序時(shí)只需要注意以下兩點(diǎn)：
（1）小程序中沒有DOM，請(qǐng)放棄“首先獲取DOM，再操作DOM”的思維。
（2）替代DOM操作的方法是“數(shù)據(jù)綁定”。控制組件顯示隱藏、切換CSS樣式、控制滾動(dòng)條，這些很容易用DOM思維思考常見功能在小程序中都是通過“數(shù)據(jù)綁定”實(shí)現(xiàn)的。
如果你想將代碼寫得更加優(yōu)美和簡(jiǎn)潔，那么補(bǔ)充一些ES6和LESS的知識(shí)就更好了。
小程序開發(fā)難嗎
說(shuō)小程序是所有開發(fā)框架/平臺(tái)里*簡(jiǎn)單的可能略微有些夸張，但說(shuō)小程序是目前所有主流移動(dòng)開發(fā)技術(shù)中*簡(jiǎn)單的毫不夸張。這種簡(jiǎn)單來(lái)自于兩個(gè)方面：
*，編寫小程序只需要掌握J(rèn)avaScript和CSS兩門語(yǔ)言。前端*難的是有太多Web前端框架、類庫(kù)需要學(xué)習(xí)。但是，小程序里的JavaScript是“裸奔”的，我們?cè)赪eb開發(fā)中常用的各類框架/類庫(kù)在小程序中統(tǒng)統(tǒng)無(wú)法使用。jQuery、Zepto、AngularJS、HightCharts、ECharts，這些Web前端學(xué)習(xí)中的一座座大山，小程序已經(jīng)全部“干掉了”——小程序運(yùn)行在一個(gè)JSCore中，它本身不支持Web中的window及DOM對(duì)象。有些JavaScript庫(kù)還是可以使用的，但真的沒有必要了，小程序已經(jīng)提供了簡(jiǎn)單的架構(gòu)和內(nèi)置的特性避免使用這些框架。例如，小程序默認(rèn)使用babel將開發(fā)者代碼所使用的ES6語(yǔ)法轉(zhuǎn)換成三端都能很好支持的ES5代碼，幫助開發(fā)者解決環(huán)境不同所帶來(lái)的開發(fā)問題。你所需要掌握的是JavaScript和CSS，原則上講，不再需要學(xué)習(xí)各類框架和庫(kù)了。這無(wú)疑減輕了很多初學(xué)者的負(fù)擔(dān)。
第二，小程序本身就是為輕量級(jí)應(yīng)用所設(shè)計(jì)的平臺(tái)，無(wú)論是開發(fā)工具、設(shè)計(jì)規(guī)范、API設(shè)計(jì)，無(wú)不散發(fā)出一種“大道至簡(jiǎn)”的氣息。你只需要從官方下載一個(gè)開發(fā)工具即可立即開始開發(fā)小程序，沒有復(fù)雜的安裝環(huán)境，沒有復(fù)雜的目錄結(jié)構(gòu)，也沒有復(fù)雜的打包、部署流程。小程序很多近似死板的規(guī)范無(wú)疑讓開發(fā)者減少了很多工作量（不給你選擇，自然簡(jiǎn)單）。關(guān)于對(duì)于開發(fā)者的約束，這個(gè)仁者見仁、智者見智，有人喜歡它的簡(jiǎn)單，也有人憎恨它的“不自由”。
我甚至認(rèn)為小程序完全可以成為那些完全沒有編程經(jīng)驗(yàn)又想進(jìn)入前端開發(fā)領(lǐng)域的人*好的入門平臺(tái)。完全可以從小程序入手，通過小程序平滑的學(xué)習(xí)曲線，在熟悉編程邏輯后，再反向?qū)W習(xí)Web前端龐大的知識(shí)體系，從而進(jìn)入這個(gè)行業(yè)。
處于早期階段的小程序
小程序從2016年9月22日公布后，在短短的3個(gè)月中連續(xù)更新了8個(gè)版本。更新速度非常快。但在2017年1月9日正式開放后，版本迭代速度逐步放慢下來(lái)。預(yù)計(jì)正式上線后，小程序的接口會(huì)逐步趨于穩(wěn)定。
小程序目前還處于極為早期的發(fā)展階段，但其主要的框架、API都已成型，并不影響我們學(xué)習(xí)。本書無(wú)法保證書籍出版前所使用的API不會(huì)在出版后有所調(diào)整，這個(gè)是我不能控制的。本書中所描述的知識(shí)與小程序的行為都只在130400版本中測(cè)試和驗(yàn)證，無(wú)法保證以后小程序會(huì)不會(huì)更改這些行為。事實(shí)上，從*開始的內(nèi)測(cè)版本到現(xiàn)在的130400版本，小程序不僅調(diào)整API，甚至經(jīng)常會(huì)更改一些MINA框架的運(yùn)行機(jī)制和行為，這將導(dǎo)致原本可以正常運(yùn)行的代碼突然變得有問題，需要重新調(diào)整。
除此之外，本書的Orange Can項(xiàng)目是一個(gè)接近于真實(shí)項(xiàng)目的小程序，還是有一定復(fù)雜度的，我無(wú)法保證不出現(xiàn)“任何”bug。事實(shí)上，也沒有任何人能保證自己的項(xiàng)目不出現(xiàn)“任何”bug，我們能做的就是嚴(yán)格測(cè)試、盡量減少bug的數(shù)量，并在發(fā)現(xiàn)bug后*時(shí)間做出修正。
雖然無(wú)法保證書籍中的代碼和API完全不會(huì)變更，但我會(huì)通過微信公眾號(hào)、知乎專欄等方式同讀者交流，保持對(duì)書籍的網(wǎng)絡(luò)更新。同時(shí)，也會(huì)持續(xù)維護(hù)Orange Can示例項(xiàng)目的源代碼，保證項(xiàng)目能夠正確、穩(wěn)定的運(yùn)行。
截止本書出版之前，小程序*新版本為0.14.140900。從130400到140900的版本更迭中，沒有再出現(xiàn)因版本更新而造成的問題，項(xiàng)目代碼運(yùn)行良好。可以看到，小程序從1月9號(hào)正式開放后，API日趨成熟，基本能夠保持穩(wěn)定。
本書與官方文檔的區(qū)別
本書并不想成為官方開發(fā)文檔的“搬運(yùn)工”，除了一些非常必要的地方會(huì)引用官方文檔的說(shuō)明，本書幾乎不會(huì)大段復(fù)制官方文檔。本書更多使用官方API文檔完成一個(gè)項(xiàng)目，對(duì)官方文檔的主要內(nèi)容做詳細(xì)的補(bǔ)充說(shuō)明，并附帶對(duì)文檔內(nèi)容的經(jīng)驗(yàn)性總結(jié)。
官方的API文檔通常定位于工具類的速查手冊(cè)而非教程。當(dāng)然對(duì)于開發(fā)功底深厚的開發(fā)者，只靠開發(fā)文檔也可以完成一個(gè)小程序項(xiàng)目，但通常需要耗費(fèi)較長(zhǎng)時(shí)間。開發(fā)文檔只會(huì)告訴開發(fā)者有哪些能力，但這些能力如何使用還需要開發(fā)者自己探索。
本書可以告訴開發(fā)者如何使用官方API完成我們自己的業(yè)務(wù)邏輯，并在這個(gè)過程中逐步熟悉官方API，從而達(dá)到入門小程序并自己開發(fā)一個(gè)小程序的目的。
除此之外，目前來(lái)說(shuō)，小程序的開發(fā)還是有不少“坑”的。本書嘗試為開發(fā)者提前把這些“坑”踩一踩，填實(shí)了，以幫助開發(fā)者集中精力開發(fā)業(yè)務(wù)，減少浪費(fèi)在小程序bug上的時(shí)間。
一本書是永遠(yuǎn)不可能替代官方API文檔的。即使想成為官方文檔的替代品也是不可能的，因?yàn)?新*全的資料永遠(yuǎn)都由官方文檔率先公布，書籍總會(huì)有一定的滯后性，這也是我為什么沒有在本書中大量引用官方文檔的原因。本書的價(jià)值在于讓開發(fā)者快速入門小程序，并講解小程序的各個(gè)特性，降低開發(fā)者的學(xué)習(xí)成本，快速入門開發(fā)自己的應(yīng)用。
官方文檔總體來(lái)說(shuō)還是非常全面優(yōu)秀的，但也有很多講得不清楚的地方，對(duì)于官方文檔中錯(cuò)誤、遺漏或者沒有講清楚的地方，本書會(huì)做詳細(xì)的補(bǔ)充說(shuō)明。建議開發(fā)者將本書與官方文檔結(jié)合起來(lái)閱讀，學(xué)習(xí)階段以本書為主，文檔為補(bǔ)充；而在開發(fā)階段以文檔為主，本書的補(bǔ)充說(shuō)明為輔。
此外，官方為所有開發(fā)者準(zhǔn)備了一個(gè)非常詳盡的demo，可在微信中搜索“小程序示例”這幾個(gè)關(guān)鍵字。
下載項(xiàng)目資源文件、源代碼
一本書難以詳盡講解小程序的所有知識(shí)點(diǎn)，也無(wú)法回答開發(fā)中的所有問題，更加難以應(yīng)對(duì)不斷更新的小程序版本。這是一個(gè)互聯(lián)網(wǎng)的時(shí)代，我們將嘗試用書籍+網(wǎng)絡(luò)的方式來(lái)維護(hù)本書，并對(duì)小程序*新的變更做出代碼上的改動(dòng)，以保證我們的示例代碼可以正常運(yùn)行。讀者朋友也可以通過我的微信公眾號(hào)向我提供反饋，并收到書籍、源代碼變更的更新消息。此外，我的知乎專欄也會(huì)經(jīng)常發(fā)布一些關(guān)于編程和互聯(lián)網(wǎng)方面的文章。
所有項(xiàng)目源代碼、資源文件等內(nèi)容都將在微信公眾號(hào)中提供下載地址。讀者可以從我的微信公眾號(hào)中獲取項(xiàng)目效果圖和*新版本源代碼。代碼包括Orange Can項(xiàng)目的小程序代碼及部分功能的服務(wù)端PHP代碼。
● 微信公眾號(hào)：小樓昨夜又秋風(fēng)
● 知乎專欄：小樓昨夜又秋風(fēng)
● 知乎ID：七月在夏天
讀者可以訪問地址：http://pan.baidu.com/s/1cxQXie（注意區(qū)分?jǐn)?shù)字和英文字母大小寫）獲得本書源代碼。如果在下載過程中遇到問題，請(qǐng)發(fā)電子郵件至booksaga@126.com，郵件主題設(shè)置為“微信小程序開發(fā)入門與實(shí)踐配書資源”。
如何閱讀本書
如果你是擁有多年豐富開發(fā)經(jīng)驗(yàn)的開發(fā)者，并且已經(jīng)對(duì)小程序有一定了解，建議快速瀏覽章節(jié)目錄，找到你感興趣的主題，然后只看這一小節(jié)。
如果你有一定的前端開發(fā)基礎(chǔ)，但沒有小程序的開發(fā)經(jīng)驗(yàn)，建議從頭開始做完Orange Can項(xiàng)目，深入理解書中的每一個(gè)開發(fā)技巧。建議先看每個(gè)頁(yè)面的效果圖，或者下載*新源代碼，在熟悉功能后，自己嘗試編寫項(xiàng)目功能，再對(duì)比源代碼的實(shí)現(xiàn)方式。也許你寫的項(xiàng)目代碼比本書中的還要優(yōu)秀。
如果你想用小程序來(lái)入門前端，那么請(qǐng)先熟悉JavaScript和CSS的基礎(chǔ)知識(shí)，然后把Orange Can項(xiàng)目當(dāng)作一個(gè)真實(shí)項(xiàng)目，一邊做一邊實(shí)踐所學(xué)習(xí)的JavaScript和CSS知識(shí)。遇到不太明白的地方努力搞懂它，實(shí)在不懂也沒關(guān)系，先寫上去，等有一定經(jīng)驗(yàn)后再回過頭來(lái)看。但無(wú)論如何，一定要完成Orange Can項(xiàng)目的文章和電影這兩個(gè)部分。
如果你是一個(gè)純粹的技術(shù)開發(fā)者，那么請(qǐng)直接從第2章開始閱讀。
總體的建議是，對(duì)于Orange Can項(xiàng)目的文章和電影部分，應(yīng)該一步步跟著書籍逐步實(shí)現(xiàn)這兩個(gè)核心功能；而對(duì)于“設(shè)置”頁(yè)面，結(jié)合源代碼“看懂”本書中的內(nèi)容即可。當(dāng)然，如果整本書你都能親手敲打每一行代碼，我相信你收獲的絕對(duì)不僅僅是小程序開發(fā)的知識(shí)點(diǎn)。
此外，對(duì)于Orange Can項(xiàng)目的CSS樣式，建議開發(fā)者不要完全照搬本書的CSS樣式，每個(gè)人編寫CSS樣式的思路千差萬(wàn)別，本書無(wú)法保證所有CSS樣式都是有“意義的”，少部分CSS樣式是為了“防御性”而編寫的。重點(diǎn)是小程序相關(guān)的知識(shí)點(diǎn)和JavaScript代碼。
微信官方開發(fā)者社區(qū)
微信官方開放了一個(gè)開發(fā)者社區(qū)，開發(fā)者可以在社區(qū)里向微信官方反饋bug及提出問題。
致謝
向我多年的朋友蔣建明致謝，感謝他為本書提供了很多寶貴意見。
感謝石墨文檔聯(lián)合創(chuàng)始人陳旭為本書作序。
感謝清華大學(xué)出版社王金柱老師的支持，讓我“拖拖拉拉”寫了近三個(gè)月才完成本書。
雷 磊
2017年2月8日
雷磊，8年研發(fā)及團(tuán)隊(duì)管理經(jīng)驗(yàn)。曾就職于國(guó)內(nèi)*大的GIS公司互聯(lián)網(wǎng)部門，任職研發(fā)經(jīng)理。精通C#、Python、Java、JavaScript等語(yǔ)言與Web開發(fā)技術(shù)。工作之余經(jīng)常撰寫有關(guān)互聯(lián)網(wǎng)技術(shù)、商業(yè)模式等文章，發(fā)表在各個(gè)TMT媒體上。微信小程序首批內(nèi)測(cè)開發(fā)者，知乎專欄“小樓昨夜又秋風(fēng)”作者。
第1章 微信小程序簡(jiǎn)介 1
1.1 什么是微信小程序 2
1.2 什么類型的應(yīng)用適合用小程序開發(fā) 5
1.3 小程序與原生App（iOS、Android）的優(yōu)劣對(duì)比 6
1.4 小程序會(huì)淘汰原生App嗎 10
1.5 Web前端的未來(lái) 10
1.6 Web前端開發(fā)者與小程序 11
1.7 MINA框架與微信小程序 12
1.8 微信小程序beta測(cè)試版 12
第2章 小程序環(huán)境搭建與開發(fā)工具介紹 13
2.1 微信Web開發(fā)者工具下載及安裝 14
2.2 新建*個(gè)項(xiàng)目 14
2.3 微信Web開發(fā)者工具界面功能介紹 16
2.3.1 編輯選項(xiàng)卡 17
2.3.2 調(diào)試選項(xiàng)卡 19
2.3.3 項(xiàng)目選項(xiàng)卡 22
2.3.4 編譯選項(xiàng) 23
2.3.5 后臺(tái)選項(xiàng) 24
2.3.6 緩存選項(xiàng) 24
2.3.7 關(guān)閉選項(xiàng) 24
2.3.8 快速打開官方API文檔 24
2.3.9 開發(fā)工具的更新 24
2.3.10 常用小程序快捷鍵 25
第3章 從*個(gè)簡(jiǎn)單的“Welcome”頁(yè)面開始小程序之旅 26
3.1 認(rèn)識(shí)小程序的基本文件結(jié)構(gòu) 27
3.2 開始動(dòng)手編寫*個(gè)小程序頁(yè)面 28
3.3 構(gòu)建welcome頁(yè)面的元素和樣式 31
3.4 小程序所支持的CSS選擇器 35
3.5 Flex布局 36
3.6 小程序自適應(yīng)單位rpx簡(jiǎn)介 39
3.7 全局樣式文件app.wxss 42
3.8 頁(yè)面的根元素page 42
3.9 app.json中的window配置項(xiàng) 44
第4章 文章列表頁(yè)面 47
4.1 文章列表頁(yè)面元素分析及準(zhǔn)備工作 48
4.2 swiper組件 50
4.3 Boolean值的陷阱 53
4.4 構(gòu)建文章列表的骨架和樣式 54
4.5 image組件的4種縮放模式與9種裁剪模式 57
4.5.1 scaleToFill 58
4.5.2 aspectFit 58
4.5.3 aspectFill 59
4.5.4 widthFix 60
4.5.5 9種裁剪模式 60
4.6 完成靜態(tài)文章列表 61
4.7 .js文件的代碼結(jié)構(gòu)與Page頁(yè)面的生命周期 64
4.8 數(shù)據(jù)綁定 68
4.8.1 初始化數(shù)據(jù)綁定 69
4.8.2 在哪里可以查看數(shù)據(jù)綁定對(duì)象 70
4.8.3 綁定復(fù)雜對(duì)象 71
4.8.4 數(shù)據(jù)綁定更新 72
4.9 列表渲染wx:for 76
4.10 配置單個(gè)頁(yè)面導(dǎo)航欄背景色 79
4.11 從歡迎頁(yè)面跳轉(zhuǎn)到文章頁(yè)面 80
4.11.1 事件 80
4.11.2 redirectTo與navigateTo 82
4.11.3 小程序*多只能有5層頁(yè)面 83
4.11.4 冒泡事件與非冒泡事件 84
第5章 模塊、模板與緩存 85
5.1 將文章數(shù)據(jù)從業(yè)務(wù)中分離 86
5.2 小程序的模塊 87
5.3 小程序的模板化 89
5.4 消除template模板對(duì)外部變量名的依賴 90
5.5 include與import引用模板的區(qū)別 92
5.6 CSS的模塊化 93
5.7 令人遺憾的模板化而非組件化 94
5.8 使用緩存在本地模擬服務(wù)器數(shù)據(jù)庫(kù) 95
5.8.1 應(yīng)用程序的生命周期 95
5.8.2 使用Storage緩存初始化本地?cái)?shù)據(jù)庫(kù) 96
5.8.3 緩存的強(qiáng)制清理及注意事項(xiàng) 99
5.9 編寫緩存數(shù)據(jù)庫(kù)操作類 99
5.10 使用緩存數(shù)據(jù)庫(kù)操作類 101
5.11 使用ES6改寫緩存操作類 102
5.12 完善文章數(shù)據(jù) 103
5.13 完整的data.js數(shù)據(jù) 104
第6章 文章詳情頁(yè)面 110
6.1 跳轉(zhuǎn)到文章詳情頁(yè)面 111
6.2 不要在template上注冊(cè)事件 112
6.3 頁(yè)面間傳遞參數(shù)的3種方式 113
6.3.1 組件的自定義屬性 113
6.3.2 通過dataset獲取組件自定義屬性 114
6.3.3 獲取頁(yè)面參數(shù)值 115
6.4 編譯時(shí)設(shè)置初始化頁(yè)面及參數(shù) 115
6.5 讀取文章詳情數(shù)據(jù) 116
6.6 文章id號(hào)的數(shù)據(jù)流向圖 117
6.7 編寫文章詳情頁(yè)面 118
6.8 垂直居中問題的經(jīng)典解決方法 121
6.9 動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題 122
6.9.1 使用配置文件配置導(dǎo)航欄標(biāo)題 122
6.9.2 使用wx.setNavigationBarTitle(OBJECT)設(shè)置導(dǎo)航條 123
第7章 收藏、評(píng)論、點(diǎn)贊與計(jì)數(shù)功能 124
7.1 收藏、評(píng)論、點(diǎn)贊、計(jì)數(shù)功能準(zhǔn)備工作 125
7.2 文章收藏功能 127
7.2.1 條件渲染：wx:if與wx:else 127
7.2.2 實(shí)現(xiàn)收藏點(diǎn)擊功能 128
7.2.3 交互反饋wx:showToast 130
7.3 文章點(diǎn)贊功能 131
7.4 本地緩存的重要性及應(yīng)用舉例 133
7.5 支持文字、圖片、拍照、語(yǔ)音上傳的文章評(píng)論 134
7.6 文章評(píng)論頁(yè)面的實(shí)現(xiàn)步驟與思路 134
7.7 獲取并綁定文章評(píng)論數(shù)據(jù) 135
7.8 顯示文章評(píng)論數(shù)據(jù) 140
7.9 實(shí)現(xiàn)圖片預(yù)覽 145
7.10 實(shí)現(xiàn)提交評(píng)論的界面 146
7.11 wx:if與hidden控制元素顯示和隱藏 152
7.12 實(shí)現(xiàn)文字評(píng)論框和語(yǔ)音評(píng)論框的切換 152
7.13 input組件 153
7.14 bindinput事件 154
7.15 屏蔽評(píng)論關(guān)鍵字 155
7.16 實(shí)現(xiàn)自定義發(fā)送按鈕 157
7.17 同時(shí)支持模擬器回車、真機(jī)點(diǎn)擊“完成”發(fā)送評(píng)論 161
7.18 圖片與拍照評(píng)論的界面實(shí)現(xiàn) 161
7.19 實(shí)現(xiàn)從相冊(cè)選擇照片與拍照 164
7.20 icon圖片 166
7.21 刪除已選擇的圖片 167
7.22 在小程序中使用CSS 3動(dòng)畫 168
7.23 實(shí)現(xiàn)圖片評(píng)論的發(fā)送 170
7.24 實(shí)現(xiàn)語(yǔ)音消息的發(fā)送 171
7.25 實(shí)現(xiàn)語(yǔ)音消息的暫停與播放 174
7.26 用戶授權(quán) 176
7.27 解決真機(jī)運(yùn)行時(shí)評(píng)論頁(yè)面滑動(dòng)卡頓的問題 177
7.28 文章閱讀計(jì)數(shù)功能 177
第8章 背景音樂播放 180
8.1 顯示音樂播放圖標(biāo) 181
8.2 切換音樂播放圖標(biāo) 182
8.3 背景音樂播放的特點(diǎn) 182
8.4 實(shí)現(xiàn)單頁(yè)面背景音樂播放 183
8.5 監(jiān)聽音樂播放 185
8.6 全局變量與全局音樂播放 186
8.7 音樂總控開關(guān) 192
8.8 顯示音樂的封面圖片 194
第9章 豐富文章頁(yè)面 195
9.1 將頁(yè)面分享給朋友和微信群 196
9.2 從swiper組件跳轉(zhuǎn)到文章詳情頁(yè)面 197
9.3 使用小程序動(dòng)畫實(shí)現(xiàn)點(diǎn)贊特效 199
第10章 電影 204
10.1 小程序的tab選項(xiàng)卡 205
10.2 電影頁(yè)面介紹 208
10.3 編寫豆瓣星星評(píng)分組件：stars-tpl模板 210
10.4 編寫movie-tpl模板 212
10.5 編寫movie-list-tpl模板 213
10.6 電影首頁(yè)的骨架與樣式 215
10.7 豆瓣電影API分析 216
10.8 電影首頁(yè)的js編寫 217
10.9 wx.request發(fā)送http/https請(qǐng)求 219
10.10 設(shè)置wx.request的超時(shí)時(shí)間 221
10.11 處理返回的電影數(shù)據(jù) 221
10.12 綁定處理后的電影數(shù)據(jù) 224
10.13 http和https在小程序中的使用說(shuō)明 226
10.14 跳轉(zhuǎn)到更多電影頁(yè)面 227
10.15 編寫movie-grid-tpl模板 229
10.16 編寫“更多電影”頁(yè)面 231
10.17 實(shí)現(xiàn)頁(yè)面下拉刷新的“三部曲” 234
10.18 在模擬器中可執(zhí)行下拉刷新但在真機(jī)中無(wú)法執(zhí)行下拉刷新的常見錯(cuò)誤 237
10.19 json中的backgroundColor配置的是哪里的顏色 238
10.20 實(shí)現(xiàn)上滑加載更多數(shù)據(jù) 239
10.21 動(dòng)態(tài)設(shè)置導(dǎo)航欄loading圖標(biāo) 241
10.22 電影搜索 244
10.23 電影詳情頁(yè)面 249
10.24 電影詳情頁(yè)面的骨架和樣式 251
10.25 編寫電影詳情頁(yè)面的業(yè)務(wù)邏輯代碼 258
10.26 預(yù)覽電影海報(bào) 261
10.27 設(shè)置電影頁(yè)面的導(dǎo)航欄標(biāo)題 262
第11章 設(shè)置 264
11.1 設(shè)置頁(yè)面 265
11.2 獲取用戶基本信息 272
11.3 數(shù)據(jù)緩存的異步操作 275
11.4 獲取系統(tǒng)信息 277
11.5 獲取網(wǎng)絡(luò)狀態(tài) 281
11.6 獲取當(dāng)前位置信息與當(dāng)前速度信息 282
11.7 使用微信內(nèi)置地圖查看位置信息 283
11.8 監(jiān)聽羅盤數(shù)據(jù)制作一個(gè)簡(jiǎn)易指南針 284
11.9 在小程序中實(shí)現(xiàn)搖一搖 286
11.10 掃碼 289
11.11 獲取小程序頁(yè)面二維碼 292
11.12 下載并預(yù)覽pdf、word等多種類型文檔 293
第12章 開放接口 300
12.1 準(zhǔn)備工作 301
12.2 用戶登錄 301
12.3 用戶信息校驗(yàn) 307
12.4 解析用戶加密數(shù)據(jù)獲取openId及UnionId 313
12.5 模板消息 316
12.6 form表單及picker組件 321
12.7 發(fā)送模板消息 323
12.8 微信支付 328
12.9 真實(shí)的微信小程序登錄狀態(tài)維護(hù) 336
第13章 雜項(xiàng) 338
13.1 wx:key 339
13.2 scroll-view組件：在js中控制滾動(dòng)條 343
13.3 深入理解小程序的單向數(shù)據(jù)綁定機(jī)制 348
13.4 深入理解scroll-view組件的bindscrolltolower、lower-threshold屬性 349
13.5 微信小程序發(fā)布流程 350
新書資訊