小程序巧應用，微信小程序開發(fā)實戰(zhàn)

配置

app.json

• pages -> 所有的頁面
• window -> 窗口的屬性
  • "navigtionBarBackgroundColor":"#00000" ->導航欄背景顏色
  • "navgationBarTextStyle":"black/white" -> 導航欄標題顏色
  • "navgationBarTitleText":"標題" -> 導航欄文字
  • "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的圖片路徑)
• "debug" -> true(默認是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ù)據 (類型Object)

• onLoad -> 生命周期-頁面加載

  • options可以獲取wx.navigateTo和wx.redirectTo以及<navigator/>中的query

• onReady -> 生命周期-初次渲染完成

  • wx.setNavigationBarTitle在onReady之后調用

• onShow -> 生命周期-頁面顯示

• onHide -> 生命周期-頁面隱藏

  • navigateTo或者底部進行tab切換時調用

• 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() 獲取當前頁面棧的實例,返回的是一個數(shù)組

  • 第一個是首頁
  • 最后一個是當前頁面

• 路由相關

  • wx.navigateTo(Object) 保留當前頁面,跳轉到應用內的某個頁面
  • wx.redirectTo(onject)關閉當前頁面,跳轉到應用內的某個頁面
  • wx.navigateBack()關閉當前頁面

• 在page()中使用setData函數(shù)將數(shù)據從邏輯層發(fā)送到視圖層,同時改變對應的this.data的值

  • this是包含它的函數(shù)作為方法被調用時所屬的對象,在小程序中一般指調用頁面
  • 我的理解是在data中定義value,在<view>中引用value,通過bindtap綁定方法,然后可以通過setData改變value的值,進而改變,view中的value
  • 上面這條未測試

• 公共代碼可以抽出來,通過module.exports={xx:funcation}暴露出來才能使用 var common = require('common.js')

微信原生Api

下面有單獨的模塊來展示

微信原生API有八大類,網絡/媒體/文件.數(shù)據緩存/位置/設備/界面/微信開發(fā)接口

視圖層

.wxml 與 .wxss結合

WXML

數(shù)據綁定

數(shù)據綁定 <view>{{message}}</view> Page({ data:{message:'Hello'} })

• 簡單綁定
  • 尖括號外面:使用Mustache語法{{}}將變量包起來
  • 組件屬性(尖括號里面):需要在雙引號之內
  • 控制屬性(尖括號里面):例如下面的事件綁定中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> 這個 -> 在模板中定義代碼片段,在其他地方調用

• is聲明需要使用的模板
• 模板有自己的作用域,只能使用data傳入數(shù)據

事件綁定

事件綁定 <view bindtap="add">{{count}}</view> Page({ data:{count:1}, add:funchtion(e){this.setData({count:this.data.count+1})} })

• 視圖層到邏輯層的通信方式,事件可以將用戶行為反饋到邏輯層處理
• 冒泡事件 : 當組件被觸發(fā)后,該事件會向父節(jié)點傳遞
  • touchstart -> 手指觸摸
  • touchmove -> 手指觸摸后移動
  • touchcancel -> 手指觸摸動作被打斷(來電提醒,彈窗)
  • touchend -> 手指觸摸動作結束
  • 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) -> 當前組件的屬性集合
  • touches(Array) -> 觸摸事件,當前停留在屏幕中觸摸點信息的數(shù)組
  • changedTouches(Array) -> 觸摸事件,當前變化的觸摸點信息的數(shù)組
  • detail(Object) -> 課外的信息

引用

引用

• import,會引用目標文件中定義的template
• incloud,可將目標文件除模板代碼 (<template/>)塊的所有代碼引入，相當于拷貝到 include位置

WXSS

• 使用@import語句來導入外聯(lián)樣式表
• wxss 選擇器???/ .class #id element element,element ::after ::before 251頁
• rpx單位,iphone6尺寸設計
• 所有組件都有的共同屬性
  • id(String) -> 唯一標識
  • class(String) -> 樣式
  • style(String) -> 內聯(lián)樣式
  • hidden(Boolean) -> 是否顯示
  • data-*(Any) -> 自定義屬性,組件上觸發(fā)事件時,會發(fā)送給事件處理函數(shù)
  • bind* / catch*(EventHandler) -> 組件事件

組件

視圖容器組件

• view -> 相當于<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) -> 默認值50 距離top/left多遠(px),觸發(fā)scrolltoupper事件
  • lower-threshold(Number) -> 默認值50 距離bottom/right多遠(px),觸發(fā)scrolltoupper事件
  • scroll-top(Number) -> 設置豎向滾動條的位置
  • scroll-left(Number) -> 設置橫向滾動條的位置
  • 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) -> 默認gba(0,0,0,0.3) 指示點顏色
  • indicator-active-color(Color) -> 默認#000000 指示點選中顏色
  • autoplay(boolean) -> 自動
  • current(Number) -> 當前所在頁面的index
  • interval(Number) -> 自動切換事件間隔
  • duration(Number) -> 滑動動畫時長
  • circular(Boolean) -> 是否采用銜接滑動
  • bindchange(EventHandle) -> current改變時會觸發(fā)change事件,event.detail={current:current}

