柚子快報激活碼778899分享：微信小程序的API應(yīng)用
柚子快報激活碼778899分享：微信小程序的API應(yīng)用
1.網(wǎng)絡(luò)API
微信小程序處理的數(shù)據(jù)通常從后臺服務(wù)器獲取
,
再將處理過的結(jié)果保存到后臺服務(wù)器
,
這就要求微信小程序要有與后臺進(jìn)行交互的能力。 微信原生ＡＰＩ 接口或第三方ＡＰＩ 提供了各類接口實現(xiàn)前后端交互。
網(wǎng)絡(luò)ＡＰＩ 可以幫助開發(fā)者實現(xiàn)網(wǎng)絡(luò)ＵＲＬ 訪問調(diào)用、文件的上傳和下載、網(wǎng)絡(luò)套接字的使用等功能處理。 微信開發(fā)團(tuán)隊提供了１０ 個網(wǎng)絡(luò)ＡＰＩ 接口。
wx.request(
Object
)
接口 用于發(fā)起HTTPS 請求。
?wx.uploadFile(OBject) 接口 用于將本地資源上傳到后臺服務(wù)器
?ｗｘ.ｄｏｗｎｌｏａｄＦｉｌｅ(Ｏｂｊｅｃｔ) 接口 用于下載文件資源到本地
ｗｘ.ｃｏｎｎｅｃｔＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口 用于創(chuàng)建一個ＷｅｂＳｏｃｋｅｔ 連接。
ｗｘ.ｓｅｎｄＳｏｃｋｅｔＭｅｓｓａｇｅ(Ｏｂｊｅｃｔ) 接口 用于實現(xiàn)通過ＷｅｂＳｏｃｋｅｔ 連接發(fā)送數(shù)據(jù)。
?ｗｘ.ｃｌｏｓｅＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口 用于關(guān)閉ＷｅｂＳｏｃｋｅｔ 連接。
?ｗｘ.ｏｎＳｏｃｋｅｔＯｐｅｎ(ＣａｌｌＢａｃｋ) 接口 用于監(jiān)聽ＷｅｂＳｏｃｋｅｔ 連接打開事件。
?ｗｘ.ｏｎＳｏｃｋｅｔＥｒｒｏｒ(ＣａｌｌＢａｃｋ) 接口 用于監(jiān)聽ＷｅｂＳｏｃｋｅｔ 錯誤。
ｗｘ.ｏｎＳｏｃｋｅｔＭｅｓｓａｇｅ(ＣａｌｌＢａｃｋ) 接口 用于實現(xiàn)監(jiān)聽ＷｅｂＳｏｃｋｅｔ 接收到服務(wù)器的消息事件。
?ｗｘ.ｏｎＳｏｃｋｅｔＣｌｏｓｅ(ＣａｌｌＢａｃｋ) 接口 用于實現(xiàn)監(jiān)聽ＷｅｂＳｏｃｋｅｔ 關(guān)閉
(1) 發(fā)起網(wǎng)絡(luò)請求
ｗｘ
.
ｒｅｑｕｅｓｔ
(
Ｏｂｊｅｃｔ
) 實現(xiàn)向服務(wù)器發(fā)送請求、獲取數(shù)據(jù)等各種網(wǎng)絡(luò)交互操作其相關(guān)參數(shù)如圖
一個微信小程序同時只能有５ 個網(wǎng)絡(luò)請求連接
,
并且是ＨＴＴＰＳ 請求。
代碼示例：
（1）
wxml:
js:
Page({
data:{
html:""
},
getbaidutap:function(){
var that =this;
wx.request({
url:'http://www.baidu.com',
data:{},
header: {'Content-Type':'application/json'},
success:function(res){
console.log(res);
that.setData({
html:res.dat
})
}
})
}
})
運行結(jié)果圖：
（2）wxml：
js：
// .js代碼
Page({
data:{
postcode:'',//查詢郵政編碼
address:[],//郵政編碼對應(yīng)的地址
errMsg:'',//錯誤信息
error_code:-1//錯誤碼
},
input:function(e){//輸入事件
this.setData({
postcode:e.detail.value,
})
console.log(e.detail.value)
},
find:function(){//查詢事件
var postcode=this.data.postcode;
if(postcode != null && postcode != " "){
var self=this;
//顯示toast提示消息
wx.showToast({
title: '正在查詢，請稍候。。。。',
icon:'loading',
duration:10000
});
wx:wx.request({
url: 'https://v.juhe.cn/postcode/query',//第三方后臺服務(wù)器
data:{
'postcode':postcode,
'key':'0ff9bfccdf147476e067de994eb5496e'//第三方提供
},
header:{
'content-type':'application/x-www-form-urlencoded'
},
method:'POST',//方法為POST
success:function(res){
wx.hideToast();//隱藏toast
if(res.data.error_code==0){
console.log(res);
self.setData({
errMsg:'',
error_code:res.data.error_code,//錯誤代碼
address:res.data.result.list//獲取到的數(shù)據(jù)
})
}
else{
self.setData({
errMsg:res.data.reason || res.data.reason,//錯誤原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})
運行結(jié)果：
執(zhí)行結(jié)果：?
?別的方法：
wxml：
js;
Page({
data:{
postcode:'',//查詢郵政編碼
address:[],//郵政編碼對應(yīng)的地址
errMsg:'',//錯誤信息
error_code:-1//錯誤碼
},
input:function(e){//輸入事件
this.setData({
postcode:e.detail.value,
})
console.log(e.detail.value)
},
find:function(){//查詢事件
var postcode=this.data.postcode;
if(postcode != null && postcode != " "){
var self=this;
//顯示toast提示消息
wx.showToast({
title: '正在查詢，請稍候。。。。',
icon:'loading',
duration:10000
});
wx:wx.request({
url: 'https://v.juhe.cn/postcode/query',//第三方后臺服務(wù)器
data:{
'postcode':postcode,
'key':'0ff9bfccdf147476e067de994eb5496e'//第三方提供
},
header:{
'content-type':'application/x-www-form-urlencoded'
},
method:'POST',//方法為POST
success:function(res){
wx.hideToast();//隱藏toast
if(res.data.error_code==0){
console.log(res);
self.setData({
errMsg:'',
error_code:res.data.error_code,//錯誤代碼
address:res.data.result.list//獲取到的數(shù)據(jù)
})
}
else{
self.setData({
errMsg:res.data.reason || res.data.reason,//錯誤原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})
?運行結(jié)果圖：
執(zhí)行結(jié)果圖：
（2）上傳文件
ｗｘ
.
ｕｐｌｏａｄＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
接口用于將本地資源上傳到開發(fā)者服務(wù)器
,
并在客戶端發(fā)起一個ＨＴＴＰＳ ＰＯＳＴ 請求, 其相關(guān)參數(shù)如圖
通過ｗｘ
.
ｕｐｌｏａｄＦｉｌｅ
(
Ｏｂｊｅｃｔ
),
可以將圖片上傳到服務(wù)器并顯示。
示例代碼：
wxml:
js:
Page({
data:{
img:null,
},
uploadimage:function(){
var that=this;
//選擇圖片
wx.chooseImage(res)({
success:function(res){
var tempFilePaths=res.tempFilePaths
upload(that,tempFilePaths);
}
})
function upload(page,path){
//顯示toast提示消息
wx.showToast({
icon:'loading',
title: '正在上傳'
}),
wx.uploadFile({
url:"http://localhost",
filePath:path[0],
name:'file',
success:function(res){
console.log(res);
if(res.statusCode !=200){
wx.showModal({
title:'提示',
content:'上傳失敗',
showCancel:false
})
return;
}
var data =res.data
page.setData({
img:path[0]
})
},
fail:function(e){
console.log(e);
wx.showModal({
title: '提示',
content: '上傳失敗',
showCancel:false
})
},
complete:function(){
//隱藏Toast
wx.hideToast();
}
})
}
}
})
運行結(jié)果圖：
（3） 下載文件
ｗｘ
.
ｄｏｗｎｌｏａｄＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
接口用于實現(xiàn)從開發(fā)者服務(wù)器下載文件資源到本地
,
在客戶端直接發(fā)起一個ＨＴＴＰ ＧＥＴ 請求
,
返回文件的本地臨時路徑。 其相關(guān)參數(shù)如圖：
??
示例代碼：
wxml：
js：
Page({
data:{
img:null
},
downloadimage:function(){
var that=this;
wx.downloadFile({
url: 'http://localhost/1.jpg',//通過WAMP軟件實現(xiàn)
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})
?運行結(jié)果圖：
? ? ? ?2.多媒體API
多媒體ＡＰＩ 主要包括圖片ＡＰＩ、錄音ＡＰＩ、音頻播放控制ＡＰＩ、音樂播放控制ＡＰＩ 等
,
其目的是豐富小程序的頁面功能。
（1） 圖片ＡＰＩ
圖片ＡＰＩ 實現(xiàn)對相機拍照圖片或本地相冊圖片進(jìn)行處理
,
主要包括以下４ 個ＡＰＩ 接口
:
?ｗｘ
.
ｃｈｏｏｓｅＩｍａｇｅ
(
Ｏｂｊｅｃｔ
)
接口 用于從本地相冊選擇圖片或使用相機拍照。
?ｗｘ
.
ｐｒｅｖｉｅｗＩｍａｇｅ
(
Ｏｂｊｅｃｔ
)
接口 用于預(yù)覽圖片。
?ｗｘ
.
ｇｅｔＩｍａｇｅＩｎｆｏ
(
Ｏｂｊｅｃｔ
)
接口 用于獲取圖片信息。
?ｗｘ
.
ｓａｖｅＩｍａｇｅＴｏＰｈｏｔｏｓＡｌｂｕｍ
(
Ｏｂｊｅｃｔ
)
接口 用于保存圖片到系統(tǒng)相冊。
１.選擇圖片或拍照
ｗｘ
.
ｃｈｏｏｓｅＩｍａｇｅ
(
Ｏｂｊｅｃｔ
)
接口用于從本地相冊選擇圖片或使用相機拍照。 拍照時產(chǎn)生的臨時路徑在小程序本次啟動期間可以正常使用
,
若要持久保存
,
則需要調(diào)用ｗｘ
.
ｓａｖｅＦｉｌｅ 保存圖片到本地。 其相關(guān)參數(shù)如圖：
? ? ? ? ?
示例代碼:
wx.chooseImage({
count:2,//默認(rèn)值為9
sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType:['album','camera'],//可以指定來源是相冊還是相機，默認(rèn)二者都有
success:function(res){
//返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性來顯示圖片
var tempFilePaths=res.tempFilePaths
var tempFiles=res.tempFiles
console.log(tempFilePaths)
console.log(tempFiles)
}
})
若調(diào)用成功
,
則返回ｔｅｍｐＦｉｌｅＰａｔｈｓ 和ｔｅｍｐＦｉｌｅｓ
,
ｔｅｍｐＦｉｌｅＰａｔｈｓ 表示圖片在本地臨時文件路徑列表。 ｔｅｍｐＦｉｌｅｓ 表示圖片的本地文件列表
,
包括ｐａｔｈ 和ｓｉｚｅ。
２.預(yù)覽圖片
ｗｘ
.
ｐｒｅｖｉｅｗＩｍａｇｅ
(
Ｏｂｊｅｃｔ
)
接口主要用于預(yù)覽圖片
,
其相關(guān)參數(shù)如圖：
示例代碼：
wx.previewImage({
//定義顯示第二張
current:"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
urls:["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.jpg"]
})
３.獲取圖片信息
ｗｘ
.
ｇｅｔＩｍａｇｅＩｎｆｏ
(
Ｏｂｊｅｃｔ
)
接口用于獲取圖片信息
,
其相關(guān)參數(shù)如圖：
?示例代碼：
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src: res.tempFilePaths[0],
success:function(e){
console.log(e.width)
console.log(e.height)
}
})
},
})
? ? ? ??
４.保存圖片到系統(tǒng)相冊
ｗｘ
.
ｓａｖｅＩｍａｇｅＴｏＰｈｏｔｏｓＡｌｂｕｍ
(
Ｏｂｊｅｃｔ
)
接口用于保存圖片到系統(tǒng)相冊
,
需要得到用戶授權(quán)ｓｃｏｐｅ
.
ｗｒｉｔｅＰｈｏｔｏｓＡｌｂｕｍ。 其相關(guān)參數(shù)如圖：
示例代碼：
wx.chooseImage({
success:function(res){
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePaths[0],
success:function(e){
console.log(e)
}
})
},
})
運行結(jié)果可以調(diào)出彈窗：
（2） 錄音ＡＰＩ
錄音ＡＰＩ 提供了語音錄制的功能
,
主要包括以下兩個ＡＰＩ 接口
:
?ｗｘ
.
ｓｔａｒｔＲｅｃｏｒｄ
(
Ｏｂｊｅｃｔ
)
接口 用于實現(xiàn)開始錄音。
ｗｘ
.
ｓｔｏｐＲｅｃｏｒｄ
(
Ｏｂｊｅｃｔ
)
接口 用于實現(xiàn)主動調(diào)用停止錄音。
１.開始錄音
ｗｘ
.
ｓｔａｒｔＲｅｃｏｒｄ
(
Ｏｂｊｅｃｔ
)
接口用于實現(xiàn)開始錄音。 當(dāng)主動調(diào)用ｗｘ
.
ｓｔｏｐＲｅｃｏｒｄ
(
Ｏｂｊｅｃｔ
)
接口或者錄音超過１ 分鐘時
,
系統(tǒng)自動結(jié)束錄音
,
并返回錄音文件的臨時文件路徑。 若要持久保存
,
則需要調(diào)用ｗｘ
.
ｓａｖｅＦｉｌｅ()接口。 其相關(guān)參數(shù)如圖：
２.停止錄音
ｗｘ
.
ｓｔｏｐＲｅｃｏｒｄ
(
Ｏｂｊｅｃｔ
)
接口用于實現(xiàn)主動調(diào)用停止錄音。
示例代碼：
wx.startRecord({
success:function(res){
var tempFilePath=tempFilePath
},
fail:function(res){
//錄音失敗
}
})
setTimeout(function(){
//結(jié)束錄音
wx.stopRecord()},10000)
運行效果：
3音頻播放控制ＡＰＩ
音頻播放控制ＡＰＩ 主要用于對語音媒體文件的控制
,
包括播放、暫停、停止及ａｕｄｉｏ 組件的控制
,
主要包括以下３ 個ＡＰＩ
:
?ｗｘ
.
ｐｌａｙＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
接口 用于實現(xiàn)開始播放語音。
ｗｘ
.
ｐａｕｓｅＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
接口 用于實現(xiàn)暫停正在播放的語音。
?ｗｘ
.
ｓｔｏｐＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
接口 用于結(jié)束播放語音。
１.播放語音
ｗｘ
.
ｐｌａｙＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
接口用于開始播放語音
,
同時只允許一個語音文件播放
,
如果前一個語音文件還未播放完
,
則中斷前一個語音文件的播放。 其相關(guān)參數(shù)如圖：
示例代碼:
wx.startRecord({
success:function(res){
var tempFilePath=res.tempFilePath
wx.playVoice({
//錄音完后立即播放
filePath:tempFilePath,
complete:function(){
}
})
}
})
２.暫停播放
ｗｘ
.
ｐａｕｓｅＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
用于暫停正在播放的語音。
示例代碼：
wx.startRecord({
success:function(res){
var tempFilePath=res.tempFilePath
wx.playVoice({
filePath: tempFilePath
})
setTimeout(function(){
//暫停播放
wx.pauseVoice()
},5000)
}
})
? ? ? ?
????????
再次調(diào)用ｗｘ
.
ｐｌａｙＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
播放同一個文件時
, 會從暫停處開始?播放。 如果想從頭開始播放,
則需要先調(diào)用ｗｘ
.
ｓｔｏｐＶｏｉｃｅ(Ｏｂｊｅ cｔ)。
????????３.結(jié)束播放
????????
ｗｘ
.
ｓｔｏｐＶｏｉｃｅ
(
Ｏｂｊｅｃｔ
)
用于結(jié)束播放語音。
示例代碼：
wx.startRecord({
success:function(res){
var tempFilePath=res.tempFilePath
wx.playVoice({
filePath:tempFilePath
})
setTimeout(function(){
wx.stopVoice()
},5000)
}
})
???????４音樂播放控制ＡＰＩ
????????
音樂播放控制ＡＰＩ 主要用于實現(xiàn)對背景音樂的控制
,
音樂文件只能是網(wǎng)絡(luò)流媒體
, 不?能是本地音樂文件。 音樂播放控制ＡＰＩ 主要包括以下８ 個ＡＰＩ:
?ｗｘ
.
ｐｌａｙＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
接口 用于播放音樂。
?ｗｘ
.
ｇｅｔＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙｅｒＳｔａｔｅ
(
Ｏｂｊｅｃｔ
)
接口 用于獲取音樂播放狀態(tài)。
?ｗｘ
.
ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
接口 用于定位音樂播放進(jìn)度。
?ｗｘ
.
ｐａｕｓｅＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
()
接口 用于實現(xiàn)暫停播放音樂。
?ｗｘ
.
ｓｔｏｐＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
()
接口 用于實現(xiàn)停止播放音樂。
ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙ
(
ＣａｌｌＢａｃｋ
)
接口 用于實現(xiàn)監(jiān)聽音樂播放。
?ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰａｕｓｅ
(
ＣａｌｌＢａｃｋ
)
接口 用于實現(xiàn)監(jiān)聽音樂暫停。
?ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＳｔｏｐ
(
ＣａｌｌＢａｃｋ
)
接口 用于實現(xiàn)監(jiān)聽音樂停止。
１
.
播放音樂
ｗｘ
.
ｐｌａｙＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
用于播放音樂
,
同一時間只能有一首音樂處于播放狀態(tài)
,
其相關(guān)參數(shù)如圖：
? ? ? ? ? ? ? ? ? ? ? ? ? 示例代碼：
wx.playBackgroundAudio({
dataUrl: 'http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3',
title:'有一天',
coverImgUrl:'http:///bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg',
success:function(res){
console.log(res)//成功返回playBackgroundAudio：ok
}
})
? ????????????????
２
.
獲取音樂播放狀態(tài)
????????
ｗｘ
.
ｇｅｔＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙｅｒＳｔａｔｅ
(
Ｏｂｊｅｃｔ
)
接口用于獲取音樂播放狀態(tài), 其相關(guān)參數(shù)如圖：
????????
接口調(diào)用成功后返回的參數(shù)如圖：
示例代碼：
wx.getBackgroundAudioPlayerState({
success:function(res){
var status=res.status
var dataUrl=res.dataUrl
var currentPosition=res.currentPosition
var duration=res.duration
var downloadPercent=res.downloadPercent
console.log("播放狀態(tài)："+status)
console.log("音樂文件地址："+dataUrl)
console.log("音樂文件當(dāng)前播放位置："+currentPosition)
console.log("音樂文件的長度："+duration)
console.log("音樂文件的下載進(jìn)度："+downloadPercent)
}
})
????????
３
.
控制音樂播放進(jìn)度
????????
ｗｘ
.
ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
接口用于控制音樂播放進(jìn)度
,
其相關(guān)參數(shù)如圖：
?示例代碼：
wx.seekBackgroundAudio({
position: 30,
})
????????
４
.
暫停播放音樂
ｗｘ
.
ｐａｕｓｅＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
()
接口用于暫停播放音樂。
示例代碼：
wx.playBackgroundAudio({
dataUrl: '/music/a.mp3',
title:'我的音樂',
coverImgUrl:'images/poster.jpg',
success:function(){
console.log('開始播放音樂了');
}
});
setTimeout(function(){
console.log('暫停播放');
wx.pauseBackgroundAudio();
},5000);//5秒后自動暫停
５
.
停止播放音樂
ｗｘ
.
ｓｔｏｐＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
()
接口用于停止播放音樂。
示例代碼：
wx.playBackgroundAudio({
dataUrl: '/music/a.mp3',
title:'我的音樂',
coverImgUrl:'images/poster.jpg',
success:function(){
console.log('開始播放音樂了');
}
});
setTimeout(function(){
console.log('暫停播放');
wx.stopBackgroundAudio();
},5000);//5秒后自動停止
６
.
監(jiān)聽音樂播放
ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙ
(
ＣａｌｌＢａｃｋ
)
接口用于實現(xiàn)監(jiān)聽音樂播放
,
通常被ｗｘ
.
ｐｌａｙＢａｃｋ￣ｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
方法觸發(fā)
,
在ＣａｌｌＢａｃｋ 中可改變播放圖標(biāo)。
示例代碼：
wx.playBackgroundAudio({
dataUrl: this.data.musicData.dataUrl,
title:this.data.musicData.title,
coverImgUrl:this.data.musicData.coverImgUrl,
success:function(){
wx.onBackgroundAudioStop(function(){
that.setData({
isplayingMusic:false
})
})
}
})
７
.
監(jiān)聽音樂暫停
ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰａｕｓｅ
(
ＣａｌｌＢａｃｋ
)
接口用于實現(xiàn)監(jiān)聽音樂暫停
,
通常被ｗｘ
.
ｐａｕｓｅ￣ＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
()
方法觸發(fā)。 在ＣａｌｌＢａｃｋ 中可以改變播放圖標(biāo)。
８
.
監(jiān)聽音樂停止
ｗｘ
.
ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＳｔｏｐ
(
ＣａｌｌＢａｃｋ
)
接口用于實現(xiàn)監(jiān)聽音樂停止
,
通常被音樂自然播放停止或ｗｘ
.
ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ
(
Ｏｂｊｅｃｔ
)
方法導(dǎo)致播放位置等于音樂總時長時觸發(fā)。 在ＣａｌｌＢａｃｋ 中可以改變播放圖標(biāo)
。
以上的綜合案例：
wxml:
wxss:
.bgaudio{
height: 350rpx;
width: 350rdpx;
margin-bottom: 100rpx;
}
.control-view image{
height: 64rpx;
width: 64rpx;
margin: 30rpx;
}
js:
Page({
data:{
//記錄播放狀態(tài)
isPlaying:false,
//記錄covering，僅當(dāng)音樂初始時和播放停止時，使用默認(rèn)的圖片。播放中和暫停時，都使用當(dāng)前音樂的圖片
coverImg:"",
changedImg:false,
//音樂內(nèi)容
music:{
"url":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
"title":"盛曉玫-有一天",
"coverImg":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"
},
},
onLoad:function(){
//頁面加載時，注冊監(jiān)聽事件
this.onAudioState();
},
//點擊播放或者暫停按鈕時觸發(fā)
onAudioTap:function(event){
if(this.data.isPlaying){
//如果在正常播放狀態(tài)，就暫停，并修改播放的狀態(tài)
wx.pauseBackgroundAudio();
}else{
//如果在暫停狀態(tài)，就開始播放，并修改播放的狀態(tài)
let music=this.data.music;
wx.playBackgroundAudio({
dataUrl: music.url,
title:music.title,
coverImgUrl:music.coverImg
})
}
},
//點擊即可停止播放音樂
onStopTap:function(){
let that=this;
wx.playBackgroundAudio({
success:function(){
//改變coverImg和播放狀態(tài)
that.setData({isPlaying:false,changedImg:false});
}
})
},
//點擊“快進(jìn)10秒”或者“快退10秒”時，觸發(fā)
onPositionTap:function(event){
let how =event.target.dataset.how;
//獲取音樂的播放狀態(tài)
wx.getBackgroundAudioPlayerState({
success:function(res){
//僅在音樂播放中，快進(jìn)和快退才生效
//音樂的播放狀態(tài)，1表示播放中
let status=res.status;
if(status===1){
//音樂的總時長
let duration =res.duration;
if(how==="0"){
//注意:快退時，當(dāng)前播放位置快退10秒小于0時，直接設(shè)置position為1，否則，直接減去10秒
//快退達(dá)到的位置
let position=currentPosition-10;
if(position<0){
position=1;
}
//執(zhí)行快退
wx.seekBackgroundAudio({
position:position
});
//給出一個友情提示，在實際應(yīng)用中，請刪除?。?！
wx.showToast({title:"快退10s",duration:500 });
}
if(how==="1"){
//注意：快進(jìn)時，當(dāng)前播放位置快進(jìn)10秒后大于總時長時，直接設(shè)置position為總時長減1
//快進(jìn)達(dá)到的位置
let position=currentPosition+10;
if(position>duration){
position=duration-1;
}
//執(zhí)行快進(jìn)
wx.seekBackgroundAudio({
position: position
});
//給出一個友情提示，在實際應(yīng)用中，請刪除！??！
wx.showToast({ title: "快進(jìn)10s",duration:500 });
}
}else{
//給出一個友情提示，在實際應(yīng)用中，請刪除?。?！
wx.showToast({title: "音樂未播放",duration:800});
}
}
})
},
//音樂播放狀態(tài)
onAudioState:function(){
let that=this;
wx.onBackgroundAudioPlay(function(){
//當(dāng)wxwx.playBackgroundAudio()執(zhí)行時觸發(fā)
//改變coverImg和播放狀態(tài)
that.setData({isPlaying:true,changedImg:true});
console.log("on play");
});
wx.onBackgroundAudioPause(function(){
//當(dāng)wxwx.pauseBackgroundAudio()執(zhí)行時觸發(fā)
//僅改變播放狀態(tài)
that.setData({isPlaying:false});
console.log("on pause");
});
wx.onBackgroundAudioStop(function() {
//當(dāng)音樂自行播放結(jié)束時觸發(fā)
//改變coverImg和播放狀態(tài)
that.setData({isPlaying:false,changedImg:false});
console.log("on stop");
});
}
})
3.文件API
從網(wǎng)絡(luò)上下載或錄音的文件都是臨時保存的
,
若要持久保存
,
需要用到文件ＡＰＩ。 文件ＡＰＩ 提供了打開、保存、刪除等操作本地文件的能力
,
主要包括以下５ 個ＡＰＩ 接口
:
?
ｗｘ
.
ｓａｖｅＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
接口 用于保存文件到本地
。
?ｗｘ
.
ｇｅｔＳａｖｅｄＦｉｌｅＬｉｓｔ
(
Ｏｂｊｅｃｔ
)
接口 用于獲取本地已保存的文件列表。
ｗｘ
.
ｇｅｔＳａｖｅＦｉｌｅＩｎｆｏ
(
Ｏｂｊｅｃｔ
)
接口 用于獲取本地文件的文件信息。
?ｗｘ
.
ｒｅｍｏｖｅＳａｖｅＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
接口 用于刪除本地存儲的文件。
?ｗｘ
.
ｏｐｅｎＤｏｃｕｍｅｎｔ
(
Ｏｂｊｅｃｔ
)
接口 用于新開頁面打開文檔
,
支持格式
:
ｄｏｃ、ｘｌｓ、ｐｐｔ、ｐｄｆ、ｄｏｃｘ、ｘｌｓｘ、ｐｐｔｓ
。
１.保存文件
ｗｘ
.
ｓａｖｅＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
用于保存文件到本地, 其相關(guān)參數(shù)如圖：
示例代碼：
saveImg:function(){
wx.chooseImage({
count:1,
sizeType:['original','compressed'],//可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType:['album','camera'],//可以指定來源是相冊還是相機，默認(rèn)二者都有
success:function(res){
var tempFilePaths=res.tempFilePaths[0]
wx.saveFile({
tempFilePath:tempFilePaths,
success:function(res){
var saveFilePath=res.saveFilePath;
console.log(saveFilePath)
}
})
}
})
}
２.獲取本地文件列表
ｗｘ
.
ｇｅｔＳａｖｅｄＦｉｌｅＬｉｓｔ
(
Ｏｂｊｅｃｔ
)
接口用于獲取本地已保存的文件列表
,
如果調(diào)用成功
,
則返回文件的本地路徑、文件大小和文件保存時的時間戳
(
從１９７０
/
０１
/
０１ ０８
:
００
:
００ 到當(dāng)前時間的秒數(shù)) 文件列表。 其相關(guān)參數(shù)如圖：
示例代碼：
wx.getSavedFileList({
success:function(res){
that.setData({
fileList:res.fileList
})
}
})
３.獲取本地文件的文件信息
ｗｘ
.
ｇｅｔＳａｖｅＦｉｌｅＩｎｆｏ
(
Ｏｂｊｅｃｔ
)
接口用于獲取本地文件的文件信息
,
此接口只能用于獲取已保存到本地的文件
,
若需要獲取臨時文件信息
,
則使用ｗｘ
.
ｇｅｔＦｉｌｅＩｎｆｏ
(
Ｏｂｊｅｃｔ)接口。 其相關(guān)參數(shù)如圖：
wx.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath:tempFilePaths,
success:function(res){
var saveFilePath = res.saveFilePath;
wx.getSavedFileInfo({
filePath:saveFilePath,
success:function(res){
console.log(res.size)
}
})
}
})
}
})
? ? ? ??????????????????４.刪除本地文件
????????????????
ｗｘ
.
ｒｅｍｏｖｅＳａｖｅＦｉｌｅ
(
Ｏｂｊｅｃｔ
)
接口用于刪除本地存儲的文件
,
其相關(guān)參數(shù)如圖;
? ??????????????????????????????????
示例代碼：
wx.getSavedFileList({
success:function(res){
if(res.fileList.Length > 0 ){
wx.removeSavedFile({
filePath:res.fileList[0].filePath,
complete:function(res){
console.log(res)
}
})
}
}
})
????????????????５.打開文檔
????????????????
ｗｘ
.
ｏｐｅｎＤｏｃｕｍｅｎｔ
(
Ｏｂｊｅｃｔ
)
接口用于新開頁面打開文檔
,
支持格式有ｄｏｃ、ｘｌｓ、ｐｐｔ、ｐｄｆ、ｄｏｃｘ、ｘｌｓｘ、ｐｐｔｘ, 其相關(guān)參數(shù)如圖：
示例代碼：
wx.downloadFile({
url: "http://localhost/fm2.pdf",
success:function(res){
var tempFilePath = res.tempFilePath;
wx.openDocument({
filePath: tempFilePath,
success:function(res){
console.log("打開成功")
}
})
}
})
?4.本地數(shù)據(jù)及緩存API
小程序提供了以鍵值對的形式進(jìn)行本地數(shù)據(jù)緩存功能
,
并且是永久存儲的
,
但最大不超過１０ ＭＢ
,
其目的是提高加載速度。 數(shù)據(jù)緩存的接口主要有４ 個
:
ｗｘ
.
ｓｅｔＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ
)
或ｗｘ
.
ｓｅｔＳｔｏｒａｇｅＳｙｎｃ
(
ｋｅｙ
,
ｄａｔａ
)
接口 用于設(shè)置緩存數(shù)據(jù)。
ｗｘ
.
ｇｅｔＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ
)
或ｗｘ
.
ｇｅｔＳｔｏｒａｇｅＳｙｎｃ
(
ｋｅｙ
)
接口 用于獲取緩存數(shù)據(jù)。
ｗｘ
.
ｒｅｍｏｖｅＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ
)
或ｗｘ
.
ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ
(
ｋｅｙ
)
接口 用于刪除指定緩存數(shù)據(jù)
。
ｗｘ
.
ｃｌｅａｒＳｔｏｒａｇｅ
()
或ｗｘ
.
ｃｌｅａｒＳｔｏｒａｇｅＳｙｎｃ
()
接口 用于清除緩存數(shù)據(jù)。
其中
,
帶Ｓｙｎｃ 后綴的為同步接口
,
不帶Ｓｙｎｃ 后綴的為異步接口。
１ 保存數(shù)據(jù)
１.ｗｘ.ｓｅｔＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)
ｗｘ
.
ｓｅｔＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ
)
接口將數(shù)據(jù)存儲到本地緩存接口指定的ｋｅｙ 中
,
接口執(zhí)行后會覆蓋原來ｋｅｙ 對應(yīng)的內(nèi)容。 其參數(shù)如表：
示例代碼：
//js
wx.setStorage({
kry:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})
２.ｗｘ.ｓｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ,ｄａｔａ)
wx.setStorageSync('age','25')
?
ｗｘ
.
ｓｅｔＳｔｏｒａｇｅＳｙｎｃ
(
ｋｅｙ
,
ｄａｔａ
)
是同步接口
,
其參數(shù)只有ｋｅｙ 和ｄａｔａ。
２ 獲取數(shù)據(jù)
１.ｗｘ.ｇｅｔＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)
ｗｘ
.
ｇｅｔＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ
)
接口是從本地緩存中異步獲取指定ｋｅｙ 對應(yīng)的內(nèi)容。 其相關(guān)參數(shù)如圖：
wx.setStorage({
kry:'name',
success:function(res){
console.log(res.data)
},
})
２.ｗｘ.ｇｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)
ｗｘ.ｇｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)從本地緩存中同步獲取指定ｋｅｙ 對應(yīng)的內(nèi)容。 其參數(shù)只有ｋｅｙ。
//js
try{
var value = wx.getStorageSync('age')
if(value){
console.log("獲取成功" + value)
}
}catch(e){
console.log("獲取失敗")
}
３ 刪除數(shù)據(jù)
１.ｗｘ.ｒｅｍｏｖｅＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)
ｗｘ
.
ｒｅｍｏｖｅＳｔｏｒａｇｅ
(
Ｏｂｊｅｃｔ) 接口用于從本地緩存中異步移除指定ｋｅｙ。 其相關(guān)參數(shù)如圖：
?
示例代碼：
wx.removeStorage({
key: 'name',
success:function(res){
console.log("刪除成功")
},
fail:function(){
console.log("刪除失敗")
}
})
２.ｗｘ.ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)
ｗｘ
.
ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ
(
ｋｅｙ
)
接口用于從本地緩存中同步刪除指定ｋｅｙ 對應(yīng)的內(nèi)容。 其參數(shù)只有ｋｅｙ。
示例代碼:
try{
wx.removeStorageSync('name')
}catch(e){
//Do something when catch error
}
5? 位置信息API
ｗｘ
.
ｃｈｏｏｓｅＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
接口 用于選擇位置信息。
?ｗｘ
.
ｏｐｅｎＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
接口 用于通過地圖顯示位置。
１ 獲取位置信息
ｗｘ
.
ｇｅｔＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
接口用于獲取當(dāng)前用戶的地理位置、速度
,
需要用戶開啟定位功能
,
當(dāng)用戶離開小程序后
,
無法獲取當(dāng)前的地理位置及速度
,
當(dāng)用戶點擊“顯示在聊天頂部” 時
,
可以獲取到定位信息, 其相關(guān)參數(shù)如圖：
ｗｘ
.
ｇｅｔＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
調(diào)用成功后, 返回的參數(shù)如圖：
//js
wx.getLocation({
type:'wgs84',
success:function(res){
console.log("經(jīng)度" + res.longitude);
console.log("緯度" + res.latitude);
console.log("速度" + res.longitude);
console.log("位置的精確度" + res.accuracy);
console.log("水平精確度" + res.horizontalAccuracy);
console.log("垂直精確度" + res.verticalAccuracy);
},
})
運行結(jié)果圖：
２ 選擇位置信息
ｗｘ
.
ｃｈｏｏｓｅＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
接口用于在打開的地圖中選擇位置, 用戶選擇位置后可返回當(dāng)前位置的名稱、地址、經(jīng)緯度信息。 其相關(guān)參數(shù)如圖：
?
ｗｘ
.
ｃｈｏｏｓｅＬｏｃａｔｉｏｎ
(
Ｏｂｊｅｃｔ
)
調(diào)用成功后, 返回的參數(shù)如圖：
//js
wx.chooseLocation({
success:function(res){
console.log("位置的名稱" + res.name);
console.log("位置的地址" + res.address);
console.log("位置的經(jīng)度" + res.longitude);
console.log("位置的緯度" + res.latitude);
},
})
運行效果圖：
３ 顯示位置信息
ｗｘ.ｏｐｅｎＬｏｃａｔｉｏｎ(Ｏｂｊｅｃｔ)接口用于在微信內(nèi)置地圖中顯示位置信息, 其參數(shù)如圖：
//js
wx.getLocation({
type:'gcj02',
success:function(res){
var latitude = res.latitude
var longitude = res.longitude
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale:10,
name:'智慧國際酒店',
address:'西安市長安區(qū)西長安區(qū)300號'
})
}
})
運行效果圖：
6? 設(shè)備相關(guān)API
ｗｘ
.
ｍａｋｅＰｈｏｎｅＣａｌｌ
(
Ｏｂｊｅｃｔ
)
接口 用于撥打電話。
?ｗｘ
.
ｓｃａｎＣｏｄｅ
(
Ｏｂｊｅｃｔ
)
接口 用于掃描二維碼。
１ 獲取系統(tǒng)信息
ｗｘ
.
ｇｅｔＳｙｓｔｅｍＩｎｆｏ
(
Ｏｂｊｅｃｔ
)
接口、ｗｘ
.
ｇｅｔＳｙｓｔｅｍＩｎｆｏＳｙｎｃ()接口分別用于異步和同步獲取系統(tǒng)信息。 其相關(guān)參數(shù)如圖：
ｗｘ
.
ｇｅｔＳｙｓｔｅｍＩｎｆｏ
()
接口或ｗｘ
.
ｇｅｔＳｙｓｔｅｍＩｎｆｏＳｙｎｃ
()
接口調(diào)用成功后, 返回系統(tǒng)相關(guān)如下圖所示:
//js
wx.getSystemInfo({
success:function(res){
console.log("手機型號" + res.model);
console.log("設(shè)備像素比" + res.pixelRatio);
console.log("窗口的寬度" + res.windowWidth);
console.log("窗口的高度" + res.windowHeight);
console.log("微信的版本號" + res.version);
console.log("操作系統(tǒng)版本" + res.system);
console.log("客戶端平臺" + res.platform);
},
})
運行結(jié)果：
２ 網(wǎng)絡(luò)狀態(tài)
１.獲取網(wǎng)絡(luò)狀態(tài)
ｗｘ
.
ｇｅｔＮｅｔｗｏｒｋＴｙｐｅ
(
Ｏｂｊｅｃｔ
)
用于獲取網(wǎng)絡(luò)類型, 其相關(guān)參數(shù)如圖:
//js
wx.getNetworkType({
success:function(res){
console.log(res.networkType)
},
})
如果ｗｘ
.
ｇｅｔＮｅｔｗｏｒｋＴｙｐｅ
( )
接口被成功調(diào)用
,
則返回網(wǎng)絡(luò)類型包
,
有ｗｉｆｉ、２Ｇ、３Ｇ、４Ｇ、ｕｎｋｎｏｗｎ
(
Ａｎｄｒｏｉｄ 下不常見的網(wǎng)絡(luò)類型
)
、ｎｏｎｅ
(
無網(wǎng)絡(luò)
)
。
２.監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化
ｗｘ.ｏｎＮｅｔｗｏｒｋＳｔａｔｕｓＣｈａｎｇｅ(ＣａｌｌＢａｃｋ)接口用于監(jiān)聽網(wǎng)絡(luò)狀態(tài)變化, 當(dāng)網(wǎng)絡(luò)狀態(tài)變化時,返回當(dāng)前網(wǎng)絡(luò)狀態(tài)類型及是否有網(wǎng)絡(luò)連接。.
//js
wx.onNetworkStatusChange(function(res){
console.log("網(wǎng)絡(luò)是否連接" + res.isConnected)
console.log("變化后的網(wǎng)絡(luò)類型" + res.networkType)
})
３ 撥打電話
ｗｘ
.
ｍａｋｅＰｈｏｎｅＣａｌｌ
(
Ｏｂｊｅｃｔ
)
接口用于實現(xiàn)調(diào)用手機撥打電話
,
其相關(guān)參數(shù)如圖：
????????????????????????
//js
wx.makePhoneCall({
phoneNumber: '15350265164',
})
??????????????４ 掃描二維碼
????????????????
ｘ
.
ｓｃａｎＣｏｄｅ
(Ｏｂｊｅｃｔ)接口用于調(diào)起客戶端掃碼界面, 掃碼成功???????? ? ? ? ? ? ? ?返回相應(yīng)的內(nèi)容, 其相關(guān)參數(shù)如圖：
????????????????
掃碼成功后
,
返回的數(shù)據(jù)如圖：
//js
wx.scanCode({
success:(res) => {
console.log(res.result)
console.log(res.scanType)
console.log(res.charSet)
console.log(res.path)
}
})
wx.scanCode({
onlyFromCamera:true,
success:(res) => {
console.log(res)
}
})
柚子快報激活碼778899分享：微信小程序的API應(yīng)用
推薦鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Cdiscount跨境折扣坊
