項目1helloworld演講人任務1創(chuàng)建第一個helloworld01020304（1）運行微信小程序開發(fā)工具。（2）登錄微信小程序開發(fā)工具。05（3）應用普通快速啟動模板創(chuàng)建第一個小程序項目?！救蝿彰枋觥咳蝿?創(chuàng)建第一個helloworld【操作步驟】圖1-1-1執(zhí)行“微信web開發(fā)者工具”1.執(zhí)行“微信web開發(fā)者工具”，如圖1-1-1所示?！静僮鞑襟E】2.進入“微信web開發(fā)者工具”界面，如圖1-1-2所示。圖1-1-2進入“微信web開發(fā)者工具”界面【操作步驟】圖1-1-3執(zhí)行“項目/新建項目”3.執(zhí)行“項目/新建項目”，如圖1-1-3所示?！静僮鞑襟E】圖1-1-4掃一下二維碼進行登錄4.用微信“掃一掃”掃一下二維碼進行登錄，如圖1-1-4所示?！静僮鞑襟E】圖1-1-5單擊“測試號”5.單擊“測試號”自動獲取一個AppID，如圖1-1-5所示?！静僮鞑襟E】6.進入項目編輯界面，輸入昵稱，如圖1-1-6所示。圖1-1-6輸入昵稱掃碼登錄7.輸入昵稱后，在模擬器可以看到helloworld小程序運行界面，如圖1-1-7所示。圖1-1-7helloworld小程序運行界面任務2設置頭像的樣式2設置頭像的樣式。3（1）導入項目：任務2helloworld。1【任務描述】（3）修改頭像樣式，修改高度和寬度。（2）修改頭像樣式，去除圓角。【操作步驟】1.啟動微信web開發(fā)者工具，執(zhí)行“項目/查看所有項目”，如圖1-2-1所示。圖1-2-1執(zhí)行“項目/查看所有項目”【操作步驟】

2.選擇“小程序”，執(zhí)行“+”，如圖1-2-2所示。圖1-2-2執(zhí)行“+”【操作步驟】圖1-2-3選擇“導入項目”3.選擇“導入項目”，目錄選擇任務2完成的項目，如圖1-2-3所示?！静僮鞑襟E】圖1-2-4成功導入項目后4.成功導入項目后，如圖1-2-4所示?！静僮鞑襟E】5.打開index.wxml，查看頭像的image組件產(chǎn)生，其中class=”userinfo-avatar”,如圖1-2-5所示。圖1-2-5class=”userinfo-avatar”【操作步驟】6.打開index.wxss，查看.userinfo-avatar樣式代碼。.userinfo-avatar

{

width:

128rpx;

height:

128rpx;

margin:

20rpx;

border-radius:

50%;}【操作步驟】圖1-2-6頭像圖片變成了方角7.刪除.userinfo-avatar樣式代碼中的border-radius:50%;會發(fā)現(xiàn)頭像圖片變成了方角，如圖1-2-6所示。.userinfo-avatar{width:128rpx;height:128rpx;margin:20rpx;}【操作步驟】