基礎內容組件

• icon 圖標組件
  • type(String) -> icon的類型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
  • size(Number) -> icon的大小(px),默認是23
  • color(Color) -> icon的顏色
• text
• progress 長的 進度條
  • percent(Float) -> 0~100
  • show-info(Boolean) -> 在進度條右側顯示百分比
  • stroke-width(Number) -> 默認值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圖標
  • form-type(String) -> 有效值:submit,reset.用于<from>組件,點擊分別處罰submit/reset事件
  • hover-class(String) -> 指定按鈕按下去的樣式類,當為none時,表示沒有點擊效果
  • hover-start-time(Number) -> 按住后對酒出現(xiàn)點擊態(tài)
  • hover-stay-time(Number) -> 手指松開后點擊態(tài)保留時間
• checkbox-group 多項選擇器組件,內部多個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ù)據出發(fā)submit事件,event.derail={value:{name:value},formId}
  • bindreset(EventHandle) -> 表單重置時會觸發(fā)reset事件
• input 用戶輸入字段
  • value(String)->輸入框內容
  • type(String)->類型,有效值:text,number,idcard,digit,time,date
  • password(Boolean) -> 是否為密碼
  • placeholder->占位
  • placeholder-style ->指定placeholder樣式
  • placeholder-class ->placeholder樣式類
  • disabled->是否禁用
  • maxlength->最大程度,默認140,0為無限制
  • cursor-spacing->光標與鍵盤的距離
  • focus->獲取焦點
  • bindconfirm(EventHandle)->點擊完成按鈕觸發(fā),event.detail={value:value}
  • bindinput->除了date/time,鍵盤輸入觸發(fā)event.detail={value:value},處理函數(shù)可以返回一個字符串,替換輸入框的內容
  • bindfocus->輸入框聚焦時觸發(fā)event.detail={value:value}
  • bindblur->失去焦點時觸發(fā)event.detail={value:value}
• label 組件標簽,可以綁定的標簽<button><checkbox><radio><switch>.用來改進表單組件的可用性,支持使用for屬性找到對應的id,或者將控件放在該標簽下,用戶點擊時,會觸發(fā)對應的控件.for的優(yōu)先級高于內部控件,內部多個控件時,默認觸發(fā)第一個
• picker 普通選擇器,時間選擇器,日期選擇器
  • 普通選擇器(mode=selector)
    • range(Array/Object Array) -> model為selector時,range有效
    • range-key(String) -> 當range為Object Array時,可以通過range-key開指定Object中key的值作為選擇器的顯示內容
    • 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) -> 有效時間范圍的結束
    • bindchange(Eventhandle) -> value改變時觸發(fā)change事件,event.detail={value:value}
    • disable(B) -> 是否禁用
  • 日期選擇器(mode=data) 格式 "yyy-MM-dd"
    • value(S) -> 選中日期
    • start(S) -> 有效日期范圍的開始
    • end(S) -> 有效日期范圍的結束
    • fields(S) -> 有效值year,month,day 表示選擇器的粒度
    • bindchange(EventHandle) (S) -> 觸發(fā)事件
    • disable(B) -> 是否禁用
• picker-view嵌入頁面的滾動選擇組件,其中只能放<picker-view-column>
  • value(Number Array) -> 數(shù)組中的數(shù)字依舊表示picker-view內的picker-view-colume選擇的第幾項(下標從0開始),數(shù)字大于picker-view-column可選長度時,選擇最后一項
  • indicator-style(S) -> 設置選擇器中間選中框的樣式
  • bindchange(EventHandle) -> detail={value:value};value為數(shù)組,表示選擇第幾項
• radio-group 單項選擇器
  • value
  • checked(B) -> 是否選中
  • disable(B) -> 是否禁用
  • color
• slider 滑動選擇器
  • min(N) -> 最小值 默認0
  • max(N) -> 最大值 默認100
  • step(N) -> 步長 默認1
  • value(N) -> 當前取值 默認0
  • color -> 背景條顏色
  • selected-color -> 已經選擇的顏色
  • show-value(B) -> 是否顯示當前value
  • bindchange -> 完成一次拖動后觸發(fā)的事件 event.detail={value:value}
• switch 開關
  • 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ā)回調
  • bindcancel -> cancel以及蒙層觸發(fā)回調
• toast
  • duration
  • bindchange -> duration延時后觸發(fā)
• loading

頁面導航組件

• vavigator

媒體組件

• image
  • src(S) -> 圖片資源地址
  • mode(S) -> 圖片裁剪,縮放的模式(縮放模式scaleToFill,aspectFit,aspectFill,widthFix)(裁剪模式Top,bottom,center,Left,right......等組件)
  • binderro -> 圖片發(fā)生錯誤時
  • bindload -> 圖片載入完畢
• audio 音頻組件
• video 視頻組件

地圖組件

畫布組件

WXML組件與HTML的差異

API接口的開發(fā)應用

網絡API

