編輯推薦

移動應用開發已進入H5+native結閤的時代，把握微信分發渠道的微信小程序應運而生，將會給移動應用的分發帶來一種新的形式和巨大的流量入口，基於JavaScript、Xml和CSS技術的小程序應用將會大量齣現，專業的小程序開發者也會大量湧現。

內容簡介

這是一本幫助編程愛好者和從業人員從零開始學習微信小程序設計的書。本書緊跟微信小程序的技術發展，是目前在該領域率先進行係統的技術探討和培訓的著作。本書站在學習的角度，目的是讓學習者通過21天的時間瞭解到微信小程序的技術框架結構、開發環境搭建、編程語言細節等。本書全麵地講解瞭微信小程序的邏輯層與視圖層的架構特點、JavaScript語言的入門和進階知識、WXML語言的語法特點、WXML視覺組件的使用、WXSS樣式錶語言的語法入門、常用樣式描述語句、盒模型和Flex布局等，快速具備微信小程序開發的能力。這是一本從零學習微信小程序開發的專業書，不需要額外的專業基礎就能讓你讀懂這本書。對於初學者，本書可以作為一本係統的學習教程來使用；對於有經驗的前端開發者，本書可以作為微信小程序開發的參考書來閱讀。

作者簡介

作者王延平，畢業於華北電力大學，在武漢凱迪、北京博奇、中國華電集團等央企、上市企業從事9年技術研發和項目管理工作，後轉行移動互聯網，分彆在麥包包、阿裏等公司從事産品設計與開發，現任武漢思行閤一科技有限公司總經理，從事移動互聯網産品的設計、開發、運營與推廣，主要産品有"打字學英語”APP，已上市，目前用戶量30萬+。

目錄