8.在.userinfo-avatar樣式代碼中，把width:128rpx;height:128rpx;更改為idth:228rpx;height:228rpx;會發(fā)現(xiàn)頭像圖片變大了，如圖1-2-7所示。.userinfo-avatar{width:228rpx;height:228rpx;margin:20rpx;}圖1-2-7頭像圖片變大了任務3添加圖片（1）把圖片復制到項目中。（2）顯示圖片。完成圖片添加，設置圖片樣式,實現(xiàn)圖片居中顯示功能。（3）修改圖片樣式，實現(xiàn)兩張圖片居中顯示?！救蝿彰枋觥俊静僮鞑襟E】1.打開一個微信小程序項目，指向組件窗口中某一個文件，右擊鼠標右鍵，執(zhí)行“硬盤打開”，如圖1-3-1所示。圖1-3-1執(zhí)行“硬盤打開”【操作步驟】2.在pages目錄下，創(chuàng)建images文件夾，如圖1-3-2所示。圖1-3-2創(chuàng)建images文件夾【操作步驟】3.把一個圖片文件復制到images文件夾中，命名為t1.jpg，如圖1-3-3所示。圖1-3-3把一個圖片文件復制到images文件夾【操作步驟】4.在項目下，再創(chuàng)建一個images文件夾，與pages目錄同級，如圖1-3-4所示。圖1-3-4再創(chuàng)建一個images文件夾【操作步驟】5.把另一個圖片文件復制到新建的images文件夾中，命名為t2.jpg，如圖1-3-5所示。圖1-3-5圖片文件復制到新建的images文件夾【操作步驟】6.t1.jpg與t2.jpg分別在不同的images文件夾中，如圖1-3-6所示。圖1-3-6t1.jpg與t2.jpg分別在不同的images文件夾中【操作步驟】7.打開index/index.wxml文件，添加<imagesrc="../images/t1.jpg"></image>，會看到左邊的手機模擬器中呈現(xiàn)了t1.jpg的圖像，如圖1-3-7所示。圖1-3-7呈現(xiàn)了t1.jpg的圖像【操作步驟】8.打開index/index.wxml文件，添加<imagesrc="../../images/t2.jpg"></image>，會看到左邊的手機模擬器中呈現(xiàn)了t2.jpg的圖像，如圖1-3-8所示。圖1-3-8呈現(xiàn)了t2.jpg的圖像【操作步驟】9.打開index/index.wxss文件，添加image樣式：image{width:200rpx;height:200rpx;}設置width:200rpx、height:200rpx，實現(xiàn)指定圖片的寬度和高度的效果，如圖1-3-9所示。圖1-3-9指定圖片的寬度和高度的效果【操作步驟】10.打開index/index.wxss文件，添加page樣式：page{text-align:center;}設置text-align:center，實現(xiàn)圖片居中的效果，如圖1-3-10所示。圖1-3-10圖片居中的效果任務4增加文本演講人【任務描述】完成文本添加，設置文本樣式，實現(xiàn)文本與圖片居中顯示功能。（1）在指定的位置顯示文本。（2）修改文本樣式，實現(xiàn)文本block顯示。（3）實現(xiàn)文本與圖片居中顯示。0103020405【操作步驟】1.打開微信小程序項目，按任務4的步驟完成添加了兩張圖。打開index/index.wxml，在第一張圖前面添加<text>第1張圖</text>，實現(xiàn)在第一張圖片前面顯示文本的效果，如圖1-4-1所示。圖1-4-1實現(xiàn)在第一張圖片前面顯示文本【操作步驟】2.打開index/index.wxml，在第二張圖前面添加<text>第2張圖</text>，實現(xiàn)在第二張圖片前面顯示文本的效果，如圖1-4-2所示。圖1-4-2在第二張圖片前面顯示文本【操作步驟】3.打開index/index.wxss文件，添加text樣式：text{display:block;}設置display:block，實現(xiàn)文本以block顯示，呈現(xiàn)的效果文本獨占一行，如圖1-4-3所示圖1-4-3文本獨占一行【操作步驟】4.打開index/index.wxml文件，添加一件<viewclass="box">組件、兩個<view>組件。<viewclass="box"><view><text>第1張圖</text><imagesrc="../../images/t2.jpg"></image></view><view><text>第2張圖</text><imagesrc="../images/t1.jpg"></image></view></view>輸入<viewclass="box">作為文本和圖片的容器的效果，如圖1-4-4所示。圖1-4-4輸入<viewclass="box">【操作步驟】5.打開index/index.wxss文件，添加.box樣式。.box{display:flex;}設置display:flex,實現(xiàn)容器內(nèi)的元件采用flex樣式，呈現(xiàn)的方式是同一行顯示，如圖1-4-5所示。圖1-4-5呈現(xiàn)的方式是同一行顯示【操作步驟】6.打開index/index.wxss文件，修改.box樣式。.box{display:flex;justify-content:center;}添加了justify-content:center,實現(xiàn)容器內(nèi)的元件居中顯示，如圖1-4-6。圖1-4-6元件居中顯示任務5添加子頁面演講人【任務描述】01完成子頁面添加，實現(xiàn)子頁面圖片瀏覽功能。02（1）通過編輯app.json內(nèi)容，實現(xiàn)子頁面添加。03（2）配置子頁面的標題。04（3）在子頁面實現(xiàn)多張圖片顯示的功能。05【操作步驟】1.打開任務5完成的小程序項目，打開utils/app.json，如圖1-5-1所示。圖1-5-1打開utils/app.json【操作步驟】2.在utils/app.json文件里的”pages”項內(nèi)第一行添加"pages/center/index",保存后，實現(xiàn)新增子頁pages/center/index的效果，子頁pages/center/index的視圖效果呈現(xiàn)在左邊的手機模擬器，如圖1-5-2所示。圖1-5-2子頁pages/center/index的視圖效果【操作步驟】3.在center/index.json文件里花括號內(nèi)添加"navigationBarTitleText":"圖片展示",保存后，實現(xiàn)設置子頁標題文本為"圖片展示"的效果，如圖1-5-3所示。注意：在添加一行時，必須在上一行的末尾添加逗號。圖1-5-3子頁標題文本為"圖片展示"【操作步驟】4.把若干個圖片復制到項目的images文件夾中，并依次命名為fruit1.png、fruit2.png、fruit3.png、fruit4.png、fruit5.png，如圖1-5-4所示。圖1-5-4若干個圖片復制到項目的images文件夾中【操作步驟】logo5.打開center/index.wxml文件，添加組件<viewclass="box">，并在其內(nèi)添加<imagesrc="../../images/fruit1.png"></image>組件。<viewclass="box"><imagesrc="../../images/fruit1.png"></image></view>在center/index.wxml頁面中，實現(xiàn)顯示圖片images/fruit1.png的效果，如圖1-5-5所示。圖1-5-5實現(xiàn)顯示圖片images/fruit1.png的效果打開center/index.wxss文件，添加樣式6.打開center/index.wxss文件，添加樣式image{width:200rpx;height:200rpx;}設置圖片images/fruit1.png寬度與高度后的效果，如圖1-5-6所示。圖1-5-6設置圖片images/fruit1.png寬度與高度【操作步驟】打開center/index.wxss文件，添加樣式7.打開center/index.wxml文件，在組件<viewclass="box">內(nèi)，再添加多個image組件，實現(xiàn)顯示多張圖片的效果，如圖1-5-7所示。圖1-5-7添加多個image組件任務6tabBar導航演講人【任務描述】實現(xiàn)tabBar導航添加，完成導航菜單項的圖標設置。（1）通過編輯app.json內(nèi)容，實現(xiàn)tabBar導航添加。（2）配置導航菜單項的頁面路徑。（3）配置導航菜單項的圖標?！静僮鞑襟E】1.打開任務6完成的項目，打開utils/app.json文件，把”pages”項內(nèi)的"pages/index/index",調(diào)整到第一行，實現(xiàn)首頁為pages/index/index的效果，如圖1-6-1所示。圖1-6-1首頁為pages/index/index在utils/app.json文件中，添加2.在utils/app.json文件中，添加"tabBar":{

"list":[

{

"pagePath":"pages/index/index",

"text":"首頁"

},

{

"pagePath":"pages/logs/logs",

"text":"日志"

}

]

}在pages/index/index頁面中，生成了底部導航，如圖1-6-2所示?！静僮鞑襟E】在utils/app.json文件中，添加3.在utils/app.json文件中的tabBar的list增加一項。{"pagePath":"pages/center/index","text":"圖片瀏覽"}保存后，頁面的底部導航增多了一項“圖片瀏覽”，如圖1-6-3所示。圖1-6-3底部導航增多了一項“圖片瀏覽”在utils/app.json文件中，添加4.復制home1.png、home2.png、log1.png、log2.png、watch1.png、watch2.png等圖片文件到項目的images文件夾中，如圖1-6-4所示。圖1-6-4圖片文件到項目的images文件夾中在utils/app.json文件中，添加5.打開app.json文件，在”首頁”下添加兩行代碼："iconPath":"images/home1.png","selectedIconPath":"images/home2.png"其中iconPath的作用是定義菜單項的圖標文件為images/home1.png；selectedIconPath的作用是定義當菜單項選中時，顯示的圖標為images/home2.png，如圖1-6-5所示。圖1-6-5顯示的圖標為images/home2.png在utils/app.json文件中，添加6.打開app.json文件，在“日志”下添加兩行代碼："iconPath":"images/log1.png","selectedIconPath":"images/log2.png"在“圖片瀏覽”下添加兩行代碼："iconPath":"images/watch1.png","selectedIconPath":"images/watch2.png"為“日志”、“圖片瀏覽”菜單項配置對應的圖標，如圖1-6-6所示。圖1-6-6菜單項配置對應的圖標在utils/app.json文件中，添加7.鼠標單擊“日志”后，顯示pages/logs/logs頁面內(nèi)容，如圖1-6-7所示。圖1-6-7顯示pages/logs/logs頁面內(nèi)容在utils/app.json文件中，添加8.鼠標單擊“圖片瀏覽”后，顯示pages/center/index頁面內(nèi)容，如圖1-6-8所示。圖1-6-8顯示pages/center/index頁面內(nèi)容任務7跳轉(zhuǎn)到子頁面演講人【任務描述】實現(xiàn)頁面之間的跳轉(zhuǎn)功能。（1）在首頁添加按鈕，綁定事件，在事件實現(xiàn)跳轉(zhuǎn)到另一子頁面。（2）在子頁面添加鏈接，用鏈接實現(xiàn)跳轉(zhuǎn)到首頁?！静僮鞑襟E】1.新建一個小程序項目，如圖1-7-1所示；圖1-7-1新建一個小程序項目【操作步驟】2.打開index/index.wxml文件，添加<buttonbindtap="tologs">跳轉(zhuǎn)到日志頁面</button>組件，得到一個綁定了tologs函數(shù)的按鈕，如圖1-7-2所示。圖1-7-2綁定了tologs函數(shù)的按鈕【操作步驟】3.打開index/index.js文件，添加：tologs:function(){wx.navigateTo({url:'../logs/logs'})},設計的函數(shù)名稱是tologs，執(zhí)行跳轉(zhuǎn)到../logs/logs頁面的功能，如圖1-7-3所示。圖1-7-3設計的函數(shù)名稱是tologs【操作步驟】4.打開logs/logs文件，添加：

