微信小程序開發(fā)案例教程（慕課版）

C

M

Y

CM

MY

CY

CMY

K

微信小程序.indd12019-8-2216:35:44

內(nèi)容簡(jiǎn)介

微信小程序因其應(yīng)用方便、快捷和功能強(qiáng)大，用戶數(shù)量不斷增加，而受到越來越多高校師生

的關(guān)注，很多高校都開設(shè)了或者正在開設(shè)“微信小程序開發(fā)”相關(guān)的課程。但目前市場(chǎng)上與微信

小程序開發(fā)有關(guān)的書籍要么是針對(duì)項(xiàng)目開發(fā)，要么是照搬官方文檔，大都不太適合用作教材。

編者根據(jù)教學(xué)需要，打破了官方文檔的講解次序，設(shè)計(jì)了61個(gè)教學(xué)案例，每個(gè)案例都經(jīng)過了

測(cè)試和驗(yàn)證，按照案例描述→實(shí)現(xiàn)效果→案例實(shí)現(xiàn)→相關(guān)知識(shí)→總結(jié)與思考的步驟進(jìn)行講解，遵

循學(xué)生的認(rèn)知規(guī)律，做到由淺入深、由特殊到一般，使讀者輕松掌握微信小程序開發(fā)的方法和技

巧。全書共分8章，內(nèi)容包括：初識(shí)微信小程序、小程序編程基礎(chǔ)、小程序框架、小程序組件、

小程序API、云開發(fā)等內(nèi)容，最后講解了2個(gè)綜合案例以及代碼管理的知識(shí)。此外，與本書配套的

MOOC課程已經(jīng)在中國(guó)大學(xué)MOOC平臺(tái)（）正式上線。書中所有案例均配有微

視頻，讀者掃描案例旁邊的二維碼即可觀看。

本書適合作為高等院?！拔⑿判〕绦蜷_發(fā)”相關(guān)課程的教材，也可作為微信小程序開發(fā)愛好

者的入門參考書。

圖書在版編目（CIP）數(shù)據(jù)

微信小程序開發(fā)案例教程：慕課版/杜春濤主編.—

北京：中國(guó)鐵道出版社有限公司，2019.9

普通高等院校計(jì)算機(jī)基礎(chǔ)教育“十三五”規(guī)劃教材

ISBN978-7-113-25940-2

Ⅰ.①微…Ⅱ.①杜…Ⅲ.①移動(dòng)終端－應(yīng)用程序－

程序設(shè)計(jì)－高等學(xué)校－教材Ⅳ.①TN929.53

中國(guó)版本圖書館CIP數(shù)據(jù)核字(2019)第173075號(hào)

書名：微信小程序開發(fā)案例教程（慕課版）

作者：杜春濤

責(zé)任編輯：賈?星編輯部電話2006

封面設(shè)計(jì)：徐文海

封面制作：劉穎

責(zé)任校對(duì)：張玉華

責(zé)任印制：郭向偉

出版發(fā)行：中國(guó)鐵道出版社有限公司（100054，北京市西城區(qū)右安門西街8號(hào)）

網(wǎng)址：/51eds/

印刷：三河市興博印務(wù)有限公司

版次：2019年9月第1版?2019年9月第1次印刷

開本：787mm×1092mm1/16印張：19.25字?jǐn)?shù)：468千

書號(hào)：ISBN978-7-113-25940-2

定價(jià)：59.80元

版權(quán)所有侵權(quán)必究

凡購(gòu)買鐵道版圖書，如有印制質(zhì)量問題，請(qǐng)與本社教材圖書營(yíng)銷部聯(lián)系調(diào)換。電話：（010）63550836

打擊盜版舉報(bào)電話：（010）51873659

微信小程序.indd22019-8-2215:53:52

前言

PREFACE

微信小程序自2017年1月9正式上線以來就引起廣泛關(guān)注。微信創(chuàng)始人張小龍說：

“小程序是一種不需要下載安裝就可以使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用‘觸手可及’的夢(mèng)想，

