一、認(rèn)識(shí)小程序
1.什么是小程序?
小程序是一種不需要下載蔗草,安裝即可使用的應(yīng)用
2.小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別?
①運(yùn)行的環(huán)境不同
網(wǎng)頁(yè)是在瀏覽器環(huán)境中疆柔,小程序是在微信環(huán)境中
②API不同
由于運(yùn)行環(huán)境不同咒精,小程序中無(wú)法調(diào)用DOM、BOM旷档、API模叙,但是小程序中可以調(diào)用微信環(huán)境中的各種API,例如:地理定位 鞋屈、掃碼范咨、支付
③開(kāi)發(fā)模式不同
網(wǎng)頁(yè)的開(kāi)發(fā)模式:瀏覽器+代碼編輯器;
小程序有自己的一套標(biāo)準(zhǔn)開(kāi)發(fā)模式
申請(qǐng)小程序開(kāi)發(fā)賬號(hào)==>安裝小程序開(kāi)發(fā)者工具==>創(chuàng)建和配置小程序項(xiàng)目厂庇;
④標(biāo)簽不同
網(wǎng)頁(yè)標(biāo)簽:div渠啊、span、img等
小程序標(biāo)簽:view权旷、text替蛉、image等
3.項(xiàng)目的基本組成結(jié)構(gòu)
①pages用來(lái)存放所有小程序的頁(yè)面
(小程序官方建議把所有的小程序頁(yè)面,都存放在 pages 目錄中,每個(gè)頁(yè)面以單獨(dú)的文件夾存在)
②utils用來(lái)存放工具性質(zhì)的模塊
③app.js小程序項(xiàng)目的入口文件
(.js 文件 -- 頁(yè)面的腳本文件灭返,存放頁(yè)面的數(shù)據(jù)盗迟、事件處理函數(shù)、生命周期等)
④app.json小程序項(xiàng)目的全局配置文件
(.json 文件 -- 當(dāng)前頁(yè)面的配置文件熙含,配置頁(yè)面的外觀罚缕、表現(xiàn)等)
⑤app.wxss小程序項(xiàng)目的全局樣式
⑥proiect.config.json項(xiàng)目的配置文件
⑦sitemap.json用來(lái)配置小程序以及頁(yè)面是否被微信搜到
二、項(xiàng)目說(shuō)明與知識(shí)點(diǎn)
1怎静、如何將小程序頁(yè)面設(shè)置為首頁(yè)
①調(diào)整app.json/pages數(shù)組中頁(yè)面路徑的前后順序邮弹,即可修改項(xiàng)目的首頁(yè)
②在app.json配置一個(gè)新的節(jié)點(diǎn)entryPagePath接口
2、什么是WXML蚓聘?
它是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言(組件)腌乡,用來(lái)構(gòu)件小程序頁(yè)面的結(jié)構(gòu),作用類(lèi)似于網(wǎng)頁(yè)開(kāi)發(fā)中的HTML
3夜牡、wxss和css的區(qū)別与纽?
①wxcss新增了rpx尺寸單位,css中需要手動(dòng)進(jìn)行像素單位的換算塘装,如:rem
②wxss在底層支持新的尺寸單位rpx,在不同大小的屏幕上小程序會(huì)自動(dòng)進(jìn)行換算
③wxss僅支持部分css選擇器(.class和#id急迂、element、并集選擇器和后代選擇器蹦肴、::after和 ::before等偽類(lèi)選擇器)
④@import
4.小程序中JS文件的三大類(lèi)
①app.js是整個(gè)小程序項(xiàng)目的入口文件僚碎,通過(guò)調(diào)用App()函數(shù)來(lái)創(chuàng)建小程序頁(yè)面,并運(yùn)行小程序頁(yè)面
②頁(yè)面的.js文件是頁(yè)面的入口文件阴幌,通過(guò)調(diào)用Page ( )函數(shù)來(lái)創(chuàng)建小程序需的頁(yè)面勺阐,并運(yùn)行小程序
③普通的.js文件是普通的功能模塊文件,用來(lái)封裝公共的函數(shù)或?qū)傩怨╉?yè)面使用
5.小程序宿主環(huán)境包含的內(nèi)容矛双?
通信模型渊抽、運(yùn)行機(jī)制、組件背零、API
6.小程序的通信主體腰吟?
渲染層和邏輯層(WXML和WXSS樣式工作在渲染層,JS腳本工作在邏輯層)
7.小程序的通信模型徙瓶?
①渲染層 和 邏輯層 之間的通信------由微信客戶端進(jìn)行轉(zhuǎn)發(fā)
②邏輯層 和 第三方服務(wù)器 之間的通信------由微信客戶端進(jìn)行轉(zhuǎn)發(fā)
8.小程序的啟動(dòng)過(guò)程毛雇?
①把小程序的代碼包下載到本地,從緩存中拿代碼包
②解析app.json全局配置文件
③執(zhí)行app.js小程序入口文件侦镇,調(diào)用App()創(chuàng)建小程序?qū)嵗?/p>
④渲染小程序首頁(yè)
⑤小程序啟動(dòng)完成
9.頁(yè)面渲染的過(guò)程灵疮?
①加載解析頁(yè)面的json文件
②加載頁(yè)面的.wxml模板和.wxss樣式
③執(zhí)行頁(yè)面的.js文件,調(diào)用Page()創(chuàng)建頁(yè)面實(shí)例
④頁(yè)面渲染完成
10.微信給小程序都提供了哪些組件壳繁?
① 視圖容器? ? ② 基礎(chǔ)內(nèi)容? ? ③ 表單組件? ? ④ 導(dǎo)航組件? ? ⑤ 媒體組件 ⑥ map 地圖組件 ⑦? canvas 畫(huà)布組件 ⑧ 開(kāi)發(fā)能力? ⑨ 無(wú)障礙訪問(wèn)
11.常用的視圖容器類(lèi)組件?
①view 組件?
②scroll-view 組件?
③swiper 和 swiper-item 組件
④text(類(lèi)似于 HTML 中的 span 標(biāo)簽震捣,是一個(gè)行內(nèi)元素) 和 rich-text 組件(支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu))
⑤button 按鈕組件(通過(guò) open-type 屬性可以調(diào)用微信提供的各種功能(客服荔棉、轉(zhuǎn)發(fā)、獲取用戶授權(quán)蒿赢、獲取用戶信息等))
⑥image圖片組件(image 組件默認(rèn)寬度約為 300px 润樱、高度為 240px)
src --? 支持本地和網(wǎng)絡(luò)上的圖片
mode -- 指定圖片的裁剪、縮放的模式