<navigatorurl="../index/index">鏈接到首頁</navigator>實現(xiàn)跳轉(zhuǎn)到../index/index頁面的鏈接，如圖1-7-4所示。圖1-7-4<navigatorurl="../index/index">謝謝項目2布局入門任務1<view>組件與wxss應用布局【任務描述】實現(xiàn)多個元素按樣圖設計，如圖2-1-1所示。（1）頁面劃分上下兩個區(qū)域，區(qū)域設有背景色和邊界，寬度為屏幕的90%，居中于屏幕。（2）第一個區(qū)域內(nèi)縱向顯示兩個子區(qū)域，子區(qū)域設有背景色，寬度為容器的90%。（3）第二個區(qū)域內(nèi)橫向顯示兩個子區(qū)域，子區(qū)域設有背景色，每個寬度為容器的50%以下。圖2-1-1多個元素按樣圖設計【操作步驟】1.打開index.wxml，添加<viewclass="header">組件，并在其中添加兩個<viewclass="subheader">組件。<viewclass="header"><viewclass="subheader"></view><viewclass="subheader"></view></view>【操作步驟】2.打開index.wxss，添加.header、.subheader樣式，實現(xiàn)頁面效果，如圖2-1-2所示。.header{margin:10rpxauto;width:90%;background-color:rgb(102,231,171);border:1rpxsolidred;}.subheader{margin:10rpxauto;width:90%;background-color:rgb(255,196,0);height:100rpx;}圖2-1-2頁面效果【操作步驟】3.打開index.wxml，添加<viewclass="content">組件，并在其中添加兩個<viewclass="subcontent">組件。<viewclass="content"><viewclass="subcontent"></view><viewclass="subcontent"></view></view>【操作步驟】4.打開index.wxss，添加.content、.subcontent樣式，實現(xiàn)頁面效果，如圖2-1-3所示。.content{margin:10rpxauto;display:flex;width:90%;background-color:rgb(102,231,171);border:1rpxsolidred;}.subcontent{margin:10rpxauto;width:45%;background-color:rgb(255,196,0);height:100rpx;}圖2-1-3頁面效果任務2flex布局實現(xiàn)水平布局演講人【任務描述】設計五個元素，居中，平均分布于一個帶背色的背景中，如圖2-2-1所示。（1）頁面劃分兩個區(qū)域，區(qū)域設有背景色，寬度為屏幕的100%。（2）第一個區(qū)域同一行顯示五個子區(qū)域，子區(qū)域設有背景色，文本居中。（3）第二個區(qū)域顯示版權信息,設有背景色，字體白色。圖2-2-1五個元素【操作步驟】1.打開index.wxml，添加<viewclass="header">組件，并在其中添加五個<viewclass="sheader">組件。<viewclass="header"><viewclass="sheader">1</view><viewclass="sheader">2</view><viewclass="sheader">3</view><viewclass="sheader">4</view><viewclass="sheader">5</view></view>【操作步驟】2.打開index.wxss，添加.header、.sheader樣式，實現(xiàn)頁面效果，如圖2-2-2所示。.header{display:flex;justify-content:space-evenly;background-color:#ccc;height:500rpx;text-align:center;}.sheader{margin-top:30rpx;width:100rpx;height:100rpx;line-height:100rpx;background-color:yellow;}【操作步驟】3.打開index.wxml，添加<viewclass="copyright">、<viewclass="scopyright">組件，并寫上功能介紹和作者信息等文本。<viewclass="copyright"><viewclass="scopyright">居中平均分布</view><viewclass="scopyright">設計:移動前端設計員</view></view>【操作步驟】4.打開index.wxss，添加.copyright樣式，實現(xiàn)頁面效果，如圖2-2-3所示。.copyright{margin:10rpxauto;background-color:#ccc;text-align:center;color:rgb(255,255,255);}圖2-2-3頁面效果任務3內(nèi)容頁面布局【任務描述】參照具體需求說明，按樣圖完成內(nèi)容頁面的布局，如圖2-3-1所示。（1）頁面劃分左中右三個區(qū)域，每個區(qū)域內(nèi)有個三個元素；區(qū)域設有背景色，總寬度為屏幕的100%。（2）每個區(qū)域有內(nèi)容，內(nèi)容區(qū)居中于容器中，樣式設置合理。圖2-3-1按樣圖完成內(nèi)容頁面的布局【操作步驟】1.打開index.wxml，添加<viewclass="content">組件，并在其中添加<viewclass="contentL">、<viewclass="contentM">、<viewclass="contentR">三個<view>,且每個<view>里都添加了三個<view>。<viewclass="content"><viewclass="contentL"><viewclass="subcontentL">1</view><viewclass="subcontentL">2</view><viewclass="subcontentL">3</view></view>【操作步驟】<viewclass="contentM"><viewclass="subcontentM">1</view><viewclass="subcontentM">2</view><viewclass="subcontentM">3</view></view><viewclass="contentR"><viewclass="subcontentR">1</view><viewclass="subcontentR">2</view><viewclass="subcontentR">3</view></view></view>【操作步驟】2.打開index.wxss，添加.content、.contentL、.contentM、.contentR、.subcontentL等樣式，實現(xiàn)視圖效果，如圖2-3-1所示。.content{display:flex;border:1rpxsolidred;}.contentL{background-color:rgb(125,218,241);width:20%;}【操作步驟】.contentM{background-color:rgb(248,225,15);width:60%;}.contentR{background-color:rgb(125,218,241);width:20%;}.subcontentL{margin:0auto;width:100rpx;height:100rpx;background-color:rgb(9,223,9);margin-top:10rpx;margin-bottom:10rpx;}}【操作步驟】.subcontentM{width:90%;height:100rpx;background-color:rgb(9,223,9);margin:10rpxauto;text-align:center;}.subcontentR{margin:0auto;width:100rpx;height:100rpx;background-color:rgb(9,223,9);margin-top:10rpx;margin-bottom:10rpx;}任務4靠頁面右側的布局【任務描述】設計兩個元素，靠右側顯示，如圖2-4-1所示。（1）背景view樣式為box，在屏幕水平居中。（2）box內(nèi)的view樣式為sbox，通過樣式控制sbox顯示在box右側。（3）按效果圖合理設置背景色、區(qū)域大小、文本字體大小。圖2-4-1靠右側顯示【操作步驟】1.打開index.wxml，添加<viewclass="box">、<viewclass="subbox">、<viewclass="view1">、<viewclass="view2">等組件。<viewclass="box"><viewclass="subbox"><viewclass="view1">靠右側</view><viewclass="view2">靠右側</view></view></view>【操作步驟】2.打開index.wxss，添加.box、.subbox、.contentM、.view1、.view2等樣式，實現(xiàn)視圖效果，如圖2-4-1所示。.box{padding:auto;width:100%;text-align:center;line-height:300rpx;}.subbox{margin:02%02%;border:1rpxsolid#000;}【操作步驟】.view1{margin-left:50%;width:50%;background-color:rgb(248,234,31);}.view2{margin-left:50%;width:50%;background-color:rgb(45,238,45);}任務5田字形的布局【任務描述】完成田字形的布局，如圖2-5-1所示。（1）頁面中劃分有四個相同大小的區(qū)域，各區(qū)域有邊框、背景色等樣式。（2）四個區(qū)域居中于頁面，并圍成一個田字形。圖2-5-1田字形的布局【操作步驟】1.打開index.wxml，添加<viewclass="box">、<viewclass="subbox">、<viewclass="view1">、<viewclass="view2">、<viewclass="view3">、<viewclass="view4">等組件。<viewclass="box"><viewclass="subbox"><viewclass="view1">左上</view><viewclass="view2">右上</view></view><viewclass="subbox">【操作步驟】<viewclass="view3">左下</view><viewclass="view4">右下</view></view></view>【操作步驟】2.打開index.wxss，添加.box、.subbox、.view1、.view2、.view3、.view4等樣式，實現(xiàn)視圖效果，如圖2-5-1所示。.box{padding:auto;width:100%;text-align:center;line-height:300rpx;}.subbox{margin:010%010%;display:flex;border:1rpxsolidrgb(136,236,111);}【操作步驟】.view1{width:300rpx;height:300rpx;background-color:rgb(245,23,245);}.view2{width:300rpx;height:300rpx;background-color:rgba(57,241,57,0.678);}【操作步驟】.view3{width:300rpx;height:300rpx;background-color:yellow;}.view4{width:300rpx;height:300rpx;background-color:#9f9;}任務6福字的布局【任務描述】完成倒過來的福字布局，如圖2-6-1所示。（1）頁面中有一個棱形紅底的區(qū)域。（2）棱形中心有一個倒寫的“?！弊?。圖2-6-1福字布局經(jīng)驗分享:【操作步驟】1.打開index.wxml，添加<viewclass="box">、<viewclass="txt">組件。<viewclass="box"></view><viewclass="txt">福</view>經(jīng)驗分享:在樣式設置中，對元素進行旋轉(zhuǎn)，可以使用transform屬性，transform:rotate(45deg)實現(xiàn)順時鐘旋轉(zhuǎn)45度。經(jīng)驗分享:2.打開index.wxss，添加.box、.txt等樣式，實現(xiàn)視圖效果，如圖2-6-1所示。.box{position:absolute;top:200rpx;left:170rpx;width:400rpx;height:400rpx;background-color:rgb(250,0,0);transform:rotate(45deg);z-index:9;}經(jīng)驗分享:.txt{position:absolute;top:270rpx;left:270rpx;font-size:200rpx;color:rgb(245,220,0);text-align:center;transform:rotate(180deg);z-index:99;}任務7柱形圖的布局【任務描述】完成一個柱形圖的布局，如圖2-7-1所示。（1）在頁面的一個區(qū)域內(nèi)實現(xiàn)一個柱形圖的布局。（2）數(shù)據(jù)柱高度與數(shù)據(jù)對應，數(shù)據(jù)越大高度越大，數(shù)據(jù)越小高度越小。（3）柱形有底色，數(shù)據(jù)顯示于柱頂。圖2-7-1柱形圖的布局【操作步驟】1.打開index.wxml，添加<viewclass="main">組件，包括四組<view>和<text>。<viewclass="main"><viewclass="data1"><text>400</text></view><viewclass="data2"><text>100</text></view>【操作步驟】<viewclass="data3"><text>350</text></view><viewclass="data4"><text>220</text></view></view>【操作步驟】<viewclass="data3"><text>350</text></view><viewclass="data4"><text>220</text></view></view>【操作步驟】2.打開index.wxss，添加.main、.data1、.data2、.data3、.data4、text等樣式，實現(xiàn)視圖效果，如圖2-7-1所示。.main{height:500rpx;text-align:center;background-color:rgb(197,194,194);}【操作步驟】.data1{position:absolute;left:50rpx;top:100rpx;width:100rpx;height:400rpx;background-color:yellow;}.data2{left:200rpx;top:400rpx;position:absolute;width:100rpx;height:100rpx;background-color:rgb(0,132,255);}【操作步驟】.data3{position:absolute;left:350rpx;top:150rpx;width:100rpx;height:350rpx;background-color:rgb(0,255,242);}【操作步驟】.data4{position:absolute;left:500rpx;top:280rpx;width:100rpx;height:220rpx;background-color:rgb(255,0,212);}text{display:block;margin-top:-50rpx;}任務8拼圖對接【任務描述】完成一個拼圖的布局，如圖2-8-1所示。（1）把兩張拼圖圖片置入頁面中。（2）調(diào)整圖片的大小，兩張圖能在同一行顯示。（3）設置圖片的位置，完成拼圖對接。圖2-8-1拼圖的布局【操作步驟】1.添加圖片，在組件清單右擊鼠標，選擇“硬盤打開”，建立images目錄，并把素材圖片復制到images目錄中，如圖2-8-2所示。圖2-8-2選擇“硬盤打開”【操作步驟】2.打開index.wxml，添加兩個<image>組件，并設置圖片路徑，如圖2-8-3所示。<imagesrc="../../images/m1.png"class="pic1"></image><imagesrc="../../images/m2.png"class="pic2"></image>圖2-8-3添加兩個<image>組件【操作步驟】3.打開index.wxss，添加.pic1、.pic2等樣式，實現(xiàn)頁面效果，如圖2-8-4所示。.pic1{width:200rpx;height:200rpx;}.pic2{width:200rpx;height:200rpx;}圖2-8-4頁面效果【操作步驟】4.打開index.wxss，.pic2樣式代碼添加margin-left:-50rpx，把拼圖成功對接，如圖2-8-5所示。.pic2{width:200rpx;height:200rpx;margin-left:-50rpx;}圖2-8-5拼圖成功對接任務9布局制作一個表格【任務描述】完成一個表格的布局，如圖2-9-1所示。（1）在頁面中呈現(xiàn)一張成績表。（2）第一行包括姓名、學號、成績、評定等。（3）設置若干行數(shù)據(jù)。圖2-9-1表格的布局【操作步驟】1.打開index.wxml，添加<viewclass="table">、<viewclass="tr">組件。<!--index.wxml--><viewclass="table"><viewclass="tr"><viewclass="td1">姓名</view><viewclass="td2">學號</view><viewclass="td3">成績</view><viewclass="td4">評定</view></view>【操作步驟】<viewclass="tr"><viewclass="td1">李小明</view><viewclass="td2">101</view><viewclass="td3">90</view><viewclass="td4">優(yōu)秀</view></view><viewclass="tr"><viewclass="td1">陳小明</view><viewclass="td2">102</view><viewclass="td3">92</view><viewclass="td4">優(yōu)秀</view></view>【操作步驟】<viewclass="tr"><viewclass="td1">吳小明</view><viewclass="td2">103</view><viewclass="td3">95</view><viewclass="td4">優(yōu)秀</view></view></view>【操作步驟】2.打開index.wxss，添加.table、.tr等樣式，實現(xiàn)頁面效果。/**index.wxss**/.table{padding:auto;width:100%;text-align:center;}【操作步驟】.tr{margin:010%010%;display:flex;border:1rpxsolidrgb(136,236,111);height:100rpx;line-height:100rpx;}.td1{width:20%;border:1rpxsolidrgb(136,236,111);}【操作步驟】.td2{width:20%;border:1rpxsolidrgb(136,236,111);}.td3{width:20%;border:1rpxsolidrgb(136,236,111);}.td4{width:40%;border:1rpxsolidrgb(136,236,111);}任務10圖文布局【任務描述】實現(xiàn)圖文樣圖布局的效果，如圖2-10-1所示。（1）把一張圖和一段文字置入頁面中。（2）使用float讓圖片浮起來，與文本實現(xiàn)布局效果。（3）文本有首行縮進的效果。圖2-10-1圖文樣圖布局【操作步驟】1.在組件列表中，創(chuàng)建目錄images，并把圖片復制到images目錄中，如圖2-10-2所示。2.打開index.wxml，添加<imagesrc="../../images/wx.png">、<viewclass="txt">組件，<viewclass="txt">組件包括一段文字，文字內(nèi)容可隨意錄入一段。<imagesrc="../../images/wx.png"></image>圖2-10-2把圖片復制到images目錄中【操作步驟】<viewclass="txt">微信小程序是一種不用下載就能使用的應用，也是一項創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構造了新的微信小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。微信小程序也是這么多年來中國IT行業(yè)里一個真正能夠影響到普通程序員的創(chuàng)新成果，已經(jīng)有超過150萬的開發(fā)者加入到了微信小程序的開發(fā)，與我們一起共同發(fā)力推動微信小程序的發(fā)展，微信小程序應用數(shù)量超過了一百萬，覆蓋200多個細分的行業(yè)，日活用戶達到兩個億，微信小程序還在許多城市實現(xiàn)了支持地鐵、公交服務。微信小程序發(fā)展帶來更多的就業(yè)機會，2017年小程序帶動就業(yè)104萬人，社會效應不斷提升。</view>【操作步驟】3.打開index.wxss，添加image、.txt等樣式，實現(xiàn)視圖效果，如圖2-10-2所示。image{width:300rpx;height:300rpx;float:left;margin:20rpx;}.txt{padding-top:10rpx;background-color:#ccc;text-indent:80rpx;}謝謝項目3界面設計任務1“學校場室展示”設計【任務描述】實現(xiàn)“學校場室展示”界面設計，如圖3-1-1所示。（1）八個場室的圖片與標題文本，圖片在標題上方，每行四個。（2）設置適當?shù)谋尘吧＃?）文本對齊于對應的圖片。圖3-1-1“學校場室展示”界面任務1“學校場室展示”設計【操作步驟】1.在組件列表窗口中，創(chuàng)建文件夾images，再把準備好的圖片素材復制到文件夾中，如圖3-1-2所示。圖3-1-2圖片素材復制到文件夾中2.打開index.wxml，添加<viewclass="box">、<viewclass="sbox">以及要用到的<image>、<text>等組件。<viewclass="box"><viewclass="sbox"><imagesrc="../../images/room1.jpg"></image><text>操場</text></view><viewclass="sbox"><imagesrc="../../images/room2.jpg"></image><text>電腦室</text></view><viewclass="sbox"><imagesrc="../../images/room3.jpg"></image><text>宿舍樓</text></view><viewclass="sbox"><imagesrc="../../images/room4.jpg"></image><text>大禮堂</text></view></view><viewclass="box"><viewclass="sbox"><imagesrc="../../images/room5.jpg"></image><text>大講臺</text></view><viewclass="sbox"><imagesrc="../../images/room6.jpg"></image><text>舞蹈室</text></view><viewclass="sbox"><imagesrc="../../images/room7.jpg"></image><text>102室</text></view><viewclass="sbox"><imagesrc="../../images/room8.jpg"></image><text>校外景</text></view></view><viewclass="title">校園場室介紹</view>3.打開index.wxss，添加.box、image、.sbox、text、等樣式。.box{display:flex;background-color:#ccc;height:200rpx;text-align:center;justify-content:space-between;padding-top:20rpx;box-sizing:border-box;margin-top:30rpx;}image{width:100%;height:100%;}.sbox{width:200rpx;height:100rpx;line-height:100rpx;margin-left:30rpx;margin-top:10rpx;margin-right:30rpx;}text{margin-top:-50rpx;display:block;}.title{margin-top:10rpx;text-align:center;background-color:greenyellow;}（1）文本“我的訂單”左對齊，字體加粗。（2）文本“全部”和小箭頭圖標右對齊。（3）“我的訂單”高度100rpx,居中于屏幕，左右留有適當?shù)倪吘?，下邊框設為淺灰色。（4）添加“待收款”、“待發(fā)貨”、“待收貨”、“待評價”、“售后”等標題和圖標，高度100rpx，居中于屏幕，左右留有適當?shù)倪吘?，下邊框設為淺灰色?！救蝿彰枋觥繉崿F(xiàn)“我的訂單”界面設計，如圖3-2-1所示。任務2“我的訂單”設計圖3-2-1“我的訂單”界面【操作步驟】1.打開index.wxml，添加<viewclass="top">等組件。<viewclass="top"><viewclass="topMyorder">我的訂單</view><viewclass="topAll"><text>全部</text><viewclass="topAllimav"><imagesrc="../../images/arrow.png"class="topAllima"></image></view></view></view>2.打開index.wxss，添加.top、.topMyorder、.toptxt、.topAll、.topAllimav、.topAllima等樣式實現(xiàn)界面效果，如圖3-2-2所示。.top{height:60rpx;margin:10rpx20rpx020rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;border-bottom:1rpxsolidrgba(184,181,181,0.61);}圖3-2-2界面效果.topMyorder{font-family:SimHei;font-weight:bold;}.toptxt{color:hsl(0,6%,79%);}.topAll{display:flex;}.topAllimav{height:50rpx;width:50rpx;}.topAllima{height:100%;width:100%;}3.打開index.wxml，添加<viewclass="top2">等組件。<viewclass="top2"><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/p1.png"class="top2itemima"></image></view><textclass="top2itemtxt">待付款</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/p2.png"class="top2itemima"></image></view><textclass="top2itemtxt">待發(fā)貨</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/p3.png"class="top2itemima"></image></view><textclass="top2itemtxt">待收貨</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/p4.png"class="top2itemima"></image></view><textclass="top2itemtxt">待評價</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/p5.png"class="top2itemima"></image></view><textclass="top2itemtxt">售后</text></view></view>4.打開index.wxss，添加.top2、.top2itemmav、.top2itemima、.top2itemtxt等樣式實現(xiàn)界面效果。.top2{height:130rpx;margin:020rpx20rpx20rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;border-bottom:1rpxsolidrgba(184,181,181,0.61);}.top2itemmav{height:70rpx;width:130rpx;box-sizing:border-box;padding:010rpx;text-align:center;}.top2itemima{height:100%;width:70%;}.top2itemtxt{margin-top:30rpx;width:130rpx;display:block;text-align:center;font-size:35rpx;}任務3“主播帶貨”設計【任務描述】實現(xiàn)“主播帶貨”界面設計，如圖3-3-1所示。（1）文本“主播帶貨”左對齊，字體加粗。（2）文本“全部”和小箭頭圖標右對齊。（3）文本“主播帶貨”右側另一種顏色的文本，例如“每日有新鮮”。（4）“主播帶貨”欄高度100rpx,居中于屏幕，左右留有適當?shù)倪吘?，下邊框設為淺灰色。（5）添加“關注”、“發(fā)現(xiàn)”、“爆款”、“直播”等標題和圖標，高度適當，居中于屏幕，左右留有適當?shù)倪吘?，下邊框設為綠色?！静僮鞑襟E】1.打開index.wxml，添加<viewclass="top">、<viewclass="toptxt">、<viewclass="topAll">等組件。<viewclass="top"><viewclass="toptxt"><textclass="txt">主播帶貨</text><text>每日有驚喜</text></view><viewclass="topAll"><text>全部</text><viewclass="topAllimav"><imagesrc="../../images/arrow.png"class="topAllima"></image></view></view></view>2.打開index.wxss，添加.top、.toptxt、.toptxt、.topAll、.topAllimav、.topAllima等樣式實現(xiàn)界面效果，如圖3-3-2所示。.top{height:60rpx;margin:10rpx20rpx020rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;border-bottom:1rpxsolidrgba(184,181,181,0.61);}.toptxt{color:hsl(110,94%,45%);}圖3-3-2界面效果.topAll{display:flex;}.topAllimav{height:50rpx;width:50rpx;}.topAllima{height:100%;width:100%;}.txt{font-weight:bold;color:black;}圖3-3-2界面效果3.打開index.wxml，添加<viewclass="top2">、<viewclass="top2item">等組件。<viewclass="top2"><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/t1.png"class="top2itemima"></image></view><textclass="top2itemtxt">關注</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/t2.png"class="top2itemima"></image></view><textclass="top2itemtxt">發(fā)現(xiàn)</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/t3.png"class="top2itemima"></image></view><textclass="top2itemtxt">爆款</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/t4.png"class="top2itemima"></image></view><textclass="top2itemtxt">直播</text></view></view>4.打開index.wxss，添加.top2、.top2itemmav、.top2itemima、.top2itemtxt等樣式實現(xiàn)界面效果。.top2{height:130rpx;margin:020rpx20rpx20rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;border-bottom:1rpxsolidhsl(110,94%,45%);}.top2itemmav{height:70rpx;width:130rpx;box-sizing:border-box;padding:010rpx;text-align:center;}.top2itemima{height:100%;width:70%;}.top2itemtxt{margin-top:30rpx;width:130rpx;display:block;text-align:center;font-size:35rpx;}（1）文本“常用工具”左對齊，字體加粗。（2）“搶紅包”等八個標題和圖標成兩行排列，居中于屏幕，左右留有適當?shù)倪吘?，高度適當。（3）添加“點贊”、“評議”標題和圖標，高度達當，居中于屏幕，左右留有適當?shù)倪吘啵线吙蛟O為淺灰色。任務4

“常用工具”設計圖3-4-1“常用工具”界面【任務描述】【操作步驟】1.打開index.wxml文件，添加<viewclass="mid">、<viewclass="mid1">等組件。<viewclass="mid"><viewclass="topMytools">常用工具</view></view><viewclass="mid1"><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/ca1.png"class="top2itemima"></image></view><textclass="top2itemtxt">搶紅包</text></view><viewclass="top2item"><viewclass="top2itemmav"><imagesrc="../../images/ca2.png"class="top2itemima"></image></view><textclass="top2itemtxt">優(yōu)惠</text></view>圖3-4-2界面效果2.打開index.wxss文件，添加topMytools、top2itemmav、top2itemima、top2itemtxt、mid、mid1等樣式實現(xiàn)界面效果，如圖3-4-2所示。.topMytools{font-family:SimHei;font-weight:bold;}.top2itemmav{height:90rpx;width:150rpx;box-sizing:border-box;padding:010rpx;text-align:center;}圖3-4-2界面效果.top2itemima{height:100%;width:70%;}.top2itemtxt{margin-top:30rpx;width:150rpx;display:block;text-align:center;font-size:35rpx;}圖3-4-2界面效果.mid{height:60rpx;margin:10rpx20rpx020rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;border-bottom:1rpxsolidrgba(218,211,211,0.74);}.mid1{height:60rpx;margin:10rpx20rpx020rpx;display:flex;justify-content:space-between;padding:20rpx30rpx20rpx30rpx;}圖3-4-2界面效果3.打開index.wxml文件，添加<viewclass="mid2">組件。<view

class="mid2">

<view

class="top2item">

<view

class="top2itemmav">

<image

src="../../images/ca5.png"

class="top2itemima"></image></view>

<text

class="top2itemtxt">服務中心</text>

</view>

<view

class="top2item">

<view

class="top2itemmav">

<image

src="../../images/ca6.png"

class="top2itemima"></image></view>

<text

class="top2itemtxt">新人特權</text>

</view>

<view

class="top2item">

<view

class="top2itemmav">

<image

src="../../images/ca7.png"

class="top2itemima"></image></view>