用戶掃一掃或搜一下即可打開應(yīng)用。這也體現(xiàn)了‘用完即走’的理念，用戶不用關(guān)心

是否安裝太多應(yīng)用的問題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)須安裝下載”。

本書在內(nèi)容設(shè)計(jì)方面本著簡(jiǎn)單易學(xué)、有用有趣的教學(xué)理念，遵循人的認(rèn)知規(guī)律，采

用案例方式介紹小程序開發(fā)的方法和技巧。每個(gè)案例通過：案例描述→實(shí)現(xiàn)效果→案例

實(shí)現(xiàn)→相關(guān)知識(shí)→總結(jié)與思考的步驟進(jìn)行講解。案例描述介紹要做一個(gè)什么樣的案例，

該案例具有哪些功能；實(shí)現(xiàn)效果給出了該案例實(shí)現(xiàn)后的運(yùn)行效果，讓讀者對(duì)該案例有一

個(gè)明確的感性認(rèn)識(shí)；案例實(shí)現(xiàn)是通過編寫代碼具體實(shí)現(xiàn)該案例；相關(guān)知識(shí)介紹了該案例

用到了哪些小程序開發(fā)的知識(shí)要點(diǎn)，并對(duì)這些知識(shí)要點(diǎn)進(jìn)行講解；總結(jié)與思考是對(duì)該案

例所涉及的知識(shí)點(diǎn)進(jìn)行總結(jié)，并針對(duì)該案例提出一些思考的問題，進(jìn)一步升華對(duì)該案例

的理解。

本書打破了官方文檔介紹小程序開發(fā)的順序，而是根據(jù)怎樣讓學(xué)習(xí)者一開始就能夠

對(duì)小程序產(chǎn)生興趣、能夠讓初學(xué)者循序漸進(jìn)地學(xué)習(xí)和掌握小程序開發(fā)方法來設(shè)計(jì)每一

個(gè)案例。

本書共分8章，設(shè)計(jì)了61個(gè)教學(xué)案例。

第1章：初識(shí)微信小程序。首先介紹了注冊(cè)小程序賬號(hào)、查看小程序AppID、設(shè)

置小程序信息、下載并安裝小程序開發(fā)環(huán)境以及創(chuàng)建和打開小程序的方法，最后通過1

個(gè)案例演示了小程序開發(fā)的過程和方法。

.I

微信小程序.indd12019-8-2115:53:21

第2章：小程序編程基礎(chǔ)。設(shè)計(jì)了14個(gè)案例，演示了小程序開發(fā)的基礎(chǔ)知識(shí)，包

括HTML、CSS和JavaScript中的基礎(chǔ)知識(shí)，為小程序開發(fā)奠定基礎(chǔ)。

第3章：小程序框架。設(shè)計(jì)了10個(gè)案例，演示了小程序的基本架構(gòu)、執(zhí)行順序、

數(shù)據(jù)及事件綁定、模塊化、條件渲染、列表渲染、模板以及引用文件等知識(shí)。

第4章：小程序組件。設(shè)計(jì)了10個(gè)案例，演示了小程序組件的各種功能和使用方

法。使用的組件包括：視圖容器、基礎(chǔ)內(nèi)容、表單組件、導(dǎo)航組件、媒體組件、地圖、

畫布等內(nèi)容。

第5章：小程序API。設(shè)計(jì)了20個(gè)案例，演示了小程序API函數(shù)的各種功能和使

用方法。使用的API函數(shù)包括：系統(tǒng)信息、定時(shí)器、路由、界面、數(shù)據(jù)緩存、媒體、位置、

畫布、文件等內(nèi)容。

第6章：云開發(fā)。設(shè)計(jì)了4個(gè)案例，演示了小程序云開發(fā)的方法和技巧，包括：

獲取OpenID、文件上傳下載、數(shù)據(jù)庫(kù)操作、云函數(shù)應(yīng)用等內(nèi)容。

第7章：綜合案例。設(shè)計(jì)了2個(gè)綜合案例：計(jì)算器和支付寶九宮格導(dǎo)航界面設(shè)計(jì)，

