小程序巧應(yīng)用,微信小程序開發(fā)實戰(zhàn)
配置
app.json
- pages -> 所有的頁面
- window -> 窗口的屬性
- "navigtionBarBackgroundColor":"#00000" ->導(dǎo)航欄背景顏色
- "navgationBarTextStyle":"black/white" -> 導(dǎo)航欄標(biāo)題顏色
- "navgationBarTitleText":"標(biāo)題" -> 導(dǎo)航欄文字
- "backgroundColor":"#ffffff" -> 窗口的背景色
- "backgroundTextStyle":"dark/light" -> 下拉背景字體,loading的樣式
- "enablePullDownRefresh":"false" -> 是否下拉刷新
- tabBar -> bottomNav
- 是一個list列表,最少2個,最多5個.
"tabBar": {"list": [{"pagePath": "pages/index/index", "text": "首頁"}, {"pagePath": "pages/logs/logs", "text": "日志"}] },
- list對象中支持 pagePath,text,iconPath,selectedIconPath(選中icon的圖片路徑)
- 是一個list列表,最少2個,最多5個.
- "debug" -> true(默認(rèn)是false)
- networkTimeout ->
- "request":30000 -> wx.request超時時間
- "connectSocket":30000 -> wx.connectSocket 超時時間
- "uploadFile":30000 -> wx.uploadFile超時時間
- "downloadFile":3000 -> wx.downloadFile 超時時間
邏輯層
app.js
app({ function,function })
onLaunch -> 觸發(fā)一次,初始化
onShow -> 啟動/后臺切換到前臺 會觸發(fā)onShow
onHide -> 進入后臺
onError ->
可以添加任意函數(shù),用this可以訪問(在
app()
中this可以拿到app實例)全局的
getApp()
globalData:{}
全局參數(shù) (類型Object)
page.js
page({ data:{},xx:funcation{} })
data -> 頁面初始數(shù)據(jù) (類型Object)
-
onLoad -> 生命周期-頁面加載
-
options
可以獲取wx.navigateTo
和wx.redirectTo
以及<navigator/>
中的query
-
-
onReady -> 生命周期-初次渲染完成
-
wx.setNavigationBarTitle
在onReady
之后調(diào)用
-
onShow -> 生命周期-頁面顯示
-
onHide -> 生命周期-頁面隱藏
- navigateTo或者底部進行tab切換時調(diào)用
onUnload -> 生命周期-頁面卸載
-
onPullDownRefreash -> 監(jiān)聽用戶下拉
- 需要在page.json中開啟enablePullDownRefresh
onReachBottom -> 頁面上拉觸底事件的處理函數(shù)
-
onShareAppMessage -> 點擊右上角分享
- 只有定義了此事件,右上角才會顯示分享
- 需要return一個Object
return{}
可以添加任意函數(shù),用this可以訪問
-
事件處理函數(shù)
-
<view bindtap="viewTap"></view>
page({ viewTap:funcation(){console.loag('somethin')} })
-
-
getCurrentPage()
獲取當(dāng)前頁面棧的實例,返回的是一個數(shù)組- 第一個是首頁
- 最后一個是當(dāng)前頁面
-
路由相關(guān)
- wx.navigateTo(Object) 保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
- wx.redirectTo(onject)關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
- wx.navigateBack()關(guān)閉當(dāng)前頁面
-
在page()中使用setData函數(shù)將數(shù)據(jù)從邏輯層發(fā)送到視圖層,同時改變對應(yīng)的this.data的值
- this是包含它的函數(shù)作為方法被調(diào)用時所屬的對象,在小程序中一般指調(diào)用頁面
- 我的理解是在data中定義value,在<view>中引用value,通過bindtap綁定方法,然后可以通過setData改變value的值,進而改變,view中的value
- 上面這條未測試
公共代碼可以抽出來,通過
module.exports={xx:funcation}
暴露出來才能使用var common = require('common.js')
微信原生Api
下面有單獨的模塊來展示
微信原生API有八大類,網(wǎng)絡(luò)/媒體/文件.數(shù)據(jù)緩存/位置/設(shè)備/界面/微信開發(fā)接口
視圖層
.wxml 與 .wxss結(jié)合
WXML
數(shù)據(jù)綁定
數(shù)據(jù)綁定 <view>{{message}}</view>
Page({ data:{message:'Hello'} })
- 簡單綁定
- 尖括號外面:使用Mustache語法{{}}將變量包起來
- 組件屬性(尖括號里面):需要在雙引號之內(nèi)
- 控制屬性(尖括號里面):例如下面的事件綁定中if后面的
- 運算
- 三元運算符
<view hidden="{{flag?true:false}}"></view>
- 算數(shù),可以做正常的運算
- 邏輯判斷
- 字符串拼接
- 三元運算符
- 組合
- 數(shù)組
- 對象
- 擴展運算符,可以將Object展開顯示
列表渲染
列表渲染 <view wx:for="{{array}}">{{item}}</view>
Page({ data:{array:[1,2,3,4,5]}})
- 也可以使用<block/>屬性
- wx.key -> 列表中的位置會動態(tài)改變,或者有新的項目添加到列表中,希望列表中的項目保持自己的特征和狀態(tài) 233頁中有示例代碼
條件渲染
條件渲染 <view if="{{view=='WEBVIEW'}}">WEBVIEW</view>
<view elif="{{view=='APP'}}">APP</view>
<view else="{{view=='MINA'}}">MINA</view>
Page({data:{view:'MINA'}})
- <block/>可以包裹多個組件,在<block/>屬性中添加條件判斷.<block/>不是一個組件,是一個包裝元素,在頁面中不做任何渲染,只是接受控制屬性
- wx:if與hidden的區(qū)別 : wx:if -> 是惰性的,如果初始渲染條件是false,框架什么也不做,在條件第一次變成真的時候才開始局部渲染. hidden初始就會被渲染. 頻繁切換判斷情景下用hidden,否則wx:if
模板
模板 <template> 這個 -> 在模板中定義代碼片段,在其他地方調(diào)用
- is聲明需要使用的模板
- 模板有自己的作用域,只能使用data傳入數(shù)據(jù)
事件綁定
事件綁定 <view bindtap="add">{{count}}</view>
Page({ data:{count:1}, add:funchtion(e){this.setData({count:this.data.count+1})} })
- 視圖層到邏輯層的通信方式,事件可以將用戶行為反饋到邏輯層處理
- 冒泡事件 : 當(dāng)組件被觸發(fā)后,該事件會向父節(jié)點傳遞
- touchstart -> 手指觸摸
- touchmove -> 手指觸摸后移動
- touchcancel -> 手指觸摸動作被打斷(來電提醒,彈窗)
- touchend -> 手指觸摸動作結(jié)束
- tap -> 手指觸摸后離開
- longtap -> 手指觸摸后,超過350ms再離開
- 非冒泡事件
- 除上面6個之外,其他組件自定義事件都是非冒泡事件
-
<form/>
的submit -
<input/>
的input -
<scroll-view/>
的scroll
- 事件綁定的寫法同組件的屬性,以key,value的形式(key以bind或catch開頭,如bindtap,catchtouchstart)(value是字符串,需要在page中定義同名函數(shù))
- bind事件不會阻止冒泡事件向上冒泡,catch會阻止
- 事件觸發(fā)的時候,邏輯層會受到一個事件對象
- type(String) -> 事件類型
- timeStamp(Integer) -> 事件生成時間
- target(Object) -> 觸發(fā)事件組件的一些屬性集合(id:事件組件ID,tagName:事件組件的類型,dataset:事件組件上有data-開頭的自定義屬性組成的集合)
- currentTarget(Object) -> 當(dāng)前組件的屬性集合
- touches(Array) -> 觸摸事件,當(dāng)前停留在屏幕中觸摸點信息的數(shù)組
- changedTouches(Array) -> 觸摸事件,當(dāng)前變化的觸摸點信息的數(shù)組
- detail(Object) -> 課外的信息
引用
引用
- import,會引用目標(biāo)文件中定義的template
- incloud,可將目標(biāo)文件除模板代碼 (<template/>)塊的所有代碼引入娱俺,相當(dāng)于拷貝到 include位置
WXSS
- 使用@import語句來導(dǎo)入外聯(lián)樣式表
- wxss 選擇器???/ .class #id element element,element ::after ::before 251頁
- rpx單位,iphone6尺寸設(shè)計
- 所有組件都有的共同屬性
- id(String) -> 唯一標(biāo)識
- class(String) -> 樣式
- style(String) -> 內(nèi)聯(lián)樣式
- hidden(Boolean) -> 是否顯示
- data-*(Any) -> 自定義屬性,組件上觸發(fā)事件時,會發(fā)送給事件處理函數(shù)
- bind* / catch*(EventHandler) -> 組件事件
組件
視圖容器組件
- view -> 相當(dāng)于<div>
- hover(Boolean) -> 是否啟用點擊
- hover-class(String) -> 點擊效果
- hover-start-time(Number) -> 多久出現(xiàn)點擊效果
- hover-stay-time(Number) -> 手指松開后點擊效果保留時間
- scroll-view
- scroll-x(Boolean) -> 允許橫向滾動
- scroll-y(Boolean) -> 允許縱向滾動
- upper-threshole(Number) -> 默認(rèn)值50 距離top/left多遠(px),觸發(fā)scrolltoupper事件
- lower-threshold(Number) -> 默認(rèn)值50 距離bottom/right多遠(px),觸發(fā)scrolltoupper事件
- scroll-top(Number) -> 設(shè)置豎向滾動條的位置
- scroll-left(Number) -> 設(shè)置橫向滾動條的位置
- scroll-into-view(String) -> 值為某個子元素的id,滾動到該元素,元素頂部對齊滾動區(qū)域頂部
- bindscrolltoupper(EventHandle) -> 滾動到top/left ,觸發(fā)scrolltoupper事件
- bindscrolltoupper(EventHandle) -> 滾動到bottom/right ,觸發(fā)scrolltoupper事件
- bindscroll(EventHandle) -> 滾動時觸發(fā),event.detail={........}
- swiper 其中只可以放置<swiper-item/>組件
- indicator-dots(Boodlea) -> 是否顯示指示點
- indicator-color(Color) -> 默認(rèn)gba(0,0,0,0.3) 指示點顏色
- indicator-active-color(Color) -> 默認(rèn)#000000 指示點選中顏色
- autoplay(boolean) -> 自動
- current(Number) -> 當(dāng)前所在頁面的index
- interval(Number) -> 自動切換事件間隔
- duration(Number) -> 滑動動畫時長
- circular(Boolean) -> 是否采用銜接滑動
- bindchange(EventHandle) -> current改變時會觸發(fā)change事件,event.detail={current:current}
基礎(chǔ)內(nèi)容組件
- icon 圖標(biāo)組件
- type(String) -> icon的類型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
- size(Number) -> icon的大小(px),默認(rèn)是23
- color(Color) -> icon的顏色
- text
- progress 長的 進度條
- percent(Float) -> 0~100
- show-info(Boolean) -> 在進度條右側(cè)顯示百分比
- stroke-width(Number) -> 默認(rèn)值6 進度條的寬度
- color(Color) -> 進度條的顏色
- active(Boolean) -> 進度條從左到右的動畫
- 表單組件 button from input checkbox radio picker slider switch label
- button
- size(S) -> 有效值:default mini
- typr(S) -> 按鈕的樣式類型,有效值:primary,default,warn
- plain(Boolean) -> 按鈕是否鏤空,背景色透明
- disabled(Boolean) -> 是否禁用
- loading(B) -> 是否帶loading圖標(biāo)
- form-type(String) -> 有效值:submit,reset.用于<from>組件,點擊分別處罰submit/reset事件
- hover-class(String) -> 指定按鈕按下去的樣式類,當(dāng)為none時,表示沒有點擊效果
- hover-start-time(Number) -> 按住后對酒出現(xiàn)點擊態(tài)
- hover-stay-time(Number) -> 手指松開后點擊態(tài)保留時間
- checkbox-group 多項選擇器組件,內(nèi)部多個checkbox組成
- bindchange(Eventhandle) -> 觸發(fā)change事件,detail={value:[選中的checkbox的value的數(shù)組]}
- checkbox
- value(String) -> checkbox攜帶的value
- disabled(Boolean) -> 是否禁用
- checked(Boolean) -> 是否選中
- color(Color) -> checkbox的顏色
- from 為表單組件,用于提交用戶輸入的<switch> <input><checkbox><slider><radio><picker>
- report-submit(Boolean) -> 是否返回formId用于發(fā)送模板消息
- bindsubmit(EventHandle) -> 攜帶from中的數(shù)據(jù)出發(fā)submit事件,event.derail={value:{name:value},formId}
- bindreset(EventHandle) -> 表單重置時會觸發(fā)reset事件
- input 用戶輸入字段
- value(String)->輸入框內(nèi)容
- type(String)->類型,有效值:text,number,idcard,digit,time,date
- password(Boolean) -> 是否為密碼
- placeholder->占位
- placeholder-style ->指定placeholder樣式
- placeholder-class ->placeholder樣式類
- disabled->是否禁用
- maxlength->最大程度,默認(rèn)140,0為無限制
- cursor-spacing->光標(biāo)與鍵盤的距離
- focus->獲取焦點
- bindconfirm(EventHandle)->點擊完成按鈕觸發(fā),event.detail={value:value}
- bindinput->除了date/time,鍵盤輸入觸發(fā)event.detail={value:value},處理函數(shù)可以返回一個字符串,替換輸入框的內(nèi)容
- bindfocus->輸入框聚焦時觸發(fā)event.detail={value:value}
- bindblur->失去焦點時觸發(fā)event.detail={value:value}
- label 組件標(biāo)簽,可以綁定的標(biāo)簽<button><checkbox><radio><switch>.用來改進表單組件的可用性,支持使用for屬性找到對應(yīng)的id,或者將控件放在該標(biāo)簽下,用戶點擊時,會觸發(fā)對應(yīng)的控件.for的優(yōu)先級高于內(nèi)部控件,內(nèi)部多個控件時,默認(rèn)觸發(fā)第一個
- picker 普通選擇器,時間選擇器,日期選擇器
- 普通選擇器(mode=selector)
- range(Array/Object Array) -> model為selector時,range有效
- range-key(String) -> 當(dāng)range為Object Array時,可以通過range-key開指定Object中key的值作為選擇器的顯示內(nèi)容
- value(Number) -> model為selector時,是數(shù)字,表示選擇了range中的第幾個
- bindchange(Eventhandle) -> value改變時觸發(fā)change事件,event.detail={value:value}
- disable(B) -> 是否禁用
- 時間選擇器(mode-seletor) 格式 hh:mm
- value(S) -> 選中時間
- start(S) -> 有效時間范圍的開始
- end(S) -> 有效時間范圍的結(jié)束
- bindchange(Eventhandle) -> value改變時觸發(fā)change事件,event.detail={value:value}
- disable(B) -> 是否禁用
- 日期選擇器(mode=data) 格式 "yyy-MM-dd"
- value(S) -> 選中日期
- start(S) -> 有效日期范圍的開始
- end(S) -> 有效日期范圍的結(jié)束
- fields(S) -> 有效值year,month,day 表示選擇器的粒度
- bindchange(EventHandle) (S) -> 觸發(fā)事件
- disable(B) -> 是否禁用
- 普通選擇器(mode=selector)
- picker-view嵌入頁面的滾動選擇組件,其中只能放<picker-view-column>
- value(Number Array) -> 數(shù)組中的數(shù)字依舊表示picker-view內(nèi)的picker-view-colume選擇的第幾項(下標(biāo)從0開始),數(shù)字大于picker-view-column可選長度時,選擇最后一項
- indicator-style(S) -> 設(shè)置選擇器中間選中框的樣式
- bindchange(EventHandle) -> detail={value:value};value為數(shù)組,表示選擇第幾項
- radio-group 單項選擇器
- value
- checked(B) -> 是否選中
- disable(B) -> 是否禁用
- color
- slider 滑動選擇器
- min(N) -> 最小值 默認(rèn)0
- max(N) -> 最大值 默認(rèn)100
- step(N) -> 步長 默認(rèn)1
- value(N) -> 當(dāng)前取值 默認(rèn)0
- color -> 背景條顏色
- selected-color -> 已經(jīng)選擇的顏色
- show-value(B) -> 是否顯示當(dāng)前value
- bindchange -> 完成一次拖動后觸發(fā)的事件 event.detail={value:value}
- switch 開關(guān)
- checked(B) -> 是否選中
- type(S) -> 樣式:switch checkbox
- color
- bindchange(eventhandle) -> 事件event.detail={value:value}
- textarea 多行輸入控件,屬性太多了 318頁
互動操作組件
- action-sheet就是bottom Dialog
- modal 模態(tài)彈窗組件 Dialog
- title
- no-cancle(B) -> 是否隱藏cancel按鈕
- confirm-text(S) -> confirm按鈕文字
- cancel-text(S) -> cancel按鈕文字
- bindconfirm -> confirm觸發(fā)回調(diào)
- bindcancel -> cancel以及蒙層觸發(fā)回調(diào)
- toast
- duration
- bindchange -> duration延時后觸發(fā)
- loading
頁面導(dǎo)航組件
- vavigator
媒體組件
- image
- src(S) -> 圖片資源地址
- mode(S) -> 圖片裁剪,縮放的模式(縮放模式scaleToFill,aspectFit,aspectFill,widthFix)(裁剪模式Top,bottom,center,Left,right......等組件)
- binderro -> 圖片發(fā)生錯誤時
- bindload -> 圖片載入完畢
- audio 音頻組件
- video 視頻組件
地圖組件
畫布組件
WXML組件與HTML的差異
API接口的開發(fā)應(yīng)用
網(wǎng)絡(luò)API
wx.request(Object)發(fā)起https請求
wx.uploadfile(Object)上傳開發(fā)者服務(wù)器
wx.downloadFile(Object)下載文件到本地
wx.connectSocket(Object)創(chuàng)建WebSocket連接
wx.onSocketOpen(Callback)監(jiān)聽WebSocket連接打開事件
wx.onSocketError(Callback)監(jiān)聽WebSocket錯誤
wx.onSocketMessage(Callback)監(jiān)聽WebSocket接收到服務(wù)器的消息事件
wx.closeSocket()關(guān)閉WebSocket連接
wx.onSocketClose(Callback)監(jiān)聽WebSocket關(guān)閉
媒體API
- 圖片
- wx.chooseImage(Object) 本地選擇或者拍照
- wx.previewImage(Object) 預(yù)覽圖片
- wx.getImageInfo(Object) 獲取圖片信息
- 錄音API
- wx.startRecord(Object) 開始錄音
- wx.stopRecord(Object) 停止錄音
- 音頻播放控制API
- 音樂播放控制API
- 視頻API
文件API
- wx.saveFile(Object) 保存
- wx.getSavedFileInfo(Object) 獲取本地文件信息
- wx.removeSaveFile(Object) 刪除
- wx.openDocument(Object) 打開頁面文檔 (doc,xls,ppt,pdf,docx,xlsx,ppyx)
數(shù)據(jù)緩存API
- wx.setStorage(Object) 接口實現(xiàn)將數(shù)據(jù)存 儲在本地緩存中指定的key中被辑。
- wx.setStorageSync(Key,data) 接口實現(xiàn)將數(shù)據(jù)存 儲在本地緩存中指定的key中野揪。
- wx.getStorage(Object) 接口用于從本地緩 存中異步獲取指定key對應(yīng)的內(nèi)容昵观。
- wx.getStorageSync(Key) 接口用于從本地緩 存中同步獲取指定key對應(yīng)的內(nèi)容。
- wx.getStorageInfo(Object) 接口用于異步 獲取當(dāng)前storage的相關(guān)信息遗座。
- wx.getStorageInfoSync 接口用于同步獲取當(dāng)前 storage的相關(guān)信息驶兜。
- wx.removeStorage(OBJECT) 接口用于從本 地緩存中異步移除指定key扼仲。
- wx.removeStorageSync(KEY)接口用于從本 地緩存中同步移除指定key远寸。
- wx.clearStorage() 接口用于清理本地數(shù)據(jù)緩 存。
- wx.clearStorageSync()接口用于同步清理本 地數(shù)據(jù)緩存屠凶。
位置API
- wx.getLocation(OBJECT)獲取當(dāng)前的地理位
置驰后、速度。
wx.chooseLocation(OBJECT)接口用于打開 地圖選擇位置矗愧。
wx.openLocation(OBJECT)接口用于實現(xiàn)使 用微信內(nèi)置地圖查看位置灶芝。
wx.createMapContext(mapId)接口用于創(chuàng)建 map上下文對象mapContext。
設(shè)備信息API
wx.getNetworkType(OBJECT)接口用于獲取 網(wǎng)絡(luò)類型唉韭。
wx.getSystemInfo(OBJECT)接口用于獲取 系統(tǒng)信息监署。
wx.getSystemInfoSync()接口用于獲取系統(tǒng) 信息同步。
wx.onAccelerometerChange(CALLBACK)接
口監(jiān)聽重力感應(yīng)數(shù)據(jù)纽哥。
wx.onCompassChange(CALLBACK)接口實 現(xiàn)監(jiān)聽羅盤數(shù)據(jù)。
wx.makePhoneCall(OBJECT)接口用于撥打 電話栖秕。
wx.scanCode(OBJECT)接口用于調(diào)取客戶 端進行掃碼春塌。
界面API
交互API
- wx.showToast(OBJECT)接口用于顯示消息
提示框。
wx.hideToast()接口用于隱藏消息提示框簇捍。
wx.showModal(OBJECT)接口用于顯示模態(tài) 彈窗只壳。
wx.showActionSheet(OBJECT)用于顯示操 作菜單
頁面導(dǎo)航API
wx.setNavigationBarTitle(OBJECT):動態(tài) 設(shè)置當(dāng)前頁面的標(biāo)題。
wx.showNavigationBarLoading():接口實現(xiàn) 在當(dāng)前頁面顯示導(dǎo)航條加載動畫暑塑。
wx.hideNavigationBarLoading():接口實現(xiàn) 隱藏導(dǎo)航條加載動畫吼句。
wx.navigateTo(OBJECT):接口實現(xiàn)保留當(dāng) 前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面事格,使用 wx.navigateBack()可以返回到原頁面惕艳。
wx.redirectTo(OBJECT):接口實現(xiàn)關(guān)閉當(dāng) 前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面驹愚。
wx.switchTab(OBJECT):接口實現(xiàn)跳轉(zhuǎn) tabBar頁面并關(guān)閉其他所有非tabBar頁面远搪。
wx.navigateBack(OBJECT):接口實現(xiàn)關(guān)閉 當(dāng)前頁面,回退前一頁面或多級頁面逢捺∷ⅲ可通過 getCurrentPages())獲取當(dāng)前的頁面棧,決定需 要返回幾層劫瞳。
動畫API
- wx.createAnimation(OBJECT)倘潜, 接口用于實現(xiàn)創(chuàng)建動畫,并在通過相應(yīng)方法在頁面 上描述動畫過程
繪圖API
其他API
wx.hideKeyboard()接口用于收起鍵盤志于。
wx.stopPullDownRefresh()接口用于停止當(dāng)前頁面下拉刷新涮因。
Page.onPullDownRefresh是在Page方法中定義 的onPullDownRefresh處理函數(shù),以監(jiān)聽該頁面用戶 下拉刷新的事件恨憎。需要在頁面json文件的window配 置項中開啟enablePullDownRefresh蕊退。當(dāng)處理完數(shù)據(jù) 刷新后郊楣,使用wx.stopPullDownRefresh()就可以 停止當(dāng)前頁面的下拉刷新。
開放API
wx.login(OBECT)接口用于獲取登錄憑證 (code)及用戶登錄態(tài)信息瓤荔。
wx.checkSession(OBJECT)接口用于檢查登錄態(tài)是否過期净蚤。
wx.getUserInfo(OBJECT)接口用于獲取用戶信息,需要先調(diào)用wx.login接口输硝。
wx.requestPayment(OBJECT)接口用于發(fā)起微信支付今瀑。
模板消息接口用于給用戶發(fā)送如通知類的模板消息。
客戶消息接口用于客服會話消息的接收與發(fā)送点把。