“一條主線”,以小程序開發框架為主線。第1~3章從小程序概述及開發流程講起,介紹了小程序開發框架的基礎知識,并使其貫穿全書。
“兩個重點”,以框架中的視圖層和邏輯層為重點。第4~6章從頁面的組件、CSS樣式及布局共三個層面講解如何開發小程序頁面。第7~8章從基礎的JavaScript語法到小程序API接口,深入淺出地介紹了代碼邏輯的實現。
“兩個案例”,以實時公交和電商平臺綜合案例結尾。第9~10章對前面的知識進行了回顧和實踐,并簡單介紹了程序設計和開發的思路。
本書面向零基礎的微信小程序愛好者、有一定基礎的前端工程師以及計算機相關專業的學生。
?真正零基礎
無需HTML、CSS、JavaScript等技術基礎,即可跟隨本書學習。保證讓你在學會小程序開發的同時,前端開發技能也達到中等水平。
?增一分太長,減一分太短
本書力求覆蓋開發所需的全部知識點,保證夠用又杜絕浪費,杜絕介紹不重要的內容湊頁數,以免耽誤讀者時間。
?講明白,多練習
技術的意義是讓事情簡單化,而不是造出一堆晦澀的名詞讓人困惑。對于CSS或JavaScript的個別難點(如flex布局、閉包等),皆以通俗語言重點說明,保證“一看就懂”。在介紹知識點的時候,沒有通篇的概念原理,只有簡明扼要的說明和易懂的示例,做到“通俗易懂,即能上手”。
?少些主義,多些干貨
本書是面向開發者的,不對小程序的運營及商業發展進行過多討論,而是竭作者之所能,為讀者奉上滿滿的技術干貨,提供兩個翔實的實戰案例:實時公交小程序和電商平臺小程序。
用“小而美”形容微信小程序再合適不過了:微信小程序是一個輕量級的前端技術,對代碼體積、頁面層級都有明確限制,是為“小”;同時,其語法簡潔、框架優雅、用戶體驗流暢,是為“美”。
我們正處在一個知識爆炸的時代,表面上獲取信息的成本越來越低,百度、知乎、分答等,都可以幫助人們方便快捷地獲取信息,但構建知識體系的成本卻在增大。有效“信號”增加的同時,“噪音”增加得更多,人們不得不花費大量精力去偽存真。本書并不創造新知識,只是把作者的多年實踐經驗結合微信小程序梳理成冊,分享給讀者。希望這是一本有用的書,是一本節約讀者時間的書,希望能夠和讀者一起見證小程序的成長,一起領略“小而美”。
本書涵蓋了小程序開發所需要的全部內容,內容翔實,通俗易懂,不僅適合有一定基礎的讀者,也適合零基礎的讀者。
本書首先介紹了小程序是什么,為何而生,有什么特性,隨后討論了小程序的開發過程及開發框架。在此基礎上,對開發框架所涉及的視圖層及邏輯層分別展開介紹。頁面組件、頁面樣式及頁面布局,共同構成了視圖層三部曲,掌握了這些就掌握了頁面開發方法。隨后,對框架的邏輯層所涉及的JavaScript語言以及微信小程序所提供的接口進行詳細介紹。最后,以兩個綜合案例,對前面的內容進行實踐和回顧。
本書共10章,各章內容簡介如下。
第1章介紹了小程序是什么、如何使用、有何特性,并從業務和技術角度分別與公眾號和App、H5進行對比,并對讀者比較關心的常見問題進行解答。
第2章介紹了小程序的開發流程,注冊、完善信息、開發和上架,并對開發工具的使用進行重點介紹,讓讀者快速建立自己的第一個小程序。
第3章介紹了小程序開發框架,包括項目結構、配置文件、邏輯層、視圖層,這些是小程序開發的基礎,其中涉及微信自創的WXML及WXSS。第4章介紹了頁面組件,詳細介紹了從容器組件到內容組件、表單、導航、媒體組件、地圖組件及客服組件的使用方法。
第5章介紹了頁面樣式,以CSS為線索介紹了WXSS的定義方法、選擇器、基礎樣式定義及動態樣式定義,并對CSS與WXSS的差異點加以說明。
第6章介紹了頁面的布局,其內容基于第4、5章,也是界面開發的重點及難點,書中對傳統頁面布局及當下流行的flex布局進行了詳細介紹,最后對常見App的典型布局加以實戰。
第7章介紹了JavaScript的基礎知識,除了最基礎的語法知識外,對較難理解的立即執行函數、閉包、原型、繼承都進行了透徹的講解,初學者只要認真閱讀,也一定能夠理解,最后補充了最新JavaScript規范ES6的主要用法。
第8章介紹了微信小程序API接口,有了JavaScript基礎就可以使用微信特有的接口,文中介紹了網絡操作、媒體操作、數據緩存、位置操作,還有與設備相關的操作,以及微信用戶授權、模板消息、微信支付等接口的使用方法。
第9章以實時公交為例,介紹了小程序開發過程中的需求分析、視圖層設計、邏輯層設計以及程序開發等步驟,并簡單介紹了小程序設計和開發的思路。
第10章以更為實用的電商平臺為例,介紹了一個界面種類較多、操作較豐富的小程序應用的實現過程,并對實現中的頁面細節進行了詳細介紹。
本書由互聯網老兵厲業崧、哈爾濱工程大學的王向輝老師、黑龍江大學的楊國燕老師負責主要編寫工作。其中,厲業崧編寫第1~3及6~7章,王向輝編寫第4~5章,楊國燕編寫第8~10章。同時參與本書編寫工作的還有彭永成、楊春艷,在這里對他們的辛苦工作表示衷心感謝。
為了完成本書,我經常加班到深夜,在此要感謝我的家人對我的理解和支持,我愛他們。
厲業崧
2017年8月◆微信小程序入門
第1章認識小程序1
1.1概述1
1.1.1小程序是什么1
1.1.2小程序的使命1
1.2打開小程序2
1.2.1二維碼2
1.2.2微信搜索2
1.2.3微信公眾號2
1.2.4微信會話窗口3
1.2.5附近的小程序4
1.2.6歷史記錄5
1.3小程序特性6
1.3.1改進6
1.3.2對比6
1.3.3工具8
1.4常見問題9
第2章開發過程11
2.1注冊11
2.2完善信息13
2.3開發14
2.3.1準備環境14
2.3.2掃碼啟動14
2.3.3第一個小程序17
2.3.4編輯視圖18
2.3.5調試視圖19
2.3.6項目視圖24◆微信小程序入門目錄2.4審核上架25
第3章開發基礎26
3.1概述26
3.2結構28
3.3配置29
3.3.1應用級配置29
3.3.2頁面級配置33
3.4邏輯層33
3.4.1應用級注冊34
3.4.2頁面級注冊36
3.4.3頁面路由40
3.4.4模塊化41
3.4.5生命周期43
3.5視圖層43
3.5.1數據綁定43
3.5.2條件渲染48
3.5.3循環渲染49
3.5.4模板52
3.5.5事件54
3.5.6引用58
第4章頁面組件60
4.1概述60
4.2視圖容器61
4.2.1基礎容器61
4.2.2滾動容器63
4.2.3滑動塊容器67
4.3基礎內容70
4.3.1圖標組件70
4.3.2文本組件73
4.3.3進度條組件75
4.4表單組件78
4.4.1按鈕組件78
4.4.2復選框組件81
4.4.3輸入框組件84
4.4.4標簽組件88
4.4.5選擇器組件92
4.4.6單選框組件96
4.4.7滑動選擇器組件98
4.4.8開關組件100
4.4.9多行輸入框組件102
4.4.10表單組件105
4.5導航109
4.6媒體組件111
4.6.1音頻組件111
4.6.2圖片組件114
4.6.3視頻組件118
4.7地圖組件122
4.8客服會話126
第5章頁面樣式128
5.1WXSS概述128
5.1.1定義樣式128
5.1.2使用樣式129
5.1.3優先原則130
5.2選擇器131
5.2.1分類131
5.2.2權重134
5.3基礎樣式135
5.3.1文本135
5.3.2背景137
5.3.3輪廓139
5.3.4內容生成140
5.4樣式值140
5.4.1長度值140
5.4.2顏色值141
5.5動態樣式142
第6章頁面布局143
6.1元素類別143
6.1.1塊級元素143
6.1.2內聯元素143
6.1.3內聯塊級144
6.2box模型144
6.2.1基礎概念144
6.2.2基礎樣式145
6.2.3圓角矩形152
6.2.4盒子陰影154
6.2.5代碼縮寫155
6.3傳統布局156
6.3.1概述156
6.3.2flow布局157
6.3.3float布局157
6.3.4layer布局158
6.4flex布局162
6.4.1概述162
6.4.2基礎概念163
6.4.3相關屬性163
6.4.4伸縮規則166
6.5布局實戰168
6.5.1導航欄169
6.5.2宮格式169
6.5.3列表式170
6.5.4轉盤式172
6.5.5多面板174
6.5.6標簽177
第7章JavaScript基礎179
7.1概述179
7.1.1概念179
7.1.2運行181
7.1.3調試182
7.2語法183
7.2.1結構183
7.2.2變量184
7.2.3數據類型185
7.2.4表達式和運算符187
7.2.5語句191
7.2.6JSON195
7.3函數196
7.3.1定義196
7.3.2調用197
7.3.3參數200
7.3.4函數類型201
7.3.5立即執行函數202
7.3.6閉包206
7.4面向對象207
7.4.1基礎概念207
7.4.2創建對象211
7.4.3實現繼承215
7.5ES6核心221
7.5.1變量相關221
7.5.2類和繼承222
7.5.3箭頭函數223
7.5.4字符串模板224
第5章Chapter5
頁面樣式5.1WXSS概述
CSS(CascadingStyleSheets)是一套樣式語言,用于描述HTML組件的樣式,決定HTML組件如何顯示。微信小程序的WXSS(WeiXinStyleSheets)也是一套樣式語言,用于描述小程序的組件樣式,決定小程序組件如何顯示。WXSS在很大程度上借鑒了CSS的語法。
WXSS保留了絕大部分CSS的特性,小程序官方并未給出專門文檔。本章以CSS為主線展開,以介紹原理為主,不涉及過多細節,實踐中可以通過查閱CSS手冊掌握細節。同時,對WXSS與CSS的區別進行重點說明。
5.1.1定義樣式〖*2〗1.角色在微信小程序中,WXML負責頁面結構(類似HTML),WXSS負責頁面樣式和布局(類似CSS),而JavaScript負責頁面交互及邏輯實現。WXSS在小程序中扮演的角色和CSS在前端開發中的角色類似。
2.語法
WXSS對大小寫敏感,書寫規則由兩部分構成:選擇器+聲明,如圖51所示。
圖51WXSS的書寫規則
選擇器:要使某個樣式應用于特定的頁面元素,首先要找到該元素,負責達成這一任務的規則稱為選擇器,詳見第5.2節。
聲明:用于設定樣式屬性值,在英文大括號{}中的就是聲明,屬性和值之間用英文冒號:分隔。當有多條聲明時,中間可以用英文分號;分隔。◆微信小程序入門第◆5章頁面樣式下面的示例中的p就是選擇器,聲明中設置了color和textalign兩個屬性值,如下所示:p{
color:red;
text-align:center;
}
3.注釋
CSS注釋以/*開始,以*/結束,示例如下:/文件頭注釋,適用于文件頭部
author:Jason.Lee
des:頁面基礎樣式
date:2017-5-1
/
/
多行注釋,適用于某個模塊
這是第二行
/
p{
text-align:center;/單行注釋,適用于要點說明/
color:black;
font-family:arial;
}
5.1.2使用樣式〖*2〗1.內聯樣式頁面中可使用style直接設定組件的樣式,示例如下。雖然語法支持,但開發中應盡量避免這種將靜態樣式寫入style的操作,以免影響渲染速度。內聯樣式常用于設置動態樣式,詳見第5.5節。我是內容
2.外部樣式
最為常用的做法是將樣式獨立定義在WXSS文件中,然后引入WXSS文件。下面的示例將外部樣式定義在app.wxss文件中。
示例代碼如下:/app.wxss/
page{
background-color:#fbf9fe;
height:100%;
}
在使用WXSS的樣式時,有以下兩種引用方式。
(1)自動引用
小程序定義了自己的工程結構及文件關聯規則,符合要求的WXSS文件會自動引入。定義在app.wxss中的樣式為全局樣式,作用于每一個頁面。在page的wxss文件中定義的樣式為局部樣式,只作用在對應的頁面,并且會覆蓋app.wxss中相同的選擇器。
(2)import引用
使用import命令可以將一個WXSS文件引入到另一個WXSS文件中。@import后連接需要導入的外聯樣式表的相對路徑,用;表示語句結束。
示例代碼如下:/被使用者:common.wxss/
.small-p{
padding:5px;
}
/使用者:app.wxss/
@import"common.wxss";
.middle-p{
padding:15px;
}
3.嵌入樣式
在Web網頁開發中,CSS可以通過
……