演示了小程序綜合案例的設(shè)計(jì)方法和技巧。

第8章：代碼管理。介紹了版本控制的概念、Git分布式版本控制系統(tǒng)和常用的

Git命令、微信開發(fā)者?代碼管理平臺(tái)以及啟用開發(fā)者工具中的“版本管理”服務(wù)進(jìn)

行多人協(xié)作開發(fā)時(shí)的代碼管理的方法。

本書采用MOOC+微課的模式，所有內(nèi)容都已經(jīng)在“中國(guó)大學(xué)MOOC”平臺(tái)上線

運(yùn)行，讀者也可以直接掃描書中的二維碼觀看每個(gè)案例的詳細(xì)講解視頻。本書由杜春濤

任主編，編寫了第1～5章和第7章；付瑞平任副主編，編寫了第6章和第8章。本書

在編寫過程中得到了北方工業(yè)大學(xué)馬禮教授、王景中教授、劉文楷教授、宋威教授、

王若賓副教授、尹天光老師、肖彬老師、程楠楠老師、王丹同學(xué)、徐鴻鐸同學(xué)、中國(guó)

鐵道出版社有限公司周欣主任的大力支持和幫助，在此表示衷心感謝。

限于編者水平，加之時(shí)間倉(cāng)促，書中難免存在疏漏和不足之處，懇請(qǐng)各位專家、老

師、學(xué)者和廣大讀者批評(píng)指正。

本書受2018年（第一批）教育部產(chǎn)學(xué)合作協(xié)同育人項(xiàng)目（騰訊微信事業(yè)群支持，

項(xiàng)目編號(hào)：201801002005）、2018年全國(guó)高等院校計(jì)算機(jī)基礎(chǔ)教育研究會(huì)計(jì)算機(jī)基礎(chǔ)教

育教學(xué)研究項(xiàng)目（資助專項(xiàng)類，項(xiàng)目編號(hào)：2018-AFCEC-048，2018-AFCEC-049）、

2019年全國(guó)高等院校計(jì)算機(jī)基礎(chǔ)教育研究會(huì)計(jì)算機(jī)基礎(chǔ)教育教學(xué)研究項(xiàng)目（資助專項(xiàng)類，

項(xiàng)目編號(hào)：2019-AFCEC-001）、2019年北方工業(yè)大學(xué)教育教學(xué)改革一般項(xiàng)目（項(xiàng)目

名稱：基于新建構(gòu)主義學(xué)習(xí)理論的MOOC教學(xué)研究）、2019年北方工業(yè)大學(xué)教材出

版基金等項(xiàng)目支持。

編?者

2019年6月

II.

微信小程序.indd22019-8-2115:53:21

目錄

第1章初識(shí)微信小程序1

1.1注冊(cè)小程序賬號(hào)／2

1.2查看小程序的AppID／3

1.3設(shè)置小程序信息／4

1.4下載并安裝小程序開發(fā)者工具／4

1.5創(chuàng)建和打開小程序／5

1.6第一個(gè)微信小程序／7

第2章小程序編程基礎(chǔ)／9

案例2.1字體樣式設(shè)置／10

案例2.2文本樣式設(shè)置／12

案例2.3圖片與聲音／14

案例2.4盒模型／16

案例2.5flex彈性盒模型布局／19

案例2.6導(dǎo)航與布局／22

案例2.7float頁(yè)面布局／25

案例2.8攝氏溫度轉(zhuǎn)華氏溫度／28

案例2.9條件語(yǔ)句和數(shù)學(xué)函數(shù)／31

案例2.10成績(jī)計(jì)算器／35

案例2.11循環(huán)求和計(jì)算器／39

.I

微信小程序.indd12019-8-2115:53:21

微信小程序開發(fā)案例教程（慕課版）

案例2.12隨機(jī)數(shù)求和／43

案例2.13計(jì)時(shí)器／47

案例2.14自動(dòng)隨機(jī)變化的三色旗／50

第3章小程序框架／54