第1部分 微信小程序
第1天 微信小程序概述
1．1 什麼是微信小程序
1．2 小程序在個人移動互聯時代的意義
1．3 微信大事記
1．4 新的消息
第2天 微信小程序的技術架構特點
2．1 微信小程序在開發上的特點
2．2 微信將會支持的小程序分發模式
2．3 微信小程序將會給前端設計帶來的變革
2．4 學習微信小程序開發的路徑
第2部分 開發前的準備
第3天 小程序的注冊申請
3．1 申請微信小程序
3．2 微信認證
3．3 小程序綁定微信開放平颱賬號
第4天 開發環境的搭建
4．1 認識小程序管理後颱
4．2 小程序開發環境的搭建
4．3 初識小程序開發工具
4．4 編輯模式
4．5 調試模式
4．6 項目管理
第3部分 微信小程序的技術框架
第5天 框架和配置文件
5．1 小程序的目錄結構
5．2 JSON-小程序的配置文件
5．2．1 pages-頁麵配置
5．2．2 window-窗口錶現配置
5．2．3 tabBar-導航欄配置
5．2．4 networkTimeout-通信超時事件配置
5．2．5 debug-調試模式配置
第6天 邏輯層（AppService）
6．1 小程序的初始化
6．2頁麵注冊
6．3頁麵的路由
6．4邏輯層的模塊化
第4部分 WXML語言與視覺組件
第7天 WXML語言和數據綁定
7．1 WXML語法規範
7．2 視覺組件
7．3 組件的數據綁定
7．3．1 數據的簡單綁定
7．3．2 綁定時的運算
7．3．3 綁定時的數據組閤
第8天 邏輯渲染語句
8．1 wx：if條件渲染語句
8．2 wx：for列錶渲染語句
第9天WXML的高級特性
9．1 模闆
9．2 事件
9．3 事件對象
9．4 引用
第5部分 WXSS樣式錶語言
第10天 WXSS語言基礎
10．1 WXSS（CSS）簡介
10．2 CSS基本語法
10．3 選擇器
10．3．1 id選擇器
10．3．2 class選擇器
10．4 使用CSS樣式錶
10．4．1 內聯樣式
10．4．2 外部樣式錶
10．5 WXSS的新增特性
第11天 CSS常用屬性
11．1 尺寸屬性
11．2 背景屬性
11．2．1 背景顔色
11．2．2 背景圖像
11．3 文本格式
11．3．1 文本顔色
11．3．2 文本對齊方式
11．3．3 文本轉換
11．3．4 文本縮進
11．4 字體屬性
11．4． 1 字體係列
11．4．2 字體大小
第12天 CSS布局屬性
12．1 盒模型(Box Model)
12．2顯示方式與可見性
12．3 position定位
12．4 float浮動屬性
12．5邊框
12．5．1邊框樣式
12．5．2邊框寬度
12．5．3邊框顔色
12．6外邊距和內邊距
第13天Flex布局
13．1Flex布局簡介
13．2模型
13．3容器屬性
13．3．1主軸方嚮屬性
13．3．2換行屬性
13．3．3簡寫形式
13．3．4主軸對齊屬性
13．3．5側軸對齊屬性
13．3．6多行對齊屬性
13．4項目的屬性
13．4．1順序屬性
13．4．2放大比例屬性
13．4．3縮小比例屬性
13．4．4伸縮基準屬性
13．4．5簡寫形式
13．4．6單項對齊屬性
第6部分JavaScript入門
第14天JavaScript語言基礎
14．1文件的編輯和運行
14．2語句
14．2．1語句塊
14．2．2注釋語句
14．2．3小程序的調試輸齣語句
第15天變量與數據類型
15．1變量
15．2操作符
15．3數據類型
15．3．1數值
15．3．2字符串
15．3．3布爾型
15．3．4數據類型轉換
15．3．5null和undefined
15．4數組
15．4．1創建和初始化數組
15．4．2數組元素的存取
15．4．3數組的操作
第16天流程控製語句
16．1條件語句
16．1．1if語句
16．1．2條件運算符
16．1．3邏輯操作符
16．1．4switch語句
16．2循環語句
16．2．1for循環
16．2．2for in循環
16．2．3while循環
16．2．4do while循環
16．2．5break退齣循環語句
16．2．6continue繼續循環語句
第7部分JavaScript進階
第17天麵嚮對象程序設計（OOP）
17．1類和對象
17．2創建對象
17．2．1直接創建Object類的對象實例
17．2．2用new關鍵字創建對象
17．2．3this關鍵字
17．3使用對象
17．4繼承
第18天函數
18．1定義函數
18．1．1定義命名函數
18．1．2定義匿名函數
18．1．3用Function類創建匿名函數
18．2函數的參數
18．3函數的返迴值
第19天JSON語法詳解
19．1JSON的語法結構
19．2使用JSON
19．2．1從JSON中讀數據
19．2．2嚮JSON中寫數據
19．2．3修改JSON中的數據
19．2．4刪除JSON中的數據
19．2．5遍曆JSON對象
第20天ES6語法
20．1ES6簡介
20．2ES6常用語法詳解
20．2．1let變量聲明語句
20．2．2const常量聲明語句
20．2．3類操作語句
20．2．4arrow function箭頭函數
第8部分工具和社區
第21天開發工具和學習社區
21．1Coolsite360可視化工具
21．2即速應用
21．3開發社區介紹
附錄 微信小程序工具書
附錄A小程序組件詳解
A．1視圖容器
A．1．1view
A．1．2scroll-view
A．1．3swiper
A．2基礎內容組件
A．2．1icon
A．2．2text
A．2．3progress
A．3錶單組件
A．3．1button
A．3．2checkbox-group
A．3．3form
A．3．4input
A．3．5label
A．3．6picker
A．3．7radio-group
A．3．8slider
A．3．9switch
A．3．10textarea
A．4導航組件
A．5媒體組件
A．5．1image
A．5．2video
A．6地圖組件
A．7畫布組件
附錄B小程序API詳解
B．1網絡
B．1．1發起請求
B．1．2上傳、下載
B．1．3Web Socket
B．2媒體
B．2．1圖片
B．2．2錄音
B．2．3音頻播放控製
B．2．4音樂播放控製
B．2．5音頻組件控製
B．2．6視頻
B．2．7視頻組件控製
B．3文件
B．4數據緩存
B．5位置
B．5．1獲取位置
B．5．2查看位置
B．5．3地圖組件控製
B．6設備
B．6．1係統信息
B．6．2網絡狀態
B．6．3重力感應
B．6．4羅盤
B．6．5撥打電話
B．6．6掃碼
B．7界麵
B．7．1交互反饋
B．7．2設置導航條
B．7．3導航
B．7．4動畫
B．7．5繪圖
B．8開放接口
B．8．1登錄
B．8．2用戶信息
B．8．3微信支付
B．8．4模闆信息
B．8．5客服消息
B．8．6分享
附錄CJavaScript的關鍵字和操作符
C．1JavaScript操作符
C．2 字符串方法(錶C-8)
C．3Math對象
C．4Date對象(錶C-13)

