微信小程序培訓課件

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

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

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

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

5、錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息其它：開發(fā)者能夠添加任意函數(shù)或數(shù)據(jù)到 Object 參數(shù)中，用this能夠訪問微信小程序第9頁PagePage()函數(shù)用來注冊一個頁面。接收一個 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)聽用戶下拉動作onReachBottom：頁面上拉觸底事件處理函數(shù)onShareAppMessage ：用戶點

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

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

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

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

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

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