《微信小程式：開發入門及案例詳解》—— 導讀

     自2016年9月21日微信小程式公布以來，微信技術群中關于小程式的讨論就沒間斷過，這是又一次創業的好機會，尤其是對中小企業擴大網絡影響力很有利。我們在抓緊時間學習小程式的過程中，總結并實踐了小程式的功能，并希望通過這本書傳達給廣大的讀者。我們在編寫過程中正臨電商行業中最忙的幾個月，雙11、雙12、聖誕節、元旦節等需求已經堆疊如山，我和邊思白天處理公司需求，晚上編寫書籍，幾乎沒有周末，這樣堅持了幾個月終于完成本書，直至交稿時才如釋重負。

     小程式剛釋出不久，很多功能都還在不斷更新中，本書内容在官方文檔基礎上進行補充說明，并給出實踐案例，嘗試給出現階段盡可能完善的開發模式，适合小程式初學者入門。在小程式的學習過程中，我們做過很多嘗試，這裡我們僅僅提出了自己的一些實作方案和觀點供大家參考。小程式整體推動還需要更多開發者參與，小程式還未正式公布前，便有很多公司及個人針對小程式研發過程中的痛點推出了各類三方架構，希望閱讀本書後，大家也能提出自己的想法，積極參與小程式相關話題讨論，推動小程式研發方案優化與普及。

     本書内容大緻可分為三部分。

     第一部分為基礎部分，共3章，主要介紹小程式開發的基礎知識。

     第1章介紹微信小程式環境搭建、運作第一個小程式demo。

     第2章介紹小程式核心知識，包括整體架構運作原理、規則，每個檔案的作用，以及wxml與wxss。

     第3章介紹css布局基礎，講解了盒子模型、浮動、定位以及flex布局。

     第二部分為元件和api，共2章，主要講解小程式元件、api相關知識。

     第4章介紹小程式元件相關知識，主要内容包括視圖容器、基礎元件、表單元件、導航、媒體元件、地圖、畫布等。

     第5章介紹小程式api相關知識，主要内容包括網絡、媒體、檔案、資料緩存、位置、裝置、界面、開放接口等。

     第三部分為案例實踐，共5章，通過實際案例介紹如何開發小程式應用，包括一些思路和架構，以及部分代碼和實作技巧。

     第6章介紹如何開發豆瓣電影小程式，主要講解一個最簡單小程式的代碼結構。

     第7章介紹如何開發駕考小程式，主要講解如何利用第三方api建立小程式引用。

     第8章介紹如何開發打賞小程式，主要講解小程式支付流程。

     第9章介紹如何開發日程表小程式。

     第10章介紹如何開發多點商城，主要講解如何架構一個複雜小程式項目。本書創作時間較短，如有疏漏，懇請各位讀者斧正。

     在這裡感謝那些一直支援我們的人，感謝韓鑫、楊凱等公司上司對本書寫作的支援，讓我能空出時間投入到書籍編寫，感謝吳怡編輯的辛勤工作，感謝龍偉湖對本書案例ui設計的友情支援，感謝楊帆、王慶平、許彬、張磊、範彩霞等同僚在工作期間對我的各種支援，感謝羅東、楊小英等同僚在這段時間為我分擔工作，謝謝大家，正是因為你們的支援，才有了本書的面世。

     最後特别感謝我的夫妻張舒，一直相信我、支援我，一直為我默默付出，讓我能全身心投入到工作中。

前　言

<a href="https://yq.aliyun.com/articles/90195">第1章　初識小程式</a>

<a href="https://yq.aliyun.com/articles/90195">1.1　簡介</a>

<a href="https://yq.aliyun.com/articles/90202">1.2　接入流程</a>

1.2.1　注冊小程式帳号

1.2.2　開發環境準備

<a href="https://yq.aliyun.com/articles/90222">1.3　第一個小程式</a>

<a href="https://yq.aliyun.com/articles/90228">1.4　小結</a>

<a href="https://yq.aliyun.com/articles/90236">第2章　小程式開發核心</a>

<a href="https://yq.aliyun.com/articles/90236">2.1　簡介</a>

<a href="https://yq.aliyun.com/articles/90257">2.2　“徒手”建立小程式</a>

<a href="https://yq.aliyun.com/articles/90310">2.3　架構主體檔案</a>

2.3.1　配置檔案（app.json）

2.3.2　小程式邏輯（app.js）

2.3.3　全局樣式（app.wxss）

<a href="https://yq.aliyun.com/articles/90405">2.4　架構頁面檔案</a>

2.4.1　頁面配置檔案

2.4.2　頁面邏輯檔案（javascript）

2.4.3　頁面結構檔案（wxml）

2.4.4　頁面樣式檔案（wxss）