前言/序言

推薦序：價值觀

從2016年11月開始公測以來，微信小程序的上綫時間就一直成為眾多圈內人士及用戶密切關注的話題，在臨近新年到來之際答案得以揭曉——2017年1月9日，微信小程序正式上綫。

除瞭揭曉這個答案，在2017微信公開課PRO版這個非常重要的微信集中展示平颱，騰訊公司高級執行副總裁、微信事業群總裁張小龍還重點介紹瞭小程序的發展曆程，並全麵闡述瞭其創作理念和開發者最關心的問題。其中的問題包括:有沒有小程序的入口？會不會提供類似於小程序商店的地方供用戶下載？小程序能不能推送消息？

對以上問題張小龍給齣的答案皆為否定——沒有！與之前的訂閱號一樣，用戶需要訂閱纔能進入，在微信中沒有專門的入口，小程序則可以通過二維碼掃描進入；正如公眾號沒有公眾號中心，微信裏也不會做小程序的分發商店，隻是可以查找和搜索；小程序不能推送消息，隻會提供一些服務觸達的方式。而且，除瞭這三點之外，微信小程序還沒有訂閱機製，沒有粉絲；不能分享到朋友圈，隻可以分享到聊天中；不能做遊戲；與公眾號是獨立的關係。對這些設計，從常理來看有些人很不能理解，甚至覺得是貽笑大方，畢竟這幾個拓展用戶與産品接觸麵及擴充增值應用的方法是很多産品常用的，並且大多會有不錯的實際收效。那麼，為何張小龍率領的團隊會有自己的打算呢？

在一年前的公開課上，張小龍分享過微信團隊四點核心價值觀：一切以用戶價值為依歸；讓創造發揮價值；好的産品應該是用完即走的；讓商業化存在於無形之中。

其中前麵兩點應該是所有團隊、所有産品都應視為要旨而去遵循的價值觀，相信這樣的看法不會有太多的異議。畢竟，用戶是産品最終的受眾，不能深入挖掘用戶需求的産品注定不會走遠。再者，融入瞭智慧的創作過程就應該要産生價值，為用戶，為閤作夥伴，為社會，也為自己，這也是天經地義的。不過，不同的團隊往往因為對這兩點的理解不同而會有不同的推進方案和結果，也會齣現上下落差極大的狀況。而微信團隊恰恰在這兩點上做得最優秀，這也應該是其到目前為止非常成功的重要緣由。

而如果要深究他們為何能做到最優秀，後麵的兩點價值觀則可以更進一步剖析。我們可以將前兩點看作方嚮，是永遠不可能達到極緻但必須持續嚮最高遠追求的理想，是形而上層麵的道！後麵兩點則在一定程度上我們可以將之看成術，因為它指引瞭具體執行過程當中如何“為”的問題，所以它又是完全融閤瞭前麵所述“道”層麵的術。而這正是其最高妙之處，展示瞭張小龍及團隊對商業、用戶,以及産品深邃而精準的理解。

