編輯推薦
?真正零基礎
無需HTML、CSS、JavaScript等技術基礎,即可跟隨本書學習。保證讓你在學會小程序開發的同時,前端開發技能也達到中等水平。
?增一分太長,減一分太短
本書力求覆蓋開發所需的全部知識點,保證夠用又杜絕浪費,杜絕介紹不重要的內容湊頁數,以免耽誤讀者時間。
?講明白,多練習
技術的意義是讓事情簡單化,而不是造齣一堆晦澀的名詞讓人睏惑。對於CSS或JavaScript的個彆難點(如flex布局、閉包等),皆以通俗語言重點說明,保證“一看就懂”。在介紹知識點的時候,沒有通篇的概念原理,隻有簡明扼要的說明和易懂的示例,做到“通俗易懂,即能上手”。
?少些主義,多些乾貨
本書是麵嚮開發者的,不對小程序的運營及商業發展進行過多討論,而是竭作者之所能,為讀者奉上滿滿的技術乾貨,提供兩個翔實的實戰案例:實時公交小程序和電商平颱小程序。
內容簡介
“一條主綫”,以小程序開發框架為主綫。第1~3章從小程序概述及開發流程講起,介紹瞭小程序開發框架的基礎知識,並使其貫穿全書。
“兩個重點”,以框架中的視圖層和邏輯層為重點。第4~6章從頁麵的組件、CSS樣式及布局共三個層麵講解如何開發小程序頁麵。第7~8章從基礎的JavaScript語法到小程序API接口,深入淺齣地介紹瞭代碼邏輯的實現。
“兩個案例”,以實時公交和電商平颱綜閤案例結尾。第9~10章對前麵的知識進行瞭迴顧和實踐,並簡單介紹瞭程序設計和開發的思路。
本書麵嚮零基礎的微信小程序愛好者、有一定基礎的前端工程師以及計算機相關專業的學生。
目錄
第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對大小寫敏感,書寫規則由兩部分構成:選擇器+聲明,如圖5��1所示。
圖5��1WXSS的書寫規則
�r選擇器:要使某個樣式應用於特定的頁麵元素,首先要找到該元素,負責達成這一任務的規則稱為選擇器,詳見第5.2節。
�r聲明:用於設定樣式屬性值,在英文大括號{}中的就是聲明,屬性和值之間用英文冒號:分隔。當有多條聲明時,中間可以用英文分號;分隔。◆微信小程序入門第◆5章頁麵樣式下麵的示例中的p就是選擇器,聲明中設置瞭color和text�瞐lign兩個屬性值,如下所示:p{
color:red;
text-align:center;
}
3.注釋
CSS注釋以/*開始,以*/結束,示例如下:/�澄募�頭注釋,適用於文件頭部
�砤uthor:Jason.Lee
�砫es:頁麵基礎樣式
�砫ate: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文件中。
示例代碼如下:/�唱砤pp.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可以通過
……
前言/序言
用“小而美”形容微信小程序再閤適不過瞭:微信小程序是一個輕量級的前端技術,對代碼體積、頁麵層級都有明確限製,是為“小”;同時,其語法簡潔、框架優雅、用戶體驗流暢,是為“美”。
我們正處在一個知識爆炸的時代,錶麵上獲取信息的成本越來越低,百度、知乎、分答等,都可以幫助人們方便快捷地獲取信息,但構建知識體係的成本卻在增大。有效“信號”增加的同時,“噪音”增加得更多,人們不得不花費大量精力去僞存真。本書並不創造新知識,隻是把作者的多年實踐經驗結閤微信小程序梳理成冊,分享給讀者。希望這是一本有用的書,是一本節約讀者時間的書,希望能夠和讀者一起見證小程序的成長,一起領略“小而美”。
本書涵蓋瞭小程序開發所需要的全部內容,內容翔實,通俗易懂,不僅適閤有一定基礎的讀者,也適閤零基礎的讀者。
本書首先介紹瞭小程序是什麼,為何而生,有什麼特性,隨後討論瞭小程序的開發過程及開發框架。在此基礎上,對開發框架所涉及的視圖層及邏輯層分彆展開介紹。頁麵組件、頁麵樣式及頁麵布局,共同構成瞭視圖層三部麯,掌握瞭這些就掌握瞭頁麵開發方法。隨後,對框架的邏輯層所涉及的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月◆微信小程序入門
微信小程序入門 下載 mobi epub pdf txt 電子書