介紹
微信小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。微信“小程序”可以為開發者提供基於微信的表單、導航、地圖、媒體和位置等開發組件，讓他們在微信的網頁里構建一個HTML 5應用。同時微信還開放了登錄和微信支付等接口，讓這個“小程序”可以和用戶的微信賬號打通。微信將“小程序”定義為“一種新的應用形態”。微信方面強調，小程序、訂閱號、服務號、企業號目前是並行的體系。
雖然微信小程序本質上來說就是一個HTML 5（移動網頁）應用，但與那些經常在朋友圈刷屏的 H5 小游戲或者應用不同的是，微信小程序獲得更多的系統權限。首先是數據緩存能力，這可以讓用戶在打開一個小程序的時候將程序的主要框架緩存到微信上，下一次就可以快速打開了
主要內容包括一些API接口
- 視圖容器：視圖(View)、滾動視圖、Swiper
- 基礎內容：圖標、文本、進度條
- 表單組件：按鈕、表單等
- 操作反饋
- 導航
- 媒體組件：音頻、圖片、視頻
- 地圖
- 畫布
- 微信小程序API
- 網絡：上傳下載能力、websocket
- 數據：數據緩存能力
- 位置：獲取位置查看位置
- 設備：網絡狀態、系統信息、重力感應、羅盤
- 界面：設置導航條、導航、動畫、繪畫
- 開發接口：登錄包括簽名加密、用戶信息、微信支付、模板消息
視圖容器
視圖(View)
<view class="section">
<view class="flex-wrp" style="display:flex;flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="flex-wrp" style="display:flex;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
滾動視圖(scroll-view)
使用豎向滾動時，需要給<scroll-view/>一個固定高度，
- scroll-x允許橫向滾動
- scroll-y允許縱向滾動
- scroll-top設置豎向滾動條位置
- scroll-left設置橫向滾動條位置
- scroll-into-view值應為某子元素id，則滾動到該元素，元素頂部對齊滾動區域頂部
- bindscrolltoupper滾動到頂部/左邊，會觸發 scrolltoupper 事件
- bindscrolltolower滾動到底部/右邊，會觸發 scrolltolower 事件
- scroll-top滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow">></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
滑塊視圖容器(swiper)
swiper-item僅可放置在swiper組件中，寬高自動設置為100%
- indicator-dots是否顯示面板指示點(默認false)
- autoplay是否自動切換(默認false)
- current當前所在頁面的index(0)
- interval自動切換時間間隔(默認5000)
- duration滑動動畫時長(默認1000)
- bindchangecurrent改變時會觸發change事件，event.detail={current:current}
<swpier indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{imgUrls}}">
<swpier-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
<text class="textindex">{{index}}</text>
</swpier-item>
</block>
</swpier>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>duration
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
基礎內容
圖標
- typeicon的類型，有效值：
- success
- success_no_circle
- safe_success
- safe_warn
- info
- info_circle
- warn
- waiting
- waiting_circle
- circle
- cancel
- download
- search
- clear
- sizeicon的大小，單位px
- coloricon的顏色，同css的color
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
文本
文本節點，支持轉義符"\"。除了文本節點以外的其他節點都無法長按選中
<text>{{text1}}+'\n'+{{test2}}></text>
進度條(process)
- percent百分比0~100
- showInfo在進度條右側顯示百分比，默認false
- strokeWidth進度條線的寬度，單位px,默認為6
- color進度條顏色
- active進度條從左往右的動畫,默認false
<progress percent="20" show-info stroke-width="12" color="pink" active />
邏輯層
小程序開發框架的邏輯層是由JavaScript編寫。邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋
增加 App 和 Page 方法，進行程序和頁面的注冊。
App()
App()函數用來注冊一個小程序。接受一個object參數，其指定小程序的生命周期函數等。
- onLaunch生命周期函數--監聽小程序初始化,當小程序初始化完成時，會觸發onLaunch（全局只觸發一次）
- onShow生命周期函數--監聽小程序顯示,當小程序啟動，或從后台進入前台顯示，會觸發onShow
- onHide生命周期函數--監聽小程序隱藏,當小程序從前台進入后台，會觸發onHide
- 其他開發者可以添加任意的函數或數據到Object參數中，用this可以訪問
當用戶點擊左上角關閉，或者按了設備Home鍵離開微信，小程序並沒有正在的銷毀，而是進入了后台；當再次啟動微信或再次打開小程序，又會從后台進入前台.只有當小程序進入后台一定時間，或者系統資源占用過高，才會被真正的銷毀。
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
globalData: 'I am global data'
})
App.prototype.getCurrentPage()
getCurrentPage()函數用戶獲取當前頁面的實例。
getApp()
我們提供了全局的getApp()函數，可以獲取到小程序實例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
App()必須在app.js中注冊，且不能注冊多個。不要在定義於App()內的函數中調用getApp()，使用this就可以拿到app實例。不要在onLaunch的時候調用getCurrentPage()，此時page還沒有生成。通過getApp獲取實例之后，不要私自調用生命周期函數。
Page()
Page()函數用來注冊一個頁面。接受一個object參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
- data頁面的初始數據
- onLoad生命周期函數--監聽頁面加載
- onReady生命周期函數--監聽頁面初次渲染完成
- onShow生命周期函數--監聽頁面顯示
- onHide生命周期函數--監聽頁面隱藏
- onUnload生命周期函數--監聽頁面卸載
- onPullDownRefresh頁面相關事件處理函數--監聽用戶下拉動作
- onReachBottom頁面上拉觸底事件的處理函數
- 其他開發者可以添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 可以訪問
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
初始化數據
初始化數據將作為頁面的第一次渲染。data將會以JSON的形式由邏輯層傳至渲染層，所以其數據必須是可以轉成JSON的格式：字符串，數字，布爾值，對象，數組。
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
- onLoad頁面加載,一個頁面只會調用一次。一個頁面只會調用一次。接收頁面參數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的
- onShow頁面顯示,每次打開頁面都會調用一次。
- onReady頁面初次渲染完成,一個頁面只會調用一次，代表頁面已經准備妥當，可以和視圖層進行交互。對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。
- onHide頁面隱藏,當navigateTo或底部tab切換時調用。
- onUnload頁面卸載,當redirectTo或navigateBack的時候調用。
- onPullDownRefresh下拉刷新,監聽用戶下拉刷新事件,需要在config的window選項中開啟enablePullDownRefresh。當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
事件處理函數
除了初始化數據和生命周期函數，Page中還可以定義一些特殊的函數：事件處理函數。在渲染層可以在組件中加入事件綁定，當達到觸發事件時，就會執行Page中定義的事件處理函數。
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Page.prototype.setData()
setData函數用於將數據從邏輯層發送到視圖層，同時改變對應的this.data的值。直接修改this.data無效，無法改變頁面的狀態，還會造成數據不一致。單次設置的數據不能超過1024kB，請盡量避免一次設置過多的數據。
表單組件
按鈕(button)
- size有效值default, mini,默認default
- type按鈕的樣式類型，有效值primary, default, warn,默認default
- plain按鈕是否鏤空，背景色透明,false
- disabled是否禁用,默認false
- loading名稱前是否帶 loading 圖標,默認false
- formType有效值：submit, reset，用於form組件，點擊分別會觸發submit/reset事件
- hover-class指定按鈕按下去的樣式類。當hover-class="none"時，沒有點擊態效果,默認button-hover{background-color:rgba(0,0,0,0.1);opacity:0.7;}
<button type="primary" size="default" >牛</button>
<button type="default" size="mini" disabled>牛</button>
<button type="warn" size="mini" plain>牛</button>
<button type="warn" size="default" >牛</button>
checkbox-group
多選項目組，內部由多個checkbox組成。checkbox-group內只能包含checkbox
- bindchangecheckbox-group中選中項發生改變是觸發change事件，detail = {value:[選中的checkbox的value的數組]}
- valueheckbox標識，選中時觸發checkbox-group的change事件，並攜帶checkbox的value
- disabled是否禁用
- checked當前是否選中，可用來設置默認選中
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for-items="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
checkboxChange: function(e) {
console.log('checkbox發生change事件，攜帶value值為：', e.detail.value)
}
})
form
將表單內的用戶輸入的switch input checkbox slider radio picker 提交.當點擊 <form/> 表單中 formType 為 submit 的 <button/> 組件時，會將表單組件中的 value 值進行提交，需要在表單組件中加上 name 來作為 key。
- report-submit是否返回formId用於發送模板消息
- bindsubmit攜帶form中的數據觸發submit事件，event.detail = { value : {"name":"value"} , formId:"" }
- bindreset表單重置時會觸發reset事件
<form bindsubmit="formSubmit" bindReset="formReset">
<view class="section section_gap">
<switch name="switch" />
<input name="input" placeholder="hahha" />
<radio value="1">中國</radio>
<checkbox value="1"/>美食
<button size="mini" type="submit">啦啦</button>
<button size="mini" type="reset">重置</button>
<slider max="60" min="0" name="slider" show-value>設置</slider>
</view>
</form>
input
- value輸入框的內容
- typeinput的類型，有效值：emoji(帶有表情的輸入框),text,number,idcard(帶小數點的數字鍵盤),digit(帶小數點的數字鍵盤),time,date
- password是否是密碼類型
- placeholder輸入框為空時占位符
- 輸入框為空時占位符指定placeholder的樣式
- placeholder-class指定placeholder的樣式類
- disabled是否禁用
- maxlength最大輸入長度，設置為0的時候不限制最大長度,默認是140
- auto-focus自動聚焦，拉起鍵盤。頁面中只能有一個input設置auto-focus屬性.默認是false
- focus使得input獲取焦點,默認是false
- bindchange輸入框失去焦點時，觸發bindchange事件，event.detail={value:value}
- bindinput除了date/time類型外的輸入框，當鍵盤輸入時，觸發input事件，event.detail={value:value}，處理函數可以直接return一個字符串，將替換輸入框的內容。
- bindfocus輸入框聚焦時觸發，event.detail = {value:value}
- bindblur輸入框失去焦點時觸發，event.detail = {value:value}
<input maxlength="10" placeholder-style="color:red" bindinput="bindKeyInput" placeholder="這是一個可以自動聚焦的input" auto-focus/>
Page({
data:{
focus:false,
inputValue:""
},
bindReplaceInput:function(e){
var value = e.detail.value;
var pos = e.detail.cursor;
if(pos != -1){
//光標在中間
var left = e.detail.value.slice(0,pos);
//計算光標的位置
pos = left.replace(/11/g,'2').length;
}
},
bindHideKeyboard:function(e){
if(e.detail.value === "123"){
//收起鍵盤
wx.hideKeyboard();
}
}
});
label
用來改進表單組件的可用性，使用for屬性找到對應的id，或者將控件放在該標簽下，當點擊時，就會觸發對應的控件。
目前可以綁定的控件有：button, checkbox, radio, switch。
<label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
picker
滾動選擇器，現支持三種選擇器，通過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，默認是普通選擇器
- 普通選擇器：mode=selector
- rangemode為selector時，range有效
- valuemode為selector時，是數字，表示選擇了range中的第幾個，從0開始。
- bindchangevalue改變時觸發change事件，event.detail= { value:value}
- 時間選擇器：mode=time
- valuemode為selector時，range有效
- valuemode為selector時，是數字，表示選擇了range中的第幾個，從0開始。
- bindchangevalue改變時觸發change事件，event.detail= { value:value}
- 日期選擇器：mode=date
- value表示選中的日期，格式為"yyyy-MM-dd"
- start表示有效日期范圍的開始，字符串格式為"yyyy-MM-dd"
- end表示有效日期范圍的結束，字符串格式為"yyyy-MM-dd"
- fields有效值year,month,day，表示選擇器的粒度
- bindchangevalue改變時觸發change事件，event.detail= { value:value}
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當前選擇: {{time}}
</view>
</picker>
Page({
data: {
date:"2016-09-01",
time:"12:01"
},
bindTimeChange:function(e){
this.setData({
time:e.detail.time
})
}
})
radio
- bindchangeradio-group中的選中項發生變化時觸發change事件，event.detai = {value : 選中項radio的value
- valueradio標識。當該radio選中時，radio-group的change事件會攜帶radio的value
- checked當前是否選中,默認為false
- disabled是否禁用,默認為false
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for-items="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
radioChange: function(e) {
console.log('radio發生change事件，攜帶value值為：', e.detail.value)
}
})
slider
- min最小值，默認值0
- max最大值,默認值100
- step步長，取值必須大於 0，並且可被 (max - min) 整除，默認值1
- disabled是否禁用,默認值false
- value當前取值
- show-value默認值false,是否顯示當前value
- bindchange完成一次拖動后觸發的事件，event.detail = {value:value}
<slider bindchange="slider4change" step="5" min="50" max="200" show-value/>
var pageData = {}
for(var i = 1; i < 5; ++i) {
(function (index) {
pageData['slider${index}change'] = function(e) {
console.log('slider${index}發生change事件，攜帶值為', e.detail.value)
}
})(i);
}
Page(pageData)
switch
- checked是否選中,默認為false
- disabled是否禁用,默認為false
- type樣式，有效值：switch, checkbox.默認是switch
- bindchangechecked改變時觸發change事件，event.detail={ value:checked}
<switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
textarea
- value輸入框的內容
- placeholder輸入框為空時占位符
- placeholder-style指定 placeholder 的樣式
- placeholder-class指定 placeholder 的樣式類
- disabled是否禁用,默認false
- maxlength最大輸入長度，設置為0的時候不限制最大長度.默認140
- auto-focus自動聚焦，拉起鍵盤。頁面中只能有一個 <textarea/> 或<input/> 設置 auto-focus 屬性
- focus獲取焦點（開發工具暫不支持）.默認false
- auto-height是否自動增高，設置auto-height時，style.height不生效.默認false
- bindfocus輸入框聚焦時觸發，event.detail = {value: value}
- bindblur輸入框失去焦點時觸發，event.detail = {value: value}
- bindlinechange輸入框行數變化時調用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
<textarea bindblur="bindTextAreaBlur" placeholder-style="color:red;" auto-focus auto-height placeholder="自動變高" />
操作反饋
action-sheet
上拉菜單，從屏幕底部出現的菜單表。
- hidden是否隱藏,默認true
- bindchange點擊背景或action-sheet-cancel按鈕時觸發change事件，不攜帶數據
action-sheet-item
底部菜單表的子選項。
action-sheet-cancel
底部菜單表的取消按鈕，和action-sheet-item的區別是，點擊它會觸發action-sheet的change事件，並且外觀上會同它上面的內容間隔開來
<button type="default" bindtap="actionSheetTap">彈出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<block wx:for-items="{{actionSheetItems}}">
<action-sheet-item class="item" bindtap="bind{{item}}">{{item}}</action-sheet-item>
</block>
<action-sheet-cancel class="cancel">取消</action-sheet-cancel>
</action-sheet>
modal
modal即將廢棄，請使用 API wx.showModal
- title標題
- hidden是否隱藏整個彈窗,默認false
- no-cancel是否隱藏cancel按鈕，默認false
- confirm-textconfirm按鈕文字.默認確定
- bindconfirm點擊確認觸發的回調
- bindcancel點擊取消以及蒙層觸發的回調
<modal title="標題" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
這是對話框的內容。
</modal>
toast
toast即將廢棄，請使用 API wx.showToast
- durationhidden設置false后，觸發bindchange的延時，單位毫秒,默認值1500
- hidden是否隱藏,默認值false
- bindchangeduration延時后觸發
<toast hidden="{{toast1Hidden}}" duration="3000" bindchange="toast1Change">
loading
- hidden是否隱藏.默認值false
<loading hidden="{{hidden}}">加載中...</loading>
導航
微信小程序導航 navigator
- url應用內的跳轉鏈接
- redirect是否關閉當前頁面.默認為false
- hover-class指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果.默認navigator-hover
navigator-hover默認為{background-color:rgba(0,0,0,0.1);opacity:0.7;},<navigator/>的子節點背景色應為透明色
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
<navigator url="redirect?title=redirect" hover-class="other-navigator-hover" redirect >在當前頁打開</navigator>
媒體組件
媒體組件audio
- action控制音頻的播放、暫停，播放速率、播放進度的對象，有method和data兩個參數
- src要播放音頻的資源地址
- loop是否循環播放,默認為false
- controls是否顯示默認控件,默認true
- poster默認控件上的音頻封面的圖片資源地址，如果controls屬性值為false則設置poster無效
- name默認控件上的音頻名字，如果controls屬性值為false則設置name無效
- author默認控件上的作者名字，如果controls屬性值為false則設置author無效
- binderror當發生錯誤時觸發error事件，detail = {errMsg: MediaError.code}
- bindplay當開始/繼續播放時觸發play事件
- bindpause當暫停播放時觸發pause事件
- bindratechange當播放速率改變時觸發ratechange事件
- bindtimeupdate當播放進度改變時觸發timeupdate事件，detail = {currentTime, duration}
- bindended當播放到末尾時觸發ended事件
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/ mp3/ 2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audioPlaybackRateSpeedUp">調為2倍速</button>
<button type="primary" bindtap="audioPlaybackRateNormal">調為1倍速</button>
<button type="primary" bindtap="audioPlaybackRateSlowDown">調為0.5倍速</button>
<button type="primary" bindtap="audio14">設置當前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>
Page({
data: {
poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
name: 'Sugar',
author: 'Maroon 5'
},
audioPlay: function () {
this.setData({
action: {
method: 'play'
}
});
},
audioPause: function () {
this.setData({
action: {
method: 'pause'
}
});
},
audioPlaybackRateSpeedUp: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 2
}
});
},
audioPlaybackRateNormal: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 1
}
});
},
audioPlaybackRateSlowDown: function () {
this.setData({
action: {
method: 'setPlaybackRate',
data: 0.5
}
});
},
audio14: function () {
this.setData({
action: {
method: 'setCurrentTime',
data: 14
}
});
},
audioStart: function () {
this.setData({
action: {
method: 'setCurrentTime',
data: 0
}
});
}
})
image
- src圖片資源地址
- mode圖片裁剪、縮放的模式,image標簽默認為300px,高度225px,默認scaleToFill
mode有12種模式，其中3中是縮放模式，9種是裁剪模式。
- scaleToFill不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素
- aspectFit保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
- aspectFill保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
- top不縮放圖片，只顯示圖片的頂部區域
- bottom不縮放圖片，只顯示圖片的底部區域
- center不縮放圖片，只顯示圖片的中間區域
- left不縮放圖片，只顯示圖片的左邊區域
- right不縮放圖片，只顯示圖片的右邊區域
- top left不縮放圖片，只顯示圖片的左上邊區域
- top right不縮放圖片，只顯示圖片的右上邊區域
- bottom left不縮放圖片，只顯示圖片的左下邊區域
- bottom right不縮放圖片，只顯示圖片的右下邊區域
- binderror 當錯誤發生時，發布到AppService的事件名，事件對象event.detail = { errMsg: 'something wrong' }
- bindload當圖片載入完畢時，發布到AppService的事件名，事件對象event.detail = {}
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
video
video標簽認寬度300px、高度225px，設置寬高需要通過wxss設置width和height。
tip: 請勿在 scroll-view 中使用 video 組件
- hidden設置視頻的顯示/隱藏，hidden值為true表示隱藏，值為false表示顯示
- src要播放視頻的資源地址
- binderror當發生錯誤時觸發error事件，event.detail = { errMsg: 'something wrong' }
<video src="http://www.w3school.com.cn//i/movie.mp4" binderror="videoErrorCallback"></video>
地圖map
map
tip: 請勿在 scroll-view 中使用 map 組件
- longitude中心經度
- latitude中心緯度
- scale縮放級別,默認1
- markers標記點
- covers覆蓋物
標記點用於在地圖上顯示標記的位置，不能自定義圖標和樣式
- latitude緯度，浮點數，范圍 -90 ~ 90
- longitude經度，浮點數，范圍 -180 ~ 180
- name標注點名
- desc標注點詳細描述
覆蓋物用於在地圖上顯示自定義圖標，可自定義圖標和樣式
地圖組件的經緯度必填, 如果不填經緯度則默認值是北京的經緯度。標記點markers只能在初始化的時候設置，不支持動態更新。
- latitude緯度:浮點數，范圍 -90 ~ 90
- longitude經度:浮點數，范圍 -180 ~ 180
- iconPath顯示的圖標:項目目錄下的圖片路徑，支持相對路徑寫法
- rotate旋轉角度,順時針旋轉的角度，范圍 0 ~ 360，默認為 0
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
Page({
data: {
markers: [{
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 創意園',
desc: '我現在的位置'
}],
covers: [{
latitude: 23.099794,
longitude: 113.324520,
icaonPath: '../images/car.png',
rotate: 10
}, {
latitude: 23.099298,
longitude: 113.324129,
iconPath: '../images/car.png',
rotate: 90
}]
}
})
canvas
畫布canvas
canvas標簽默認寬度300px、高度225px. 同一頁面中的canvas-id不可重復，如果使用一個已經出現過的canvas-id，該canvas標簽對應的畫布將被隱藏並不再正常工作
tip: 請勿在 scroll-view 中使用 canvas 組件
- hidden設置畫布的顯示/隱藏，hidden值為true表示隱藏，值為false表示顯示,默認為false
- canvas-idcanvas組件的唯一標識符
- binderror 當發生錯誤時觸發error事件，detail = { errMsg: 'something wrong' }
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" binderror="canvasIdErrorCallback" ></canvas>
Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg);
},
onReady: function (e) {
//使用wx.createContext獲取繪圖上下文context
var context = wx.createContext();
context.setStrokeStyle("#00ff00");
context.setLineWidth(5);
context.rect(0,0,200,200);
context.stroke()
context.setStrokeStyle ("#ff0000") ;
context.setLineWidth (2)
context.moveTo(160,100)
context.arc(100,100,60,0,2*Math.PI,true);
context.moveTo(140,100);
context.arc(100,100,40,0,Math.PI,false);
context.moveTo(85,80);
context.arc(80,80,5,0,2*Math.PI,true);
context.moveTo(125,80);
context.arc(120,80,5,0,2*Math.PI,true);
context.stroke();
//調用wx.drawCanvas，通過canvasId指定在哪張畫布上繪制，通過actions指定繪制行為
wx.drawCanvas({
canvasId: 'firstCanvas',
actions: context.getActions() //獲取繪圖動作數組
});
}
});
微信API請求
wx.request(OBJECT)
wx.request發起的是https請求。一個微信小程序，同時只能有5個網絡請求連接。
- url開發者服務器接口地址,必填
- data請求的參數，否
- header設置請求的header , header中不能設置Referer，否
- method默認為GET，有效值：OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT，否
- success收到開發者服務成功返回的回調函數，res = {data:"開發者服務器返回的內容"}，否
- fail接口調用失敗的回調函數，否
- complete接口調用結束的回調函數（調用成功、失敗都會執行）,否
wx.request({
url: 'test.php',
data: {
x: '' ,
y: ''
},
header:{
"Content-Type":"application/json"
},
success: function(res) {
var data = res.data;
}
});
API 上傳、下載
將本地資源上傳到開發者服務器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后，可通過此接口將本地資源上傳到指定服務器。客戶端發起一個HTTPS POST請求，其中 Content-Type 為 multipart/form-data 。
wx.uploadFile(OBJECT)
- url開發者服務器url，必填
- filePath要上傳文件資源的路徑，必填
- name文件對應的key , 開發者在服務器端通過這個key可以獲取到文件二進制內容，必填
- headerHTTP 請求 Header，否
- formDataHTTP 請求中其他額外的form data，否
- success接口調用成功的回調函數，否
- fail接口調用失敗的回調函數，否
- complete接口調用結束的回調函數（調用成功、失敗都會執行），否
wx.chooseImage({
success:function(res){
var tempFilePaths = res.tempFilePaths;
wx.uploadFile({
url: 'http://example.com/upload',
filePath: tempFilePaths[0],
name:"file",
formData:{
"user":"test"
}
})
}
})
wx.downloadFile(OBJECT)
下載文件資源到本地。客戶端直接發起一個HTTP GET請求，把下載到的資源根據 type 進行處理，並返回文件的本地臨時路徑。
- url下載資源的 url
- type下載資源的類型，用於客戶端識別處理，有效值：image/audio/video
- headerHTTP 請求 Header
- success下載成功后以 tempFilePath 的形式傳給頁面，res={tempFilePath:"文件的臨時路徑"}
- fail接口調用失敗的回調函數
- complete接口調用結束的回調函數（調用成功、失敗都會執行）
wx.downloadFile({
url: 'http://example.com/audio/123',
type: 'audio',
success:function(res){
wx.playVoice({
filePath: res.tempFilePath
})
}
})
創建Websocket
wx.connectSocket(OBJECT)
wx.onSocketOpen(CALLBACK)
wx.onSocketError(CALLBACK)
wx.sendSocketMessage(OBJECT)
wx.onSocketMessage(CALLBACK)
wx.closeSocket()
wx.onSocketClose(CALLBACK)
wx.connectSocket(OBJECT)
創建一個 WebSocket 連接；一個微信小程序同時只能有一個WebSocket連接，如果當前已存在一個WebSocket連接，會自動關閉該連接，並重新創建一個WebSocket連接。
- url開發者服務器接口地址，必須是HTTPS協議，且域名必須是后台配置的合法域名
- data請求的數據
- headerHTTP Header
- method默認是GET，有效值為： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
- success接口調用成功的回調函數
- fail接口調用失敗的回調函數
- complete接口調用結束的回調函數（調用成功、失敗都會執行）
wx.connectSocket({
url:"test.php",
data:{
x:"",
y:""
},
header:{
'content-type': 'application/json'
},
method:"GET"
})
wx.onSocketOpen(CALLBACK)
wx.connectSocket({
url:"test.php"
});
wx.onSocketOpen(function(res){
console.log("WebSocket連接已打開！")
})
wx.onSocketError(CALLBACK)
wx.connectSocket({
url:"test.php"
});
wx.onSocketOpen(function(res){
console.log("WebSocket連接已打開！")
})
wx.onSocketError(function(res){
console.log("WebSocket連接打開失敗，請檢查！")
})
wx.sendSocketMessage(OBJECT)
通過WebSocket連接發送數據，需要先wx.connectSocket，並在wx.onSocketOpen回調之后才能發送。
- data需要發送的內容
var socketOpen = false;
var socketMsgQueue = []
wx.connectSocket({
url:"test.php"
});
wx.onSocketOpen(function(res){
socketOpen = true;
for(var i = 0 ; i < socketMsgQueue.length; i++){
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = [];
})
function sendSocketMessage(msg){
if(socketOpen){
wx.sendSocketMessage({
data:msg
});
}else{
socketMsgQueue.push(msg)
}
}
wx.onSocketMessage(CALLBACK)
- data服務器返回的消息
wx.connectSocket({
url:"test.php"
});
wx.onSocketOpen(function(res){
console.log("WebSocket連接已打開！")
})
wx.onSocketError(CALLBACK)
wx.connectSocket({
url:"test.php"
});
wx.onSocketOpen(function(res){
console.log("WebSocket連接已打開！")
})
wx.onSocketError(function(res){
console.log("WebSocket連接打開失敗，請檢查！")
})
wx.closeSocket()
關閉WebSocket連接
wx.onSocketClose(CALLBACK)
監聽WebSocket關閉
wx.connectSocket({
url:"test.php"
});
//注意這里有時序問題，
//如果wx.connectSocket還沒回調wx.onSocketOpen,而先調用wx.closeSocket,那么就做不到關閉WebSocket的目的
//必須在WebSocket打開期間調用wx.closeSocket才能關閉
wx.onSocketOpen(function(){
wx.closeSocket()
})
wx.onSocketClose(function(res){
console.log("WebSocket 已關閉！")
})
API圖片
wx.chooseImage(OBJECT)
從本地相冊選擇圖片或使用相機拍照
- count最多可以選擇的圖片張數，默認9，非必填
- sizeType"original"原圖，"compressed"壓縮圖，默認二者都有,非必填
- sourceType"album"從相冊選圖，"camera"使用相機，默認二者都由,非必填
- success成功則返回圖片的本地文件路徑列表tempFilePaths，必填
- fail接口調用失敗的回調函數
- complete接口調用結束的回調函數（調用成功、失敗都會執行）
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
}
});
wx.previewImage(OBJECT)
- current當前顯示圖片的鏈接，不填則默認為urls的第一張,非必填
- urls需要預覽的圖片鏈接列表
- success接口調用成功的回調函數
- fail接口調用失敗的回調函數
- complete接口調用結束的回調函數（調用成功、失敗都會執行）
wx.previewImage({
current: '', // 當前顯示圖片的http鏈接
urls: [] // 需要預覽的圖片http鏈接列表
});
數據
數據緩存
有自己的本地緩存，可以通過wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對本地緩存進行設置、獲取和清理。localStorage是永久存儲的，但是我們不建議將關鍵信息全部存在localStorage，以防用戶換設備的情況。
wx.setStorage(OBJECT)
將數據存儲在本地緩存中指定的key中，會覆蓋掉原來該key對應的內容，這是一個異步接口。
- key：本地緩存中的指定的key
- data：需要存儲的內容
wx.setStorage({
key:'key',
data:'value'
});
wx.setStorageSync(key,data)
將DATA存儲在本地緩存中指定的KEY中，會覆蓋掉原來該KEY對應的內容，這是一個同步接口。
- KEY:本地緩存中的指定的key
- DATA: 需要存儲的內容
wx.setStorageSync("key","value");
wx.getStorage(OBJECT)
從本地緩存中異步獲取指定key對應的內容。
- key:本地緩存中的指定的key,必填字段
- success接口調用的回調函數,res={data:"key對應的內容"}，必填字段
wx.getStorage({
key:'key',
success:function(res){
console.log(res.data);
}
});
wx.getStorageSync(KEY)
從本地緩存中同步獲取指定key對應的內容。
- KEY:本地緩存中的指定的key，必填字段
var value = wx.getStorageSync("key");
wx.clearStorage()
清理本地數據緩存
wx.clearStorageSync()
同步清理本地數據緩存
wx.clearStorage();
wx.clearStorageSync();
當前位置、速度
wx.getLocation(OBJECT)
- type默認為"wgs84"返回gps坐標，"gcj02"返回可用於wx.openLocation的坐標，非必填
- success成功獲取地理位置的回調，必填
- fail接口調用失敗的回調函數，非必填
- complete接口調用結束的回調函數（調用成功、失敗都會執行）,非必填