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

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

{

width:

128rpx;

height:

128rpx;

margin:

20rpx;

border-radius:

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

"list":[

{

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

"text":"首頁(yè)"

},

{

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

"text":"日志"

}

]

}在pages/index/index頁(yè)面中，生成了底部導(dǎo)航，如圖1-6-2所示。【操作步驟】在utils/app.json文件中，添加3.在utils/app.json文件中的tabBar的list增加一項(xiàng)。{"pagePath":"pages/center/index","text":"圖片瀏覽"}保存后，頁(yè)面的底部導(dǎo)航增多了一項(xiàng)“圖片瀏覽”，如圖1-6-3所示。圖1-6-3底部導(dǎo)航增多了一項(xiàng)“圖片瀏覽”在utils/app.json文件中，添加4.復(fù)制home1.png、home2.png、log1.png、log2.png、watch1.png、watch2.png等圖片文件到項(xiàng)目的images文件夾中，如圖1-6-4所示。圖1-6-4圖片文件到項(xiàng)目的images文件夾中在utils/app.json文件中，添加5.打開(kāi)app.json文件，在”首頁(yè)”下添加兩行代碼："iconPath":"images/home1.png","selectedIconPath":"images/home2.png"其中iconPath的作用是定義菜單項(xiàng)的圖標(biāo)文件為images/home1.png；selectedIconPath的作用是定義當(dāng)菜單項(xiàng)選中時(shí)，顯示的圖標(biāo)為images/home2.png，如圖1-6-5所示。圖1-6-5顯示的圖標(biāo)為images/home2.png在utils/app.json文件中，添加6.打開(kāi)app.json文件，在“日志”下添加兩行代碼："iconPath":"images/log1.png","selectedIconPath":"images/log2.png"在“圖片瀏覽”下添加兩行代碼："iconPath":"images/watch1.png","selectedIconPath":"images/watch2.png"為“日志”、“圖片瀏覽”菜單項(xiàng)配置對(duì)應(yīng)的圖標(biāo)，如圖1-6-6所示。圖1-6-6菜單項(xiàng)配置對(duì)應(yīng)的圖標(biāo)在utils/app.json文件中，添加7.鼠標(biāo)單擊“日志”后，顯示pages/logs/logs頁(yè)面內(nèi)容，如圖1-6-7所示。圖1-6-7