<a href="https://yq.aliyun.com/articles/90419">2.5　子產品化</a>

2.5.1　子產品化簡介

2.5.2　檔案作用域

2.5.3　子產品的使用

2.5.4　其他

<a href="https://yq.aliyun.com/articles/90422">2.6　小結</a>

<a href="https://yq.aliyun.com/articles/90454">第3章　布局</a>

<a href="https://yq.aliyun.com/articles/90454">3.1　基本知識</a>

3.1.1　盒子模型

3.1.2　塊級元素

3.1.3　行内元素

3.1.4　行内塊元素

<a href="https://yq.aliyun.com/articles/90464">3.2　浮動和定位</a>

3.2.1　浮動

3.2.2　定位

<a href="https://yq.aliyun.com/articles/90476">3.3　flex布局</a>

3.3.1　基本概念

3.3.2　容器屬性

3.3.3　項目屬性

<a href="https://yq.aliyun.com/articles/90477">3.4　小結</a>

第4章　元件

4.1　元件定義及屬性

4.2　視圖容器

4.2.1　view元件

4.2.2　scroll-view元件

4.2.3　滑塊視圖元件

4.3　基礎元件

4.3.1　icon

4.3.2　text元件

4.3.3　progress元件

4.4　表單元件

4.4.1　radio元件

4.4.2　checkbox元件

4.4.3　switch元件

4.4.4　label元件

4.4.5　slider元件

4.4.6　picker元件

4.4.7　picker-view元件

4.4.8　input元件

4.4.9　textarea元件

4.4.10　button元件

4.4.11　form元件

4.5　導航元件

4.6　媒體元件

4.6.1　image

4.6.2　audio

4.6.3　video

4.7　地圖元件

4.8　畫布元件

4.9　客服會話

4.10　小結

第5章　api

5.1　網絡

5.1.1　發起https請求

5.1.2　上傳、下載下傳

5.1.3　websocket

5.2　媒體

5.2.1　圖檔

5.2.2　錄音

5.2.3　音頻播放控制

5.2.4　音樂播放控制

5.2.5　音頻元件控制

5.2.6　視訊

5.2.7　視訊元件控制

5.3　檔案

5.4　資料緩存

5.4.1　儲存資料

5.4.2　擷取資料

5.4.3　擷取本地資料資訊

5.4.4　删除資料

5.4.5　清空資料

5.5　位置

5.5.1　擷取位置

5.5.2　選擇位置

5.5.3　檢視位置

5.5.4　地圖元件控制

5.6　裝置

5.6.1　系統資訊

5.6.2　網絡狀态

5.6.3　重力感應

5.6.4　羅盤

5.6.5　撥打電話

5.6.6　掃碼

5.7　界面

5.7.1　互動回報

5.7.2　設定導覽列

5.7.3　導航

5.7.4　動畫

5.7.5　繪圖

5.7.6　下拉重新整理

5.8　開放接口

5.8.1　登入

5.8.2　使用者資訊

5.8.3　微信支付

5.8.4　模闆消息

5.8.5　客服消息

5.8.6　分享

5.8.7　擷取二維碼

5.9　小結

第6章　案例分析——豆瓣電影

6.1　準備工作

6.1.1　豆瓣api

6.1.2　跳轉層

6.2　技術架構

6.3　公共子產品開發

6.3.1　業務邏輯層

6.3.2　公共子產品

6.4　頁面建構

6.4.1　首頁

6.4.2　詳情頁

6.5　頁面邏輯開發

6.5.1　首頁

6.5.2　詳情頁

6.6　小結

第7章　案例分析——駕考

7.1　業務流程

7.2　項目架構

7.2.1　功能點分析

7.2.2　項目結構圖

7.2.3　資料接口

7.3　代碼分析

7.3.1　小程式底層代碼封裝

7.3.2　首頁

7.3.3　答題頁

7.3.4　答題結果頁

7.4　小結

第8章　案例分析——打賞

8.1　登入

8.1.1　登入流程

8.1.2　源碼講解

8.2　支付

8.3　小結

第9章　案例分析——日程表

9.1　業務流程

9.2　項目架構

9.2.1　功能點分析

9.2.2　項目結構圖

9.3　代碼分析

9.3.1　日程詳情頁

9.3.2　首頁

9.3.3　日程管理頁

9.4　小結

第10章　案例分析——多點商城

10.1　需求分析

10.2　技術架構

10.2.1　主界面架構

10.2.2　業務邏輯層

10.2.3　代理網絡請求接口

10.2.4　本地模拟接口資料

10.2.5　widgets

10.2.6　全局樣式控制

10.3　頁面實作

10.3.1　主界面實作

10.3.2　首頁與活動頁

10.3.3　分類頁與搜尋頁

10.3.4　支付流程

10.3.5　其他頁面

10.4　小結