案例3.1小程序的基本架構(gòu)／55

案例3.2小程序的執(zhí)行順序／60

案例3.3數(shù)據(jù)及事件綁定／65

案例3.4變量和函數(shù)的作用域及模塊化／68

案例3.5條件渲染／71

案例3.6成績(jī)等級(jí)計(jì)算器／73

案例3.7列表渲染／75

案例3.8九九乘法表／78

案例3.9模板的定義及引用／80

案例3.10利用include引用文件／82

第4章小程序組件／85

案例4.1貨幣兌換／86

案例4.2三角形面積計(jì)算器／89

案例4.3設(shè)置字體樣式和大?。?3

案例4.4滑動(dòng)條和顏色／96

案例4.5輪播圖和開關(guān)選擇器／99

案例4.6個(gè)人信息填寫／103

案例4.7圖片顯示模式／109

案例4.8音頻演示／112

案例4.9視頻演示／115

案例4.10考試場(chǎng)次選擇／120

II.

微信小程序.indd22019-8-2115:53:21

目錄

第5章小程序API／131

案例5.1變臉游戲／132

案例5.2階乘計(jì)算器／135

案例5.3基本繪圖／138

案例5.4參數(shù)繪圖／147

案例5.5改變圖形／150

案例5.6繪制正弦曲線／153

案例5.7自由繪圖／154

案例5.8動(dòng)畫／160

案例5.9照相和攝像／167

案例5.10位置和地圖／172

案例5.11文件操作／178

案例5.12數(shù)據(jù)緩存／183

案例5.13網(wǎng)絡(luò)狀態(tài)／193

案例5.14傳感器／197

案例5.15掃碼與打電話／202

案例5.16屏幕亮度、剪貼板和手機(jī)振動(dòng)／207

案例5.17設(shè)備系統(tǒng)信息／211

案例5.18導(dǎo)航欄／216

案例5.19標(biāo)簽欄／220

案例5.20操作菜單／226

第6章云開發(fā)／229

案例6.1獲取OpenID／230

案例6.2文件上傳下載／236

案例6.3數(shù)據(jù)庫(kù)操作／246

案例6.4云函數(shù)應(yīng)用／261

.III

微信小程序.indd32019-8-2115:53:21

微信小程序開發(fā)案例教程（慕課版）

第7章綜合案例／270

案例7.1計(jì)算器／271

案例7.2支付寶九宮格導(dǎo)航界面設(shè)計(jì)／279

第8章代碼管理／287

8.1Git／288

8.2微信開發(fā)者·代碼管理／292

參考文獻(xiàn)／300

IV.

微信小程序.indd42019-8-2115:53:21

第1章初識(shí)微信小程序

本章概要第1章

本章首先介紹了注冊(cè)小程序賬號(hào)、查看小程序AppID、初識(shí)微信小程序

設(shè)置小程序信息、下載并安裝小程序開發(fā)環(huán)境以及創(chuàng)建和打

開小程序的方法，最后通過1個(gè)案例演示了小程序的開發(fā)

過程和方法。

學(xué)習(xí)目標(biāo)

了解小程序的發(fā)展歷程及基本功能

掌握注冊(cè)小程序賬號(hào)的方法

掌握查看小程序AppID的方法

掌握設(shè)置小程序信息的方法

掌握下載并安裝小程序開發(fā)環(huán)境的方法

掌握小程序的開發(fā)過程和方法

.1

微信小程序.indd12019-8-2115:53:21

微信小程序開發(fā)案例教程（慕課版）

1.1注冊(cè)小程序賬號(hào)

首先進(jìn)入頁(yè)面：，如圖1.1所示。

圖1.1小程序注冊(cè)和登錄頁(yè)面

如果已經(jīng)有小程序賬號(hào)，可以直接輸入賬號(hào)和密碼進(jìn)行登錄，如果沒有，可以點(diǎn)擊“立即

注冊(cè)”鏈接，則出現(xiàn)如圖1.2所示的窗口。在出現(xiàn)的窗口中點(diǎn)擊“小程序”鏈接，然后按照注

冊(cè)向?qū)Ь涂梢酝瓿尚〕绦蛸~號(hào)的注冊(cè)（注：在注冊(cè)小程序賬號(hào)之前應(yīng)該準(zhǔn)備好一個(gè)郵箱）。

圖1.2小程序注冊(cè)頁(yè)面

注冊(cè)完成之后要等待騰訊服務(wù)器驗(yàn)證，可能會(huì)等幾個(gè)小時(shí)，請(qǐng)耐心等待。

通過騰訊服務(wù)器驗(yàn)證后，可以進(jìn)入頁(yè)面進(jìn)行登錄了，登錄后需

要利用微信掃描二維碼進(jìn)行身份驗(yàn)證，登錄后的界面如圖1.3所示。

2.

微信小程序.indd22019-8-2115:53:21

第1章初識(shí)微信小程序

圖1.3小程序登錄頁(yè)面

1.2查看小程序的AppID

注冊(cè)完小程序賬號(hào)后，就可以查看AppID了。盡管AppID不是開發(fā)小程序所必需的，但

如果要發(fā)布小程序就必須要用到AppID。在圖1.3中點(diǎn)擊左側(cè)的“開發(fā)”鏈接，在出現(xiàn)的右側(cè)

界面中點(diǎn)擊“開發(fā)設(shè)置”鏈接，就可以查看自己的AppID了，如圖1.4所示。

圖1.4小程序AppID申請(qǐng)和查看頁(yè)面

.3

微信小程序.indd32019-8-2115:53:22

微信小程序開發(fā)案例教程（慕課版）

1.3設(shè)置小程序信息

即使有了AppID，也不能立即發(fā)布小程序，還需要進(jìn)行小程序基本信息的設(shè)置。點(diǎn)擊如

圖1.3所示的左下角的“設(shè)置”鏈接，在右側(cè)出現(xiàn)的頁(yè)面中進(jìn)行諸如小程序名稱、小程序頭像

等內(nèi)容的設(shè)置，設(shè)置完成后的界面如圖1.5所示。

圖1.5小程序信息設(shè)置頁(yè)面

1.4下載并安裝小程序開發(fā)者工具

打開頁(yè)面，滾動(dòng)到下面后找到賬號(hào)分類，如圖1.6所示。

圖1.6微信賬號(hào)分類頁(yè)面

4.

微信小程序.indd42019-8-2115:53:22

第1章初識(shí)微信小程序

當(dāng)把光標(biāo)放在“小程序”圖標(biāo)上面時(shí)，小程序圖標(biāo)變成“查看詳情”按鈕，點(diǎn)擊“查看詳

情”按鈕，在出現(xiàn)的界面中找到“開發(fā)支持”內(nèi)容，如圖1.7所示。選擇“開發(fā)者工具”圖標(biāo)，

在出現(xiàn)的界面中點(diǎn)擊“微信開發(fā)者工具”鏈接，出現(xiàn)如圖1.8所示的界面，根據(jù)自己電腦操作

系統(tǒng)的版本下載相應(yīng)的微信開發(fā)者工具并進(jìn)行安裝。

圖1.7小程序開發(fā)支持頁(yè)面

圖1.8微信開發(fā)者工具下載頁(yè)面

1.5創(chuàng)建和打開小程序

打開微信開發(fā)者工具之后，首先出現(xiàn)一個(gè)二維碼界面，需要使用微信進(jìn)行掃描，并在手機(jī)

上進(jìn)行確認(rèn)后才能進(jìn)行登錄。登錄后的界面如圖1.9所示，此時(shí)如果選擇某一個(gè)項(xiàng)目就可以直

接打開該項(xiàng)目（最近建立或打開過的項(xiàng)目）。如果點(diǎn)擊“+”圖標(biāo)，就會(huì)出現(xiàn)如圖1.10所示的

.5

微信小程序.indd52019-8-2115:53:22

微信小程序開發(fā)案例教程（慕課版）

