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

C

M

Y

CM

MY

CY

CMY

K

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

內(nèi)容簡介

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

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

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

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

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

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

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

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

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

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

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

者的入門參考書。

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

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

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

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

ISBN978-7-113-25940-2

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

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

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

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

作者：杜春濤

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

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

封面制作：劉穎

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

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

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

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

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

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

開本：787mm×1092mm1/16印張：19.25字數(shù)：468千

書號：ISBN978-7-113-25940-2

定價：59.80元

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

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

打擊盜版舉報電話：（010）51873659

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

前言

PREFACE

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

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

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

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

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

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

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

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

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

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

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

的理解。

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

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

個案例。

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

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

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

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

.I

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

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

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

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

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

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

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

畫布等內(nèi)容。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

限于編者水平，加之時間倉促，書中難免存在疏漏和不足之處，懇請各位專家、老

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

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

項目編號：201801002005）、2018年全國高等院校計算機基礎(chǔ)教育研究會計算機基礎(chǔ)教

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

2019年全國高等院校計算機基礎(chǔ)教育研究會計算機基礎(chǔ)教育教學(xué)研究項目（資助專項類，

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

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

版基金等項目支持。

編?者

2019年6月

II.

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

目錄

第1章初識微信小程序1

1.1注冊小程序賬號／2

1.2查看小程序的AppID／3

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

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

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

1.6第一個微信小程序／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頁面布局／25

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

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

案例2.10成績計算器／35

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

.I

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

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

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

案例2.13計時器／47

案例2.14自動隨機變化的三色旗／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成績等級計算器／73

案例3.7列表渲染／75

案例3.8九九乘法表／78

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

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

第4章小程序組件／85

案例4.1貨幣兌換／86

案例4.2三角形面積計算器／89

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

案例4.4滑動條和顏色／96

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

案例4.6個人信息填寫／103

案例4.7圖片顯示模式／109

案例4.8音頻演示／112

案例4.9視頻演示／115

案例4.10考試場次選擇／120

II.

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

目錄

第5章小程序API／131

案例5.1變臉游戲／132

案例5.2階乘計算器／135

案例5.3基本繪圖／138

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

案例5.5改變圖形／150

案例5.6繪制正弦曲線／153

案例5.7自由繪圖／154

案例5.8動畫／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屏幕亮度、剪貼板和手機振動／207

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

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

案例5.19標簽欄／220

案例5.20操作菜單／226

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

案例6.1獲取OpenID／230

案例6.2文件上傳下載／236

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

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

.III

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

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

第7章綜合案例／270

案例7.1計算器／271

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

第8章代碼管理／287

8.1Git／288

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

參考文獻／300

IV.

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

第1章初識微信小程序

本章概要第1章

本章首先介紹了注冊小程序賬號、查看小程序AppID、初識微信小程序

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

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

過程和方法。

學(xué)習(xí)目標

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

掌握注冊小程序賬號的方法

掌握查看小程序AppID的方法

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

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

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

.1

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

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

1.1注冊小程序賬號

首先進入頁面：，如圖1.1所示。

圖1.1小程序注冊和登錄頁面

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

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

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

圖1.2小程序注冊頁面

注冊完成之后要等待騰訊服務(wù)器驗證，可能會等幾個小時，請耐心等待。

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

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

2.

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

第1章初識微信小程序

圖1.3小程序登錄頁面

1.2查看小程序的AppID

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

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

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

圖1.4小程序AppID申請和查看頁面

.3

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

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

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

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

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

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

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

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

打開頁面，滾動到下面后找到賬號分類，如圖1.6所示。

圖1.6微信賬號分類頁面

4.

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

第1章初識微信小程序

當把光標放在“小程序”圖標上面時，小程序圖標變成“查看詳情”按鈕，點擊“查看詳

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

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

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

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

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

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

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

上進行確認后才能進行登錄。登錄后的界面如圖1.9所示，此時如果選擇某一個項目就可以直

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

.5

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

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

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

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

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

選擇要打開項目的文件夾即可。

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

圖1.10新建項目或?qū)腠椖拷缑?/p>

6.

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

第1章初識微信小程序

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

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

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

1.6第一個微信小程序

1.6.1案例描述

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

1.6.2實現(xiàn)效果

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

在真機上運行的效果如圖1.12（b）所示。

（a）模擬器運行效果（b）真機運行效果

圖1.12案例在模擬器和真機上的運行效果

1.6.3案例實現(xiàn)

1．新建項目HelloWechat。

.7

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

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

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

index.wxml文件：

<!--index.wxml-->

<view>

HelloWechat!

</view>

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

1.6.4案例運行

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

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

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

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

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

1.6.5相關(guān)知識

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

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

8.

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

本章概要第2章

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

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

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

學(xué)習(xí)目標

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

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

掌握JavaScript程序設(shè)計的基本方法和技巧

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

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

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

123

2.1.1案例描述

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

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

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

2.1.2實現(xiàn)效果

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

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

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

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

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

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

傾斜、加粗。

2.1.3案例實現(xiàn)

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

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

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

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

用來設(shè)置邊框和標題樣式，它們在app.wxss文件中定義，是全局樣式，可以在項目中的任何

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

能在index頁面文件中使用。

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;/****/

邊框、實線、銀灰色

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

}

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

.title{/****/

字體大小為

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

文本水平對齊方式為居中

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)知識

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

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

字體屬性包括字體類型、大小、粗細、風(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字體粗細bold,bolder,lighter,…

.11

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

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

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

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

app.wxss中定義，在app.wxss中定義的樣式是全局樣式，可以在項目中的任何頁面使用，而

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

2.1.5總結(jié)與思考

1．本案例主要涉及如下知識要點：

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

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

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

2．請思考以下問題：

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

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

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

12

2.2.1案例描述

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

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

等等。

2.2.2實現(xiàn)效果

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

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

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

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

2.2.3案例實現(xiàn)

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

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

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

index.wxml文件：

<!--index.wxml-->

<viewclass='box'>

文本樣式設(shè)置

<viewclass='title'></view>

<viewclass='textStyle01'>

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

文本，裝飾文本，對文本進行縮進，等等。

</view>

12.

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

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

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

<viewclass='textStyle02'>

NorthChinaUniversityofTechnology(NCUT)islocatedinthe

westernpartofBeijing,whichisamunicipaluniversityfoundedin1946.

</view>

</view>

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

index.wxss文件：

/*index.wxss*/

.textStyle01{

文本樣式

/*01*/

文本顏色：紅色

color:red;/**/

字符間距：像素

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

文本對齊：左對齊

text-align:left;/**/

首行縮進

text-indent:50px;/**/

文本修飾樣式：下畫線

text-decoration:underline;/**/

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

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

行間距

line-height:30px;/**/

white-space:normal;

}

.textStyle02{

文本樣式

/*02*/

文本對齊：兩端對齊

text-align:justify;/**/