• wx.request(Object)發(fā)起https請求

• wx.uploadfile(Object)上傳開發(fā)者服務器

• 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接收到服務器的消息事件

• wx.closeSocket()關閉WebSocket連接

• wx.onSocketClose(Callback)監(jiān)聽WebSocket關閉

媒體API

• 圖片
  • wx.chooseImage(Object) 本地選擇或者拍照
  • wx.previewImage(Object) 預覽圖片
  • 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ù)據緩存API

• wx.setStorage(Object) 接口實現(xiàn)將數(shù)據存 儲在本地緩存中指定的key中。
• wx.setStorageSync(Key,data) 接口實現(xiàn)將數(shù)據存 儲在本地緩存中指定的key中。
• wx.getStorage(Object) 接口用于從本地緩 存中異步獲取指定key對應的內容。
• wx.getStorageSync(Key) 接口用于從本地緩 存中同步獲取指定key對應的內容。
• wx.getStorageInfo(Object) 接口用于異步 獲取當前storage的相關信息。
• wx.getStorageInfoSync 接口用于同步獲取當前 storage的相關信息。
• wx.removeStorage(OBJECT) 接口用于從本 地緩存中異步移除指定key。
• wx.removeStorageSync(KEY)接口用于從本 地緩存中同步移除指定key。
• wx.clearStorage() 接口用于清理本地數(shù)據緩 存。
• wx.clearStorageSync()接口用于同步清理本 地數(shù)據緩存。

位置API

• wx.getLocation(OBJECT)獲取當前的地理位

置、速度。

• wx.chooseLocation(OBJECT)接口用于打開 地圖選擇位置。

• wx.openLocation(OBJECT)接口用于實現(xiàn)使 用微信內置地圖查看位置。

• wx.createMapContext(mapId)接口用于創(chuàng)建 map上下文對象mapContext。

設備信息API

• wx.getNetworkType(OBJECT)接口用于獲取 網絡類型。

• wx.getSystemInfo(OBJECT)接口用于獲取 系統(tǒng)信息。

• wx.getSystemInfoSync()接口用于獲取系統(tǒng) 信息同步。

• wx.onAccelerometerChange(CALLBACK)接

口監(jiān)聽重力感應數(shù)據。

• wx.onCompassChange(CALLBACK)接口實 現(xiàn)監(jiān)聽羅盤數(shù)據。

• wx.makePhoneCall(OBJECT)接口用于撥打 電話。

• wx.scanCode(OBJECT)接口用于調取客戶 端進行掃碼。

界面API

交互API

• wx.showToast(OBJECT)接口用于顯示消息

提示框。

• wx.hideToast()接口用于隱藏消息提示框。

• wx.showModal(OBJECT)接口用于顯示模態(tài) 彈窗。

• wx.showActionSheet(OBJECT)用于顯示操 作菜單

頁面導航API

• wx.setNavigationBarTitle(OBJECT):動態(tài) 設置當前頁面的標題。

• wx.showNavigationBarLoading():接口實現(xiàn) 在當前頁面顯示導航條加載動畫。

• wx.hideNavigationBarLoading():接口實現(xiàn) 隱藏導航條加載動畫。

• wx.navigateTo(OBJECT):接口實現(xiàn)保留當 前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack()可以返回到原頁面。

• wx.redirectTo(OBJECT):接口實現(xiàn)關閉當 前頁面，跳轉到應用內的某個頁面。

• wx.switchTab(OBJECT):接口實現(xiàn)跳轉 tabBar頁面并關閉其他所有非tabBar頁面。

• wx.navigateBack(OBJECT):接口實現(xiàn)關閉 當前頁面，回退前一頁面或多級頁面?？赏ㄟ^ getCurrentPages())獲取當前的頁面棧，決定需 要返回幾層。

動畫API

• wx.createAnimation(OBJECT)， 接口用于實現(xiàn)創(chuàng)建動畫，并在通過相應方法在頁面 上描述動畫過程

繪圖API

其他API

• wx.hideKeyboard()接口用于收起鍵盤。

• wx.stopPullDownRefresh()接口用于停止當前頁面下拉刷新。

• Page.onPullDownRefresh是在Page方法中定義 的onPullDownRefresh處理函數(shù)，以監(jiān)聽該頁面用戶 下拉刷新的事件。需要在頁面json文件的window配 置項中開啟enablePullDownRefresh。當處理完數(shù)據 刷新后，使用wx.stopPullDownRefresh()就可以 停止當前頁面的下拉刷新。

開放API

• wx.login(OBECT)接口用于獲取登錄憑證 (code)及用戶登錄態(tài)信息。

• wx.checkSession(OBJECT)接口用于檢查登錄態(tài)是否過期。

• wx.getUserInfo(OBJECT)接口用于獲取用戶信息，需要先調用wx.login接口。

• wx.requestPayment(OBJECT)接口用于發(fā)起微信支付。

• 模板消息接口用于給用戶發(fā)送如通知類的模板消息。

• 客戶消息接口用于客服會話消息的接收與發(fā)送。