“好的産品應該是用完即走的”，“讓商業化存在於無形之中”，這兩點錶麵上看似乎有悖於常道，但卻暗閤瞭道傢“無為而治”思想的最高境界。老子《道德經》曾說“無為而無不為”，“無為”並不是說不作為，而是指不執著、不妄為，是要順著事物的自然規律，順著人的原初本性而為，這樣能充分發揮萬事萬物天地自然的生命力而達到其自我實現，以至於全盤實現。所以之後還有“取天下常以無事”的說法，天下都能“無為而治”，團隊管理與産品規劃更不應是難事瞭。

關於“好的産品應該是用完即走的”，張小龍提到：“一個好的産品不是黏住用戶，而是盡量讓這個用戶離開你的産品”，因為這對於用戶來說是效率最高的結果，是自己最輕鬆自然的狀態，從策劃團隊的指導思想來說這就是以用戶價值為歸依的體現，就是真正順應瞭人這個本體所具有的本性狀態，用戶使用其産品自然會身心愉悅而無絲毫不快。在2017微信公開課PRO版上，張小龍再次著重強調瞭這個價值觀。而且說去年提齣瞭“用完即走”的觀念後“一些業內人士都會來笑話我們”，但對此他們仍然巋然不動，因為他們堅信微信隻是一個工具，其目的是幫助用戶以最高效的方法去完成任務，這是工具的目的，工具的使命。用戶完成自己的任務後，自然便不必再停留在産品中。而這一理念也一直貫穿在微信的所有産品綫上，所以微信倡導去中心化，針對用戶在哪裏可以啓動小程序這一問題，張小龍錶示最希望的啓動方式是掃二維碼。這樣，盡管在微信裏麵沒有專門的入口，而每一個小程序關聯的企業、賣場、産品包裝、戶外廣告、影視傳媒等都能夠輕鬆顯示二維碼，這反而形成瞭“無入口而無處不是入口”的情況。而平常，很多團隊的工作都是簡單直接地圍繞如何黏住用戶來思考的，都是希望用戶盡可能有更長的持續使用時間，都是以自我價值體現為齣發點，以“為”的意識去策劃，這樣就忘卻瞭産品的主體是用戶，違背瞭用戶自然的本性上的需求。沒有用戶會願意浪費時間去做很多低效率的事情，哪怕他是在休閑時光享受著休閑的應用。所以就會齣現“有為”卻“為”不瞭，而錶麵上“無為”卻大有所為。

“一個好的産品的商業化和用戶的價值、用戶的體驗是並不矛盾，好的商業化應該是不騷擾用戶，並且是隻觸達他需要觸達的那一部分用戶”，張小龍在闡述“讓商業化存在於無形之中”的價值觀時提到瞭這句話。“無形”是很多人看不到的用戶真正需要的那些點，而這些點往往是用戶最在乎的。“騷擾用戶”就是被很多人所反感，往往不會因為一個應用好而忍氣吞聲，頻繁騷擾的結果肯定是被直接卸載。所以小程序的推送也是不被允許的，除非用戶自己選擇願意接收。

基於這樣的理念和實際開發，如今呈現齣來的小程序就是無須安裝、觸手可及、用完即走、無須卸載。對於用戶來說就是使用起來最簡單、最快捷，同時對用戶對手機也最沒有負擔。用戶使用前後腦子裏不需要思考任何東西，想用馬上就拿來，用後隨即就完事。而對於微信團隊來說這樣的結果就是最不想黏住用戶，反而是黏住用戶最多最不想用戶花費更多的時間，但確實會讓更多的用戶在微信上花更多的時間。所以，小程序也注定不會是“小”程序，它必將成為2017年移動互聯網領域最熱門的話題之一，也將帶動大批關聯的企業、團隊、開發者加入其中，用戶也能從微信平颱獲得更多的實用價值。

基於如此的移動互聯網技術演進大勢，作者非常閤適宜地創作瞭這冊圖書《21天精通微信小程序開發》，齣發點就是希望更多的開發者能夠加入微信小程序這波洪流，並藉此機會能進入更廣闊、更深入的開發領域，因此其技術內容的創作及文字語句的寫作都是專門針對相對比較基礎的開發者。最貼心的是，作者還依照心理學傢研究的成果“人養成或改變一個習慣隻需要21天”來編排，將全部內容按日期分章節來規劃閱讀者的學習步驟，可謂考慮得非常周到。