界面。如果新建項(xiàng)目，就選擇界面最上面的“新建項(xiàng)目”按鈕，然后點(diǎn)擊“目錄”最右側(cè)的

箭頭，在彈出的窗口中選擇一個(gè)空文件夾，然后填入AppID或直接使用“測(cè)試號(hào)”。如果要

打開某一個(gè)項(xiàng)目，就選擇界面最上面的“導(dǎo)入項(xiàng)目”按鈕，然后點(diǎn)擊“目錄”最右側(cè)的箭頭，

選擇要打開項(xiàng)目的文件夾即可。

圖1.9微信開發(fā)者工具登錄界面

圖1.10新建項(xiàng)目或?qū)腠?xiàng)目界面

6.

微信小程序.indd62019-8-2115:53:22

第1章初識(shí)微信小程序

微信開發(fā)者工具的開發(fā)界面如圖1.11所示。界面主要包括：模擬器、編輯器和調(diào)試器等

窗口，點(diǎn)擊界面左上角的圖標(biāo)，就會(huì)打開或關(guān)閉相應(yīng)的窗口。

圖1.11微信開發(fā)者工具開發(fā)界面

1.6第一個(gè)微信小程序

1.6.1案例描述

設(shè)計(jì)一個(gè)小程序，小程序運(yùn)行后在界面上顯示一句話：“HelloWechat！”。

1.6.2實(shí)現(xiàn)效果

根據(jù)案例描述可以做出如圖1.12所示的效果。在模擬器上運(yùn)行的效果如圖1.12（a）所示，

在真機(jī)上運(yùn)行的效果如圖1.12（b）所示。

（a）模擬器運(yùn)行效果（b）真機(jī)運(yùn)行效果

圖1.12案例在模擬器和真機(jī)上的運(yùn)行效果

1.6.3案例實(shí)現(xiàn)

1．新建項(xiàng)目HelloWechat。

.7

微信小程序.indd72019-8-2115:53:22

微信小程序開發(fā)案例教程（慕課版）

2．編寫index.wxml文件代碼。刪除該文件中原有代碼，添加如下代碼。

index.wxml文件：

<!--index.wxml-->

<view>

HelloWechat!

</view>

3．其他文件中的代碼保持不變。

1.6.4案例運(yùn)行

1．代碼編寫完成后，點(diǎn)擊“編譯”按鈕或按下【Ctrl+S】組合鍵，即可看到如圖1.13所

示的模擬器中的運(yùn)行結(jié)果。

圖1.13小程序的運(yùn)行過程及在模擬器上查看運(yùn)行結(jié)果的方法

2．如果想通過真機(jī)查看運(yùn)行結(jié)果，則可以點(diǎn)擊右上角的“預(yù)覽”按鈕，此時(shí)會(huì)彈出二維碼，

利用手機(jī)微信掃碼可以直接在手機(jī)上查看運(yùn)行結(jié)果。

1.6.5相關(guān)知識(shí)

本案例涉及了view組件。該組件是微信小程序的基本組件，也是一個(gè)容器組件，用于布

局或顯示相關(guān)信息。

8.

微信小程序.indd82019-8-2115:53:22

本章概要第2章

本章通過14個(gè)案例介紹了小程序開發(fā)的基礎(chǔ)知識(shí)，包小程序編程基礎(chǔ)

括HTML、CSS和JavaScript中的基礎(chǔ)知識(shí)和代碼設(shè)計(jì)方法，

為小程序開發(fā)奠定基礎(chǔ)。

學(xué)習(xí)目標(biāo)

掌握HTML的基本架構(gòu)和常用標(biāo)簽的含義

掌握利用CSS設(shè)置組件樣式和布局的方法

掌握J(rèn)avaScript程序設(shè)計(jì)的基本方法和技巧

微信小程序.indd92019-8-2115:53:22

微信小程序開發(fā)案例教程（慕課版）

案例2.1字體樣式設(shè)置

123

2.1.1案例描述

設(shè)計(jì)一個(gè)小程序，分別利用style和class屬性設(shè)置字體樣式，在index.wxss中定義樣式類。

所有的文字都包含在一個(gè)邊框內(nèi)，邊框內(nèi)上方有標(biāo)題文字，邊框和標(biāo)題樣式利用class屬性來

設(shè)置，在app.wxss中定義樣式類。

2.1.2實(shí)現(xiàn)效果

根據(jù)案例描述可以做出如圖2.1所示的效果。邊框樣式和標(biāo)題

樣式是在app.wxss文件中定義的樣式類，在index.wxml文件中利

用class引用。標(biāo)題下面、雙虛線上面的文字樣式是在index.wxml

中直接利用style來設(shè)置的，設(shè)置的字體樣式為：sans-serif、30像素。

虛線下面的樣式是通過在index.wxss文件中定義，在index.wxml

文件中利用class來引用的，設(shè)置的字體樣式為：Cursive、25像素、

傾斜、加粗。

2.1.3案例實(shí)現(xiàn)

1．編寫index.wxml文件代碼。代碼中主要使用了view組件

的style和class屬性來設(shè)置字體樣式，其中style是直接在標(biāo)簽內(nèi)

部進(jìn)行設(shè)置，而class則首先需要在wxss文件中定義樣式類，然后圖2.1字體樣式設(shè)置

在wxml文件中通過class屬性引用。.box和.title兩種樣式類分別案例運(yùn)行效果

用來設(shè)置邊框和標(biāo)題樣式，它們?cè)赼pp.wxss文件中定義，是全局樣式，可以在項(xiàng)目中的任何

WXML文件中使用。fontStyle樣式類用來設(shè)置字體樣式，在index.wxss文件中定義，一般只

能在index頁(yè)面文件中使用。

index.wxml文件：

<!--index.wxml-->

<viewclass='box'>

字體樣式設(shè)置

<viewclass='title'></view>

<viewstyle='font-family:"sans-serif";font-size:30px;'>

利用設(shè)置字體樣式：

<view>Style</view>

字體：，像素

<view>sans-serif30</view>

</view>

========================

<viewclass='fontStyle'>

利用設(shè)置字體樣式：

<view>class</view>

字體：、像素、傾斜、加粗

<view>Cursive25</view>

</view>

</view>

2．編寫app.wxss文件代碼。該文件定義了.box和.title兩種全局樣式類，以后的大多數(shù)

10.

微信小程序.indd102019-8-2115:53:23

第2章小程序編程基礎(chǔ)

案例都將使用這兩種樣式，在后面的案例中就不再贅述了。

app.wxss文件：

/**app.wxss**/

定義用于設(shè)置邊框的樣式

.box{/****/

外邊距

margin:20rpx;/****/

內(nèi)邊距

padding:20rpx;/****/

邊框、實(shí)線、銀灰色

border:1pxsolidsilver;/**1px**/

}

定義用于設(shè)置標(biāo)題的樣式

.title{/****/

字體大小為

font-size:25px;/**25px**/

文本水平對(duì)齊方式為居中

text-align:center;/****/

下外邊距為

margin-bottom:15px;/**15px**/

顏色為紅色

color:red;/****/

}

3．編寫index.wxss文件代碼。代碼中定義了.fontStyle樣式類，該樣式類在index.wxml

文件中被使用。

index.wxss文件：

/**index.wxss**/

.fontStyle{

定義樣式類

/**/

設(shè)置字體類型

font-family:Cursive;/**/

設(shè)置字體大小

font-size:25px;/**/

設(shè)置字體傾斜

font-style:italic;/**/

設(shè)置字體加粗

font-weight:bold;/**/

}

2.1.4相關(guān)知識(shí)

本案例主要介紹了各種字體樣式屬性的名稱及其含義，利用style和class設(shè)置字體樣式的

方法，以及在index.wxss和app.wxss中定義樣式類的方法。

字體屬性包括字體類型、大小、粗細(xì)、風(fēng)格（如斜體）和變形（如小型大寫字母）等。常

用字體樣式屬性見表2.1。

表2.1常用字體樣式屬性

屬?性含義屬性值舉例

font-family字體類型serif,sans-serif,monospace,cursive,fantasy,…

font-size字體大小5px/rpx/cm,large,small,medium,larger,smaller,…

font-style字體傾斜italic,normal,oblique,…

font-weight字體粗細(xì)bold,bolder,lighter,…

.11

微信小程序.indd112019-8-2115:53:23

微信小程序開發(fā)案例教程（慕課版）

view組件支持使用style、class屬性來設(shè)置組件的樣式，靜態(tài)的樣式一般寫到class中，動(dòng)

態(tài)的樣式一般寫到style中，這樣可以提高渲染速度。class引用的樣式類可以在index.wxss和

app.wxss中定義，在app.wxss中定義的樣式是全局樣式，可以在項(xiàng)目中的任何頁(yè)面使用，而

在index.wxss中定義的樣式一般只在index頁(yè)面中使用。

2.1.5總結(jié)與思考

1．本案例主要涉及如下知識(shí)要點(diǎn)：

（1）各種字體樣式屬性名稱及其含義。

（2）利用style和class設(shè)置字體樣式的方法。

（3）在index.wxss和app.wxss中定義樣式類的方法。

2．請(qǐng)思考以下問題：

（1）利用style設(shè)置字體屬性時(shí)，文本型的屬性值是否需要用引號(hào)引起來？

（2）在wxss文件中定義樣式類時(shí)，文本型的屬性值是否需要用引號(hào)引起來？

案例2.2文本樣式設(shè)置

12

2.2.1案例描述

設(shè)計(jì)一個(gè)小程序，利用class屬性設(shè)置文本樣式，包括：

設(shè)置文本顏色，字符間距，文本對(duì)齊，文本裝飾，文本縮進(jìn)，

等等。

2.2.2實(shí)現(xiàn)效果

根據(jù)案例描述可以做出如圖2.2所示的效果。對(duì)雙虛線

以上中文文本的顏色、字符間距、對(duì)齊方式、文本裝飾、文

本縮進(jìn)進(jìn)行了設(shè)置。對(duì)雙虛線以下英文文本的對(duì)齊方式、字

間距、文本轉(zhuǎn)換和空白符進(jìn)行了設(shè)置。

2.2.3案例實(shí)現(xiàn)

1．編寫index.wxml文件代碼。代碼中利用class設(shè)置了

2種文本的樣式，雙虛線以上文本采用.textStyle01樣式，雙

虛線以下文本采用.textStyle02樣式。圖2.2文本樣式設(shè)置案例運(yùn)行效果

index.wxml文件：

<!--index.wxml-->

<viewclass='box'>

文本樣式設(shè)置

<viewclass='title'></view>

<viewclass='textStyle01'>

文本屬性可定義文本的外觀。通過設(shè)置文本屬性，您可以改變文本的顏色、字符間距，對(duì)齊

文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)，等等。

</view>

12.

微信小程序.indd122019-8-2115:53:24

第2章小程序編程基礎(chǔ)

====================

<viewclass='textStyle02'>

NorthChinaUniversityofTechnology(NCUT)islocatedinthe

westernpartofBeijing,whichisamunicipaluniversityfoundedin1946.

</view>

</view>

2．編寫index.wxss文件代碼。代碼定義了2個(gè)樣式：.textStyle01和.textStyle02。

index.wxss文件：

/*index.wxss*/

.textStyle01{

文本樣式

/*01*/

文本顏色：紅色

color:red;/**/

字符間距：像素

letter-spacing:10px;/*10*/

文本對(duì)齊：左對(duì)齊

text-align:left;/**/

首行縮進(jìn)

text-indent:50px;/**/

文本修飾樣式：下畫線

text-decoration:underline;/**/

修飾樣式顏色：下畫線顏色

text-decoration-color:#00f;/**/

行間距

line-height:30px;/**/

white-space:normal;

}

.textStyle02{

文本樣式

/*02*/

文本對(duì)齊：兩端對(duì)齊

text-align:justify;/**/