微信小程序培訓(xùn)課件

1、微信小程序微信小程序第1頁小程序包含一個(gè)描述整體程序 app 和多個(gè)描述各自頁面 page。一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項(xiàng)目標(biāo)根目錄，以下：app.jsapp.jsonapp.wxss必需小程序邏輯必需小程序公共設(shè)置非必需小程序公共樣式微信小程序第2頁一個(gè)小程序頁面由四個(gè)文件組成，分別是：（頁面這四個(gè)文件必須含有相同路徑與文件名）js必需頁面邏輯wxml必需頁面結(jié)構(gòu)wxss非必需頁面樣式j(luò)son非必需頁面配置微信小程序第3頁app.json 配置pages必需頁面路徑window非必需頁面窗口表現(xiàn)tabBar非必需設(shè)置tabdebug非必需能夠在開發(fā)者工具中開啟 debug 模式

2、networkTimeout非必需設(shè)置各種網(wǎng)絡(luò)請(qǐng)求超時(shí)時(shí)間微信小程序第4頁pages數(shù)組形式，每一項(xiàng)對(duì)應(yīng)一個(gè)頁面【路徑+文件名】。 不需要后綴名。微信小程序第5頁window用于設(shè)置小程序狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色navigationBarBackgroundColor：導(dǎo)航欄背景顏色 （十六進(jìn)制）navigationBarTextStyle：導(dǎo)航標(biāo)題顏色（僅支持black/white）navigationBarTitleText：導(dǎo)航標(biāo)題backgroundColor：窗口背景色（十六進(jìn)制）backgroundTextStyle：下拉背景字體、loading 圖樣式，僅支持 dark/

3、lightenablePullDownRefresh：是否開啟下拉刷新微信小程序第6頁tabBartabBar 是一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè) tab，tab 按數(shù)組次序排序。color： tab 上文字默認(rèn)顏色（十六進(jìn)制）selectedColor ： tab 上文字選中時(shí)顏色（十六進(jìn)制）backgroundColor ： tab 背景色（十六進(jìn)制）borderStyle ： tabbar上邊框顏色， 僅支持 black/whitelist ：數(shù)組pagePath：頁面路徑，必須在 pages 中先定義text： tab 上按鈕文字iconPath：圖片路徑，icon 大小限制為40

4、kbselectedIconPath：選中時(shí)圖片路徑，icon 大小限制為40kb微信小程序第7頁tabBarposition ：可選值 bottom（默認(rèn)）、top微信小程序第8頁app.js App()App()函數(shù)用來注冊(cè)一個(gè)小程序。接收一個(gè) object 參數(shù)，其指定小程序生命周期函數(shù)等。全局getApp()函數(shù)，能夠獲取到小程序?qū)嵗齩nLaunch ：當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次） onShow ：當(dāng)小程序開啟，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow onHide ：當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide onError ：當(dāng)小程序發(fā)生腳本

5、錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息其它：開發(fā)者能夠添加任意函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用this能夠訪問微信小程序第9頁P(yáng)agePage()函數(shù)用來注冊(cè)一個(gè)頁面。接收一個(gè) object 參數(shù)，其指定頁面初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。data：頁面初始數(shù)據(jù)onLoad：頁面加載onReady：監(jiān)聽頁面首次渲染完成onShow ：監(jiān)聽頁面顯示onHide ：監(jiān)聽頁面隱藏onUnload：監(jiān)聽頁面卸載onPullDownRefresh：監(jiān)聽用戶下拉動(dòng)作onReachBottom：頁面上拉觸底事件處理函數(shù)onShareAppMessage ：用戶點(diǎn)

6、擊右上角分享 微信小程序第10頁P(yáng)age setData()setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)this.data值。微信小程序第11頁WXMLWXML（WeiXin Markup Language）是框架設(shè)計(jì)一套標(biāo)簽語言，用于描述頁面結(jié)構(gòu)。基本綁定邏輯判斷for循環(huán) 微信小程序第12頁WXSSWXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 組件樣式尺寸單位：rpx，能夠依據(jù)屏幕寬度進(jìn)行自適應(yīng)。1rpx = 0.5px（iphone6）。import語句能夠?qū)胪饴?lián)樣式表相對(duì)路徑，用;表示語句結(jié)束。組件上支持使用 style、cl

7、ass 屬性來控制組件樣式。選擇器.class#idelementelement,element:after：組件后面:before：組件前面微信小程序第13頁組件一個(gè)組件通常包含開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個(gè)組件全部組件和屬性都是小寫基本屬性：idclassstylehiddendata-*：自定義屬性，以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType寫法bind*/catch*：綁定事件微信小程序第14頁組件data-alpha-

8、beta alphaBetadata-alphaBetaalphabeta微信小程序第15頁組件視圖容器view：基本視圖scroll-view：滾動(dòng)視圖swiper：滑塊視圖表單組件buttoncheckforminputpickerslidertextarea微信小程序第16頁組件導(dǎo)航navigator基礎(chǔ)內(nèi)容icontextprogress媒體audioimagevideo其它（畫布、地圖、客服）微信小程序第17頁組件scroll-viewscroll-x(y)：橫向（縱向）滾動(dòng)scroll-top(left) ：設(shè)置豎向（橫向）滾動(dòng)條位置scroll-into-view：值應(yīng)為某子元素

9、id，則滾動(dòng)到該元素，元素頂部對(duì)齊滾動(dòng)區(qū)域頂部bindscrolltoupper：滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件bindscrolltolower：滾動(dòng)到底部/右邊，會(huì)觸發(fā) scrolltolower 事件bindscroll：滾動(dòng)時(shí)觸發(fā)微信小程序第18頁組件button屬性size：有效值 default, minitype：按鈕樣式類型，有效值 primary, default, warnplain：按鈕是否鏤空，背景色透明disabled：是否禁用loading：名稱前是否帶 loading 圖標(biāo)form-type：有效值：submit, reset，用于組件

10、，點(diǎn)擊分別會(huì)觸發(fā) submit/reset 事件hover-class：指定按鈕按下去樣式類。當(dāng)hover-class=none時(shí)，沒有點(diǎn)擊態(tài)效果微信小程序第19頁組件input value：輸入框初始內(nèi)容type：input 類型，有效值：text, number, idcard, digitpassword：是否是密碼類型placeholder：占位符placeholder-style（placeholder-class）：指定placeholder樣式disabled：是否禁用maxlength：最大輸入長度，設(shè)置為 -1 時(shí)候不限制最大長度focus：獲取焦點(diǎn)微信小程序第20頁組件in

11、put bindinput：當(dāng)鍵盤輸入時(shí)，觸發(fā)input事件，event.detail = value: value，處理函數(shù)能夠直接 return 一個(gè)字符串，將替換輸入框內(nèi)容bindfocus：輸入框聚焦時(shí)觸發(fā)，event.detail = value: valuebindblur：輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = value: valuebindconfirm：點(diǎn)擊完成按鈕時(shí)觸發(fā)，event.detail = value: value微信小程序第21頁APIwx.request：發(fā)起網(wǎng)絡(luò)請(qǐng)求wx.setStorageSync(key，value)：同時(shí)存放到當(dāng)?shù)鼐彺嬷羕ey中wx.getStorageSync(key)：同時(shí)獲取key對(duì)應(yīng)內(nèi)容wx.removeStorageSync(ke