當然，閱讀本書的開發者最好也能夠讓自己所學的過程契閤上文所述的“無為而無不為”的境界，於學習途中應忘記這個“21天”，明白它背後真正的要旨是期望大傢能保證持續不間斷地閱讀及實作，剋服怠惰或其他影響意誌的不良習性依照本書循序漸進，勿三心二意，勿半途而廢，藉本次學習機會按照養成習慣的路徑，由“刻意而不自然”的學習狀態，經過“刻意而自然”直到“不經意，自然”的學習習慣。

在此基礎上可以更進一層的是，大傢藉微信團隊開發小程序及整個微信産品的價值觀，想想自己需要的學習價值觀和人生價值觀，想想自己的理想和職業規劃。一方麵考慮清楚自己為何要閱讀這本書，為何要學習小程序。是學得一技專長嗎？還是作為一個契機和開始。如果能如此，你收獲的一定不僅僅是微信小程序的開發技能，而將會收獲到更多的平颱和機遇，以及更美妙的未來！

範再生

掌脈科技COO （原《新潮電子》雜誌社主編）

2017年元旦

前言

個人移動終端的輕應用時代已悄然來臨。

微信小程序，一種依托微信輕應用理念的産品，尚未麵世就掀起瞭一輪一輪的討論熱潮：微信的野心在哪裏？小程序能做什麼？開發者怎樣去抓住小程序的風口？一個個問題擺在開發者麵前，本書立足微信小程序已公開的技術架構，從技術和運營層麵嘗試解答開發者的問題，也嘗試著能幫助沒有開發經驗的朋友，從零開始學習編程，快速掌握微信小程序的開發知識，成為一名“小程序員”。

本書有如下幾個特點：

1�� 覆蓋全麵

本書全麵介紹瞭微信小程序前端開發的相關支持，從微信的框架講起，介紹瞭JavaScript、WXML、CSS等語言的基礎知識和它們在微信小程序中的應用。

2�� 講解詳細

考慮我們的讀者大多數是沒有編程經驗的朋友，我們對頁麵、組件、函數、麵嚮對象等入門必須掌握的概念進行瞭深入淺齣的講解，內容豐富，語言平實，力求讓每一位讀者都能快速瞭解前端頁麵和邏輯開發的方法，走進程序員的大傢庭。

時間倉促，加之筆者水平有限，書中難免會齣現一些錯誤或者需要改進的地方，懇請讀者批評指正。為瞭能更好地與您交流，您可以加我的微信或者QQ一起討論小程序有關的話題，我的微信號和QQ號都是2264538870。

在本書撰寫的過程中，得到瞭許多專業的、治學嚴謹的朋友的支持和鼓勵，他們幫我整理思路、收集資料、校對書稿，沒有他們的幫助，我也不可能在如此短的時間內完成書稿，在此謹嚮各位朋友的無私付齣說一聲謝謝：

陳波吳萬海巢潔成雯譚小璐丁卓群熊丹潔徐翔明鑒張明彪洪森於莎莎尹金林程時叢趙雲飛

感謝電子工業齣版社的張迪編輯，感謝她在我的寫作中提供的支持，也正因為她的認真與高效這本書纔能如此迅速地與大傢見麵。

感謝騰訊公司的微信小程序團隊，是他們創造瞭這樣一款優秀的産品。

謹以此書獻給我的傢人，以及愛我和我愛的朋友們。

好好好

可以當工具書用....

非常不錯的購物體驗，速度很快，賣傢服務態度很贊，一直都在使用京東，沒彆的！！！

送貨速度快，學習無止境

書山有路勤為徑，學海無涯苦作舟

非常不錯的購物體驗，速度很快，賣傢服務態度很贊，一直都在使用京東，沒彆的！！！

不錯

21天精通微信小程序開發很實用！

我的發票呢？？？？？？？？？