《微信小程序程序設(shè)計(jì)與開發(fā)》課件 第一章 微信小程序起步

第一章

主講人：XX微信小程序起步課程目標(biāo)第一章微信小程序起步第二章文章列表功能實(shí)現(xiàn)第三章歡迎頁面&文章功能列表功能升級第四章文章詳情頁面功能實(shí)現(xiàn)第五章背景音樂播放與頁面分享功能實(shí)現(xiàn)第六章電影首頁功能實(shí)現(xiàn)第七章更多電影、電影詳情功能實(shí)現(xiàn)第八章我的功能實(shí)現(xiàn)第九章基于云開發(fā)的功能升級微信小程序課程項(xiàng)目介紹文章首頁文章列表頁文章詳情頁微信小程序課程項(xiàng)目介紹更多電影列表頁面電影首頁我的頁面本章目標(biāo)了解微信小程序相關(guān)概念掌握微信小程序環(huán)境搭建與開發(fā)工具了解微信小程序的基本文件結(jié)構(gòu)掌握微信小程序支持的CSS選擇器與尺寸單位熟悉使用組件構(gòu)建頁面（view、text、image組件的使用）了解小程序的全局配置文件，全局樣式和應(yīng)用程序級別JS文件完成第一個(gè)簡單的“Welcome”頁面應(yīng)用的開發(fā)一、微信小程序介紹微信產(chǎn)品創(chuàng)始人小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)系是否安裝太多應(yīng)用的問題。應(yīng)用即將無處不在，及時(shí)可用，但無需安裝。微信小程序特點(diǎn)：無需安裝與卸載。開放注冊范圍（個(gè)人、企業(yè)、政府、媒體、其他組織）。可以快速開發(fā)且參與開發(fā)者比較多、便于傳播且用戶體驗(yàn)比較出色。一、微信小程序介紹小程序與原生App的比較屬性微信小程序iOS、Android相關(guān)基礎(chǔ)語言JavaScript和cssObjective-C、Java性能較好極好成本低高開發(fā)效率低較高開發(fā)環(huán)境配置簡單較復(fù)雜新手入手入門速度快慢適合應(yīng)用業(yè)務(wù)簡單，使用頻率不高業(yè)務(wù)邏輯復(fù)雜，使用頻率高新版審核周期較短較長跨平臺（對于iOS和Android兩個(gè)平臺只需要開發(fā)一套程序）。具備接近于原生App的體驗(yàn)。對原生組件有訪問能力。具備緩存能力。上手容易，開發(fā)邏輯較為簡單。小程序具有比較顯著的一些優(yōu)勢如下：微信小程序開發(fā)與Web前端開發(fā)區(qū)別微信小程序工程師這個(gè)職位在短期之內(nèi)不會成為獨(dú)立的一類職位，絕大數(shù)的小程序都是有Web前端工程師來開發(fā)，所以我們現(xiàn)在可以看到在Web前端崗位要求添加一項(xiàng)：熟悉微信小程序開發(fā)者優(yōu)先。微信小程序開發(fā)流程注冊小程序信息完善開發(fā)小程序提交審核和發(fā)布微信小程序環(huán)境搭建-工具下載下載地址：/miniprogram/dev/devtools/download.html如果選Windows64的版本安裝包，這里小程序開發(fā)工具不支持Windows7以下的操作系統(tǒng)項(xiàng)目搭建前準(zhǔn)備1：注冊小程序AppId注冊地址：/cgibin/wx?token=&lang=zh_CN項(xiàng)目搭建前準(zhǔn)備2：獲取AppId注冊完成登錄到微信后臺管理，獲得AppIDAppID是與微信號關(guān)聯(lián)，AppID不能共享。微信小程序搭建-1完成安裝微信小程序開發(fā)工具，第一次運(yùn)行，需要登錄登錄進(jìn)入頁面微信小程序搭建-2創(chuàng)建項(xiàng)目首頁把申請的AppID復(fù)制到輸入框微信小程序搭建-3第一個(gè)小程序創(chuàng)建成功頁面微信開發(fā)者工具介紹-1微信開發(fā)者工具介紹-常規(guī)設(shè)置微信小程序課程項(xiàng)目介紹微信小程序貫穿項(xiàng)目整體功能與技術(shù)棧微信小程序的貫穿項(xiàng)目，從整體分為三大模塊分別為：文章模塊、電影模塊、小程序設(shè)置模塊，主要使用的技術(shù)棧有：原生JavaScript（包括ES6語法)、CSS、微信小程序API、LinUI(第三方插件)第一個(gè)微信小程序頁面構(gòu)建-目錄結(jié)構(gòu)文件必須作用app.js是小程序邏輯文件app.json是小程序配置文件app.wxss否全局公共樣式文件文件類型必填作用js是頁面邏輯wxml是頁面結(jié)構(gòu),如HTMLwxss否頁面樣式，如CSSjson否頁面配置小程序應(yīng)用文件小程序頁面文件小程序所支持的CSS選擇器與尺寸單位WXSS（WeiXinStyleSheets）是一套用于小程序的樣式語言，用于描述WXML的組件樣式，也就是視覺上的效果。WXSS與Web開發(fā)中的CSS類似。在前端開發(fā)中樣式編寫一般單位使用px單位，但在WXSS中，引入了rpx（responsivepixel）尺寸單位。引用新尺寸單位的目的是，適配不同寬度的屏幕，開發(fā)起來更簡單小程序頁面創(chuàng)建步驟1-頁面元素步驟一：創(chuàng)建頁面，在頁面文件wxml編寫元素運(yùn)行效果小程序頁面創(chuàng)建步驟2-設(shè)置樣式步驟二：在wxss樣式文件設(shè)置頁面樣式運(yùn)行效果/*設(shè)置頁面整體背景顏色*/page{background-color:#ECC0A8;}/*設(shè)置圖片的樣式*/.avatar{width:200rpx;height:200rpx;border-radius:50%;}/*設(shè)置文本的樣式*/.motto{margin-top:100rpx;font-size:32rpx;font-weight:bold;color:#9F4311;}小程序頁面創(chuàng)建步驟3-配置頁面步驟三：在json配置文件中配置頁面運(yùn)行效果{"usingComponents":{},"backgroundColor":"#eeeeee","navigationBarBackgroundColor":"#ECC0A8","navigationBarTitleText":"基本組件使用測試演示"}Welcome頁面構(gòu)建-需求代碼演示W(wǎng)elcome頁面構(gòu)建-實(shí)現(xiàn)思路Welcome頁面構(gòu)建思路：1、在page目錄創(chuàng)建welcome目錄，并創(chuàng)建page頁面；2、在welcome.wxml文件編寫頁面結(jié)構(gòu)，根據(jù)需求分析這里頁面構(gòu)建組件：view組件、text組件、image組件；3、在welcome.wxss文件編寫對應(yīng)樣式，頁面使用flex布局；4、在welcome.json文件配置導(dǎo)航背景顏色和導(dǎo)航標(biāo)題樣式微信小程序編譯與測試完成頁面開發(fā)，微信開發(fā)工具提供在真機(jī)測試方式：1、二維