(一)网络API
微信小程序处理的数据通常从后台服务器获取,再将处理过的结果保存到后台服务器,这就要求微信小程序要与后台进行交互的能力。
1.发起网络请求
wx.request(Object)实现向服务器发送请求、获取数据等各种网络交互操作,其相关参数如表:
例如通过wx.request(Object)获取百度(http://www.baidu.com)首页的数据。
示例代码如下:
//baidu.wxml < buttontype = "primary"bindtap ="getbaidutap">获取HTML数据<Ab
ton >
<textareavalue =|llhtml||'auto -heightmaxlength ='0'> </textarea>
//baidu.js
Page({
data:{
html:"
},
getbaidutap:function(){
var that = this;
wx.request({
url:'https://www.baidu.com',//百度网址
data: {},//发送数据为空
header: {'content -Type': 'application/json'},
success:function(res)|
console.log(res);
that,setData({
html: res.data
})
}
})
}
})
运行截图:
例如,通过wx.request(Object)的GET方法获取邮政编码对应的地址信息。
示例代码如下:
//postcode.wxml
<view>邮政编码:</view >
<inputtype = "text "bindinput ="input "placeholder ='6位邮政编码'/>
<buttontype = "primary"bindtap ="find*>查询</button>
<blockwx:for = "{{address}}">
<blockwx:for ="{{item}}">
<text > {{item|}</text >
</block >
</block >
//postcode.js Page(/
data: {
postcode:",//查询的邮政编码
address: [],//邮政编码对应的地址
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 selt = this;
//显示toast 提示消息
wx.showtoast({
title:'正在查询,请精候.....,
icon:'loading'
duration:10000
});
wx.request(l
url:'https://v.juhe.cn/postcode /query',//第三方后台服务器
data:{
'postcode'; postcode,
'key': '0ff9bfccdf147476e067de994eb5496e'//第三方提供
},
header: {
'Content -Type': 'application/json',
},
method:'GET',//方法为GET
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//获取到的数据
})
}
else{
self.setData({
errMsg;res.data.reason llres.data.reason,//错误原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})
运行截图:
2.上传文件
wx.uploadFile(Object)接口用于将本地资源上传到本地服务器,并在本地发起一个HTTPS POST请求,其相关参数如表:
通过wx.uploadFile(Object),可以将图片上传至服务器并显示,示例代码如下:
//upload.wxml
<buttontype = "primary"bindtap = "uploadimage">上传图片</button>
<imagesrc = *||img|| "mode = "widthFix"/>
//upload.js
Page({
data:{
img:null,
uploadimage:function( ){
var that = this;
//选择图片
wx.chooseImage({
success:function(res){
var tempFilePaths = res.tempFilePaths
upload(that,tempFilePaths);
}
function upload(page,path){
显示toast 提示消息
wx.showToast({
icon:"loading",
title:"正在上传"|),
}),
wx.uploadFile(l
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)l
console.log(e);
wx.showModal({
title:'提示',
content:'上传失败'
showCancel:false
})
},
complete:function( )
//隐藏 Toast
wx.hideToast();
}
})
}
}
})
3.下载文件
wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地,在客户端直接发起一个HTTP GET请求,返回文件的本地临时路径。其相关参数如表:
例如,通过wx.downloadFile(Object)实现从服务器中下载图片,后台服务采用WAMP软件在本机搭建。
示例代码如下:
//down1oadfile.wxml
<buttontype ="primary "bindtap ='downloadimage'>下载图像</button>
<imagesrc = " || img||" mode = 'widthFix'style =" width:90% ; height500px"> < /image >
//down1oadFile.js
Page({ data:{
img:null
},
downloadimage:function( ) {
var that = this;
wx.down1oadFile(l
url:"http://iocalhost/1.jpg",//通过WAMP软件实现
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})
(二)多媒体API
多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API等,其目的是丰富小程序的页面功能。
1.图片API
图片API实现对相机拍照图片或本地相册图片进行处理,主要包括一下4个API接口:
(1)选择图片或拍照
wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照。其相关参数如表:
若调用成功,则返回tempFilePaths和tempFile。
(2)预览图片
wx.previewImage(Object)接口主要用于预览图片,其相关参数如表:
(3)获取图片信息
wx.getImageInfo(Object)接口用于获取图片信息,其相关参数如表:
(4)保存图片到系统相册
wx.saveImageToPhotosAlbum(Object)接口用于保存图片到相册,其相关参数如表:
2.录音API
(1)开始录音
wx.startRecord(Object)接口用于实现开始录音。其相关参数如表:
(2)停止录音
wx.stopRecord(Object)接口用于实现主动调用停止录音。
3.音频播放控制API
(1)播放语音
wx.playVoice(Object)接口用于开始播放语音,同时只允许一个语音播放文件,如果前一个语音文件还未播放完,则中断前一个语音文件的播放。其相关数据如表:
(2)暂停播放
wx.pauseVoice(Object)用于暂停播放的语音。
(3)结束播放
wx.stopVoice(Object)语音结束播放语音。
4.音乐播放控制API
(1)播放音乐
wx.playBackgroundAudio(0bject)用于播放音乐,同一时间只能有一首音乐处于播放状态,其相关参数如表:
(2)获取音乐播放状态
wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态,其相关参数如表:
(3)控制音乐播放进度
wx.seekBackgroundAudio(Object)接口用于播放进度,其相关参数如表:
(4)暂停播放音乐
wx.pauseBackgroundAudio()接口用于暂停播放音乐。
(5)停止播放音乐
wx.stopBackgroundAudio()接口用于实现停止播放音乐
(6)监听音乐播放
wx.onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放,通常被wx.playBackgroundAudio(Object)方法触发,在CallBack中可改变播放图标。
(7)监听音乐暂停
wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停,通常被wx.pauseBackground()方法触发。在CallBack中可以改变播放图标。
(8)监听音乐停止
wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止。
(9)案例展示
music.wxml的代码如下:
<viewclass = "cont ainer">
< imageclass = " bg audio"src = "{{changedImg? music.coverImg:/im-
7
age/background.png'}}
<viewclass ="cont rol -view">
<!--使用 data -how定义一个0表示快退10秒 -->
<imagesrc ="/image/pre.png "bindta tp="onPositionTap"data -how="0"/><imagesrc = "/image/{{isPlaying?'pause':'play'|} .png " bindtap = onAudioTap"/>
<imagesrc ="/image/stop.png "bin dtap = "onStopTap"<!--使用data-how定义一个1表示快进10 秒 -->
<imagesrc ="/image/next.png "bindt ap = "onPositionTap"data - how ="1"/>
< /view >
< /view >
music.wxss代码如下:
.bgaudio{
height:350rpx;
width:350rpx;
margin -bottom:100rpx;
}
.control -viewimage{
height:64rpx;
width:64rpx;
margin:30rpx;
}
music.json代码如下:
{}
music.js代码如下:
1 Page({
2 data: {
3 //记录播放状态
4 isPlaying:false,
5 //记录coverImg,仅当音乐初始时和播放停止时,使用默认的图片。播放中和暂停都使用当前音乐的图片6 coverImg
changedImg:false,
^
8 //音乐内容
9 music:
10 "url":
“http://bmob-cdn-16488 .b0 .upaiyun.com/2018/02 /09/117e4a1b405195b18061299e2de89597 .mp3".
12 "title":"盛晓玫-有一天",
13 "coverImg":
14"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/604297140e9681880Cc3d3e581f7724.jpg"15
15
16
17 onLoad:function()
18//页面加载时,注册监听事件19 this.onAudioState();20
21//点击播放或者暂停按钮时触发
22 onAudioTap:function( event){
23 if(this.data.isPlaying){
24 //如果在正常播放状态,就暂停,并修改播放的状态
25 wx.pauseBackgroundAudio();
26 |else {
27 //如果在暂停状态,就开始播放,并修改播放的状态
28 letmusic = this.data.music;
29
wx.playBackgroundAudio({
30 dataUrl: music.url,
31 title:music.title,
32 coverImgUrl:music.coverImg
33 1)
34
35 |,
36 //点击即可停止播放音乐
37 onStopTap:function(){
38 let that = this;
39 wx.stopBackgroundAudio(l
40 success:function()
//改变coverImg 和播放状态
that.setData(| isPlaying:false,changedImg: false|);
43
44 1)
45
46 //点击“快进10秒"或者“快退10秒”时,触发
47 onPositionTap;function( event)1
48 et how = event.target.dataset. how:
49 //获取音乐的播放状态
50 wx.getBackgroundAudioPlayerState(l
51 success:function(res)
52 //仅在音乐播放中,快进和快退才生效
53//音乐的播放状态,1表示播放中
54 let status = res.status:
55 if(status ===1)l
56 //音乐的总时长
57 let duration = res.duration;
58 //音乐播放的当前位置
59 let currentPosition = res.currentPosition;
60 if(how ==="0"){
61 //注意:快退时,当前播放位置快退10秒小于0时,直接设置position 为1;否则,直接减去10秒
63 //快退到达的位置
64 let position = currentPosition - 10;65 if(position <0){
66 position =1;
67
68 //执行快退
69 wx.seekBackgroundAudio(
70 position; position
71 l);
72//给出一个友情提示,在实际应用中,请删除!!!
73 wx.showToast(| title:"快退10s",duration: 500 1);
74
75 if(how ==="1")|
76 //注意:快进时,当前播放位置快进10秒后大于总时长时,直接设置position为总时长减1
77 //快进到达的位置
78 let position =currentPosition +10:
79 if(position >duration){
80 position =duration -1;
81
82 //执行快进
83 wx.seekBackgroundAudio(l
84 position: position
85 l);
86 //给出一个友情提示,在实际应用中,请删除!!!
87 wx.showToast(| title:"快进 10s",duration:500 1);
88
89 lelse'{
90//给出一个友情提示,在实际应用中,请删除!!!
91
wx.showToast({ title:"音乐未播放",duration:800 |);
92}
93}
94})
95},
96 //音乐播放状态
97 onAudioState:function(){
98 let that =this;
99 wx. onBackgroundAudioPlay(function()|
100//当wx.playBackgroundAudio()执行时触发
101 //改变coverImg和播放状态
102 that.setData(| isPlaying:true,changedImg: true l);
103 console.log( "on play");
104 (1);
105 wx.onBackgroundAudioPause(function()|
106 //当 wx. pauseBackgroundAudio()执行时触发
107 //仅改变播放状态
108 that.setData(| isPlaying:false|);
(三)文件API
(1)保存文件
wx.saveFile(Object)用于保存文件到本地,其相关参数如表:
代码如下:
saveImg:function(){
wx.chooseImage({
count:1,/默认值为9
sizeType:['original',compressed],/可以指定是原图还是压缩图,默认
者都有
sourceType:[album,camera’],/可以指定来源是相册还是相机,默认二
都有
success:function(res)var tempFilePaths =res.tempFilePaths0wx.saveFile(tempFilePath:tempFilePathssuccess:function(res)var saveFilePath =res.savedFilePath;
console.1og(saveFilePath)
}
})
}
})
}
(2)获取本地文件列表
wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表,如果调用成功,则返回文件的本地路径、文件大小和文件保存时的时间戳文件列表。其相关参数如表:
代码如下:
wx.getSavedFileList({
success:function(res){
that.setData({
fileList:res.fileList
})
}
})
(3)获取本地文件的文件信息
wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息,此接口只能用于获取已保存到本地的文件,其相关参数如表:
(4)删除本地文件
wx.removeSaveFile(Object)接口用于删除本地存储的文件,其相关参数如表:
代码如下:
wx.getSavedFileList({
success:function(res){
if(res.fileList.length>0){
wx.removeSavedFile({
filePath:res.fileList[0].filePath,
complete:function(res){
console.log(res)
}
})
}
}
})
运行截图:
(5)打开文档
wx.openDocument(Object)用于新开页面打开文档,支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx,其相关参数如表:
(四)本地数据及缓存API
小程序提供了以键值对的形式进行本地数据缓存功能,并且是永久存储的,但最大不超过10MB,其目的是提高加载速度。数据缓存的接口主要有4个:
wx.setStorage(Object)或wx.setStorageSync(key,data)接口 用于设置缓存数据 wx.getStorage(Object)或wx.getStorageSync(key)接口 用于获取缓存数据。wx.removeStorage(Object)或wx.removeStorageSync(key)接口 用于删除指定缓存数据。
1.保存数据
(1)wx. setStorage( Object)
wx.setStorage(0bject)接口将数据存储到本地缓存接口指定的key中,接口执行后会覆盖原来key对应的内容。其参数如表所示。其参数如表:
(2)获取本地文件列表
wx.seStorage(Object)
wx.setStorageSyuc(key,data)是同步接口,其参数只有key和deta。
代码如下:
wx.setStorage({
Key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})
2.获取数据
(1)wx.getStorage(Object)
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应内容。其相关参数如表所示。
表 wx. getStorage(Object)相关参数
代码如下:
wx.getstorage({ key:'name',
success:function(res){
console.log(res.data)
},
})
(2)
wx. getStorageSync( key)
wx.gelStorageSyne(key)从本地缓存中同步获取指定key 对应的内容。其参数只有key。
代码如下:
//获取数据 同步 js文件
try{
var value=wx.getStorageSync('age')
if(value){
console.log("获取成功"+value)
}
}catch(e){
console.log("获取失败")
}
3.删除数据
wx. removeStorage( Object )
wx.removeStorage(0bject)接口用于从本地缓存中异步移除指定key。其相关参数如表所示
代码如下:
//删除数据 异步 js文件
wx.removeStorage({
key: 'name',
success:function(res){
console.log("删除成功")
},
fail:function(){
console.log("删除失败")
}
})
(2)wx.removeSlorageSyne( key )
wx.removeStorageSyne(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key
//删除数据 同步 js文件
try{
wx.removeStorageSync('name')
}catch(e){
//Do something when catch error
},
4.清空数据
(1)wx.clearStorage( )
wx.clearStorage()接口用于异步清理本地数据缓存,没有参数。示例代码如下:
//清空数据 异步 js文件
wx.getStorage({
key:'name',
success:function(res){
//清理本地数据缓存
wx.clearStorage()
}
})
(2)wx.clearStroageSyne( )
wx.clearStroageSyne()接口用于同步清理本地数据缓存。示例代码如下:
//清空数据 同步 js文件
try{
wx.clearStorageSync()
}catch(e){}
(五)位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息,小程序支持WGS84和GCj02标准,WGS84标准为地球坐标系,是国际上通用的坐标系;GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统,是由WGS84坐标系经加密后的坐标系,又称为火星坐标系。默认为WGS84标准,若要查看位置需要使用GCj02标准。主要包括以下3个API接口:
■ wx.getLocation(Object)接口用于获取位置信息。
■ wx.chooseLocation(Object)接口 用于选择位置信息。
■ wx.openLocation(Object)接口用于通过地图显示位置。
1.获取位置信息
wx. getLocation(Object)接口用于获取当前用户的地理位置、速度,需要用户开启定位功能,当用户离开小程序后,无法获取当前的地理位置及速度,当用户点击“显示在聊天顶部”时,可以获取到定位信息,其相关参数如表所示。
表 wx. getLocation(Object)相关参数
wx. getLocation(Object)调试成功后,返回的参数如表6-23所示。
代码如下:
wx.getLocation({
type:'wgs84',
success:function(res){
console.log("经度:"+res.longitude); console.log("纬度:"+res.latitude); console.log("速度:"+res.longitude);
console.log("位置的精确度:"+res.accuracy);
console.log("水平精确度:"+res.horizontalAccuracy); console.log("垂直精确度:"+res.verticalAccuracy);},
})
2.选择位置信息
wx. chooseLocation(Object)接口用于在打开的地图中选择位置,用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表所示。
代码如下:
wx.getLocation({
type:'gcj02',//返回可以用于wx.openLocation的经纬度
success:function(res){
var latitude = res.latitude
var longitude= res.longitude
wx.openLocation({
latitude: latitude,
longitude:longitude,
scale:10,
name:'智慧国际酒店',
address:'西安市长安区西长安区300号'})
}
})
3.显示位置信息
(六)设备相关API
设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API:
■ wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口 用于获取系统信息。
■ wx.getNetworkType(Object)接口 用于获取网络类型。
■ wx.onNetworkStatusChange(CallBack)接口 用于监测网络状态改变。
■ wx.makePhoneCall(Object)接口 用于拨打电话。
■ wx.scanCode(Object)接口 用于扫描二维码
1.获取系统信息
wx. getSystemInfo(Object)接口、wx. getSystemInfoSync()接口分别用于异步和同步获取系统信息。其相关参数如表:
表6-27 wx. getSystemInfo(Object)接口、wx. getSystemInfoSync()相关参数
wx. getSystemInfo()接口或wx.getSystemInfoSync()接口调用成功后,返回系统相关信息,如表所示:
代码如下:
wx.getSystemInfo({
success:function(res){
console.log("手机型号:"+res.model)
console.log("设备像素比:"+res.pixelRatio)
console.log("窗口的宽度:"+ res.windowWidth)
console.log("窗口的高度:"+res.windowHeight)
console.log("微信的版本号:"+res.version)
console.log("操作系统版本:"+ res.system)
console.log("客户端平台:"+res.platform)},})
运行截图:
2.网络状态
(1)获取网络状态
wx. getNetworkType(Object)用于获取网络类型,其相关参数如表:
如果wx. getNetworkType()接口被成功调用,则返回网络类型包,有wifi、2G、3G、4G、unknown(Android下不常见的网络类型)、none(无网络)。
代码如下:
wx.getNetworkType({
success:function(res){
console.log(res.networkType)},})
(2)监听网络状态变化
wx. onNetworkStatusChange(CallBack)接口用于监听网络状态变化,当网络状态变化时,返回当前网络状态类型及是否有网络连接。
示例代码如下:
wx.onNetworkStatusChange(function(res){
console.log("网络是否连接:"+res.isConnected)
console.log("变化后的网络类型"+res.networkType)})
3.拨打电话
wx. makePhoneCall(Object)接口用于实现调用手机拨打电话,其相关参数如表:
代码如下:
wx.makePhoneCall({
phoneNumber:'18092585093'//需要拨打的电话号码
})
4.扫描二维码
wx. scanCode(Object)接口用于调起客户端扫码界面,扫码成功后返回相应的内容,其相关参数如表:
扫码成功后,返回的数据如表:
代码如下:
//允许从相机和相册扫码
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)
}
})
运行结果: