微信小程序应用开发 课件 第6章 小程序API-Part 1

第6章小程序API-Part1电子工业出版社微信小程序依托于微信客户端的运行支持，并且，为了使小程序具有更加灵活的功能，微信客户端开放一系列功能供小程序使用，可以通过使用称为API的函数调用这组由微信客户端开放给小程序的功能。这些API功能非常丰富，包括基础功能、界面操作功能、页面跳转控制功能、媒体处理功能、网络通信功能、甚至还有AI功能等，不仅如此，微信页面与API结合起来，更能发挥小程序的能力。本章对小程序API的基本功能使用进行介绍，下一章对API进阶功能进行介绍。目录6.1基础API6.2界面API6.3路由API6.4数据缓存API6.5文件系统操作API6.6媒体API6.7案例：自制录音播放器6.8练习：视频录制播放器6.1基础API微信基础API提供了众多的微信功能调用，包括：获取系统信息、获取设备信息、更新微信客户端系统、系统日志管理等，作为举例，本节只对几个常用的基础API进行介绍，更多基础API的使用参见微信小程序技术文档。6.1.1获取系统信息微信提供的Objectwx.getSystemInfoSync()和wx.getSystemInfoAsync(Objectobject)函数用于获取系统相关信息。微信所有API函数，均以”wx.”开头，其后是函数的名称，函数尾部的“Sync”或者“Async”表示是同步函数还是异步函数。例如，有两个获取系统信息的API函数，其中，wx.getSystemInfoSync()是同步函数，而wx.getSystemInfoAsync(Objectobject)则是异步函数。所谓“同步函数”是指函数的返回值就是函数的执行结果；而“异步函数”则需要通过提供回调函数参数，并从回调函数中得到执行结果。本质上，“同步函数”与“异步函数”会得到相同的执行结果，但是一般而言，“异步函数”的运行效率更好，并且，用户体验也会更好一些。wx.getSystemInfoSync()函数直接返回执行结果，其返回值是一个Object对象，其中保存有系统的信息，该对象的常用属性及其含义如表。序号属性名类型说明1brandstring设备品牌2modelstring设备型号。3pixelRationumber设备像素比4screenWidthnumber屏幕宽度，单位px5screenHeightnumber屏幕高度，单位px6languagestring微信设置的语言7versionstring微信版本号8systemstring操作系统及版本9SDKVersionstring客户端基础库版本10cameraAuthorizedboolean允许微信使用摄像头的开关11locationAuthorizedboolean允许微信使用定位的开关12bluetoothEnabledboolean蓝牙的系统开关13wifiEnabledbooleanWi-Fi的系统开关14deviceOrientationstring设备方向：portrait，竖屏；landscape，横屏对于异步函数wx.getSystemInfoAsync(Objectobject)，其参数是一个Object对象，在这个对象中指定异步执行结果调用函数，除非特别说明，一般包括三个属性，如表所示。success，fail，complete回调函数在被调用时会传入一个Object类型参数，这个Object参数包含的字段、字段类型及其含义如下：1、errMsg，string，错误信息，如果调用成功返回${apiName}:ok；2、errCode，number，错误码，部分API支持，具体含义参考对应API文档，成功时为0。后续章节介绍的所有异步API的success，fail，complete回调函数的参数对象具有相似的属性。序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。回调函数的参数是一个对象，其属性名称、属性类型及其含义如表6-1所示2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）举一个例子演示这两个函数的使用。这个例子中，用户点击“HelloWorld”，在console控制台显示系统信息。为此，新建名为mini-ch06-01的小程序工程，修改index.wxml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="getSysInfo">HelloWorld</view></scroll-view>修改index.js文件为如下内容：//index.jsPage({getSysInfo(e){letinfo=wx.getSystemInfoSync();console.log(info);wx.getSystemInfoAsync({success(e){console.log(e);},fail(e){},complete(e){console.log(e);}})}})运行这个程序，点击“HelloWorld”文字，显示如图所示的结果。6.1.2获取设备信息微信提供了Objectwx.getDeviceInfo()函数用于获取设备相关信息。注意，这个函数没有“Sync”结尾也没有“Async”结尾，表示这个函数只有一种调用方式。对这个函数而言，只提供同步执行方式。wx.getDeviceInfo()函数的返回值Object对象的常用属性及其含义如表。序号属性名类型说明1abistring应用（微信APP）二进制接口类型（仅Android支持）2brandstring设备品牌3modelstring设备型号。4systemstring操作系统及版本5cpuTypestring设备CPU型号（仅Android支持）6memorySizestring设备内存大小，单位为MB6.2界面API微信提供了一组用于操作程序界面的API，这些API包括交互式API、tabBar操作API、下拉刷新控制API、动画API等，下面对这些API分别进行介绍。6.2.1界面交互API界面交互API用于对程序运行过程中的实时信息进行显示，用以告知用户称·程序运行状态等，这些交互API包括消息显示框、模态对话框、加载显示框、菜单显示框等。1、显示/隐藏消息框wx.showToast(Objectobject)用于显示简短的消息以提示用户某个操作的完成情况或者程序运行的状态。它接受一个Object类型的对象参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明1titlestring无是提示消息的内容2iconstringsuccess否消息在消息框中的图标。可选值包括：success：显示成功图标，此时title文本最多显示7个汉字长度；error：显示失败图标，此时title文本最多显示7个汉字长度；loading：显示加载图标，此时title文本最多显示7个汉字长度；none：不显示图标，此时title文本最多可显示两行。3imagestring无否自定义图标的本地路径，image属性的优先级高于icon属性4maskbooleanfalse否显示透明蒙层，防止触摸穿透5durationnumber否1500提示消息在屏幕上的显示时长，单位为毫秒6successfunction无否接口调用成功的回调函数7failfunction无否接口调用失败的回调函数8completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）wx.hideToast(Objectobject)用于隐藏已经显示的消息框，它接受一个Object类型的对象参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明1noConflictbooleanfalse否目前toast消息框和loading加载框相关接口可以相互混用，此参数可用于取消混用特性2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、模态对话框wx.showModal(Objectobject)用于显示模态对话框。所谓模态对话框，是指在用户关闭对话框之前，用户不能进行任何其他的与对话框无关的窗口操作。它接受一个Object类型的对象参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明1titlestring无否对话框提示的标题2contentstring无否提示的内容3showCancelbooleantrue否是否显示取消按钮4cancelTextstring取消否取消按钮的文字，最多4个字符5cancelColorstring#000000否取消按钮的文字颜色，必须是16进制格式的颜色字符串6confirmTextstring确定否确认按钮的文字，最多4个字符7confirmColorstring#576B95否确认按钮的文字颜色，必须是16进制格式的颜色字符串8editablebooleanfalse否是否显示输入框9placeholderTextstring无否显示输入框时的提示文本10successfunction无否接口调用成功的回调函数。回调函数的参数是一个对象，对象的属性及其其含义如下：content属性，string类型，当editable为true时，用户输入的文本；confirm属性，boolean类型，为true时，表示用户点击了确定按钮；cancel属性， boolean类型，为true时，表示用户点击了取消。11failfunction无否接口调用失败的回调函数12completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）3、显示/隐藏加载框wx.showLoading(Objectobject)用于显示loading框，使用该API显示的loading框必须调用与之配套的wx.hideLoading(Objectobject)隐藏。wx.showLoading(Objectobject)接受一个Object类型的对象参数，Object对象的属性及其含义如表。wx.hideLoading(Objectobject)也接受一个Object类型的对象参数，对象的属性及其含义如表。序号属性名类型默认值必填说明1titlestring无是提示的内容2maskbooleanfalse否是否显示透明蒙层，防止触摸穿透3successfunction无否接口调用成功的回调函数4failfunction无否接口调用失败的回调函数5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）序号属性名类型默认值必填说明1noConflictbooleanfalse否目前toast消息框和loading加载框相关接口可以相互混用，此参数可用于取消混用特性2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）4、4、显示菜单可以使用wx.showActionSheet(Objectobject)显示并操作菜单。它接受一个Object类型的对象参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明

alertTextstring无否菜单提示信息

itemListArray.<string>无是按钮的文字数组，数组长度最大为6

itemColorstring#000000否按钮的文字颜色

successfunction无否接口调用成功的回调函数。回调函数的参数是一个对象，对象的属性及其其含义如下：tapIndex属性，number类型，用户点击的按钮序号，从上到下的顺序，从0开始。

failfunction无否接口调用失败的回调函数

completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）举一个例子演示常用界面API的使用。这个例子显示4个按钮，当点击按钮时分别显示一个消息框、模态对话框、加载框、菜单操作。新建名为mini-ch06-02的小程序工程，修改index.wxml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="toast">ShowToast</button><buttontype="primary"bind:tap="dialog">ModalDialog</button><buttontype="primary"bind:tap="loading">ShowLoding</button><buttontype="primary"bind:tap="action">ActionSheet</button></view></scroll-view>index.js文件内容如下：//index.jsPage({toast(){wx.showToast({title:'消息框',duration:2000})},dialog(){wx.showModal({title:'模态对话框',content:'这是一个模态对话框',complete:(res)=>{if(res.cancel){wx.showToast({title:'点击了确定按钮',})return;}if(res.confirm){wx.showToast({title:'点击了取消按钮',})return;}}})},loading(){wx.showLoading({title:'正在加载',complete:(res)=>{setTimeout(()=>{wx.hideLoading();},5000);}})},action(){wx.showActionSheet({itemList:['打开相册','打开PDF文件','显示目录'],success(res){console.log(res.tapIndex)},fail(res){console.log(res.errMsg)}})}})运行这个程序，显示如图6-2所示的界面。6.2.2TabBar操作API微信提供了一系列API用于操作TabBar界面。这些函数包括：显示/隐藏TabBar、设置TabBar上条目的属性等。1、显示/隐藏TabBar使用wx.showTabBar(Objectobject)显示TabBar，使用wx.hideTabBar(Objectobject)隐藏TabBar。这两个函数都接受一个Object对象作为参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明1animationBooleanFalse否是否需要动画效果2SuccessFunction无否接口调用成功的回调函数3FailFunction无否接口调用失败的回调函数4CompleteFunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、显示/隐藏TabBar条目上的红点使用wx.showTabBarRedDot(Objectobject)显示红点，使用wx.hideTabBarRedDot(Objectobject)隐藏红点。这两个函数都接受一个Object对象作为参数，Object对象的属性及其含义如表。序号属性名类型默认值必填说明1index number无是tabBar的哪一项，从左边算起，最左边为02successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）3、设置/移除TabBar条目右上角的文本使用wx.setTabBarBadge(Objectobject)设置文本，使用wx.removeTabBarBadge(Objectobject)移除文本。wx.setTabBarBadge(Objectobject)函数的参数属性如表。wx.removeTabBarBadge(Objectobject)函数的参数与wx.setTabBarBadge(Objectobject)类似，只是少了text属性。序号属性名类型默认值必填说明1index number无是tabBar的哪一项，从左边算起，最左边为02textstring无是显示的文本，超过4个字符则显示成“...”。3successfunction无否接口调用成功的回调函数4failfunction无否接口调用失败的回调函数5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.2.3动画API在微信小程序中，可以通过Animation对象控制组件执行特定的动画，进而使组件的显示产生特定的效果。可以使用动画API的wx.createAnimation(Objectobject)函数获得一个Animation对象，它接收一个Object对象参数，Object对象参数的属性及其含义如表。序号属性名类型默认值必填说明1durationnumber400否动画持续时间，单位ms2timingFunctionstring'linear'否动画的效果。可选值：'linear'，动画从头到尾的速度是相同的；'ease'，动画以低速开始，然后加快，在结束前变慢；'ease-in'，动画以低速开始；'ease-in-out'，动画以低速开始和结束；'ease-out'，动画以低速结束；'step-start'，动画第一帧就跳至结束状态直到结束；'step-end'，动画一直保持开始状态，最后一帧跳到结束状态。3delay number0否动画延迟时间，单位ms4transformOriginstring'50%50%0'否动画执行时的原点一旦创建了Animation对象，可使用Animation对象提供的方法设置一系列动画动作。常用的动画动作及其含义如表。序号方法名称及参数含义1ObjectAnimation.export()导出动画队列。export方法每次调用后会清掉之前的动画操作。2AnimationAnimation.step(Objectobject)表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。3AnimationAnimation.rotate(numberangle)从原点顺时针旋转一个角度4AnimationAnimation.rotateX(numberangle)从X轴顺时针旋转一个角度5AnimationAnimation.rotateY(numberangle)从Y轴顺时针旋转一个角度6AnimationAnimation.scale(numbersx,numbersy)缩放7AnimationAnimation.skew(numberax,numberay)对X、Y轴坐标进行倾斜8AnimationAnimation.translate(numbertx,numberty)平移变换9AnimationAnimation.opacity(numbervalue)设置透明度10AnimationAnimation.backgroundColor(stringvalue)设置背景色11AnimationAnimation.width(number|stringvalue)设置宽度12AnimationAnimation.height(number|stringvalue)设置高度在小程序中，实现动画功能的步骤：第一步，在页面的.js文件的data属性中声明动画一个动画属性，例如，data:{animation:{}}；第二步，在合适的时机创建一个动画实例，例如，this.animation=wx.createAnimation({})；第三步，调用实例的方法，也就是表6-15中的方法描述动画，例如：this.animation.rotate(150).scale(3)；第四步，调用动画操作方法后调用step()来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始；第五步，最后通过动画实例export方法导出动画数据传递给组件的animation。举一个例子介绍操作TabBar的API和动画API的使用。在这个例子中，首先显示一个TabBar，TabBar中有两个页面，通过点击页面上的组件完成指定的动画或者操作TabBar组件的功能。新建名为mini-ch06-03的工程，在工程中新建images文件夹，并在文件夹中放置两张图标，并修改app.js问如下内容：{"pages":["pages/index/index","pages/animex/animex"],"tabBar":{"list":[{"pagePath":"pages/index/index","text":"动画演示","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/animex/animex","text":"Tab演示","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"}]},//以下省略完成后的工程如图所示：修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><viewanimation="{{animation}}">点击按钮，我是可以转动的</view><buttonbindtap="rotate">点击旋转</button></view></scroll-view>修改index.js文件为如下内容：//index.jsPage({data:{animation:{}},onReady:function(){this.animation=wx.createAnimation({duration:500,timingFunction:'linear',delay:500})},rotate:function(){this.animation.rotate(360).scale(1.5).step().rotate(-360).scale(1).step()this.setData({animation:this.animation.export()//输出动画

})}})修改animex.wxml文件为内容：修改animex.json文件为如下内容：<!s/animex/animex.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="hong">

点击：在tabbar上显示文字和红点</view></scroll-view>{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改animex.wxss文件为如下内容：修改animex.js为如下内容：/*pages/animex/animex.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}//pages/animex/animex.jsPage({hong(){wx.showTabBarRedDot({index:1});wx.setTabBarBadge({index:1,text:'OK'});}})运行这个程序，显示如图所示的界面。6.3路由API除了可以使用navigator组件实现小程序页面之间的跳转外，微信还提供了一组API实现页面之间的跳转。6.3.1页面跳转API微信提供的页面跳转API包括：wx.navigateTo、wx.navigateBack、wx.redirectTo等，下面进行详细介绍。1、使用wx.navigateTo实现页面跳转wx.navigateTo(Objectobject)实现页面之间的跳转。这个函数会保留当前页面，并跳转到应用内的某个页面。但是不能跳到tabbar页面。可以使用wx.navigateBack（Objectobject）函数返回到原页面。该函数的Object参数属性如表序号属性名类型默认值必填说明1urlstring无是需要跳转的应用内非tabBar的页面的路径,路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔，如：'path?key=value&key2=value2'2eventsObject无否页面间通信接口，用于监听被打开页面发送到当前页面的数据3routeTypestring无否自定义路由类型4successfunction无否接口调用成功的回调函数5failfunction无否接口调用失败的回调函数6completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、使用wx.navigateBack返回到上一个页面wx.navigateBack(Objectobject)函数关闭当前页面，返回上一页面或多级页面。可以指定需要返回层级。该函数的Object参数属性如表。序号属性名类型默认值必填说明1deltanumber1否返回的页面数，如果delta大于现有页面数，则返回到首页。2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）3、使用wx.redirectTo跳转页面wx.redirectTo(Objectobject)函数闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。该函数的Object参数属性如表。序号属性名类型默认值必填说明1urlstring无是需要跳转的应用内非tabBar的页面的路径,路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔，如：'path?key=value&key2=value2'2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）4、使用wx.reLaunch调转页面wx.reLaunch(Objectobject)函数关闭所有页面，并打开到应用内的指定页面。该函数的Object参数属性如表。序号属性名类型默认值必填说明1urlstring无是需要跳转的应用内非tabBar的页面的路径,路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔，如：'path?key=value&key2=value2'2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）5、使用wx.switchTab跳转tabBar页面wx.switchTab(Objectobject)函数跳转到tabBar页面，并关闭其他所有非tabBar页面。该函数的Object参数属性及其含义如表。序号属性名类型默认值必填说明1urlstring无是需要跳转的tabBar页面的路径（需在app.json的tabBar字段定义的页面），路径后不能带参数。2successfunction无否接口调用成功的回调函数3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.3.2路由API使用举例这个程序显示一个包含三个Tab的TabBar首页面，在第一个Tab页面，点击不同的按钮以不同的方式实现页面跳转，也可以实现不同Tab之间的跳转。新建名称为mini-ch06-04的小程序工程，在工程中新建images子目录，并准备相应图片文件。然后修改app.json为如下内容：{"pages":["pages/index/index","pages/tab2/tab2","pages/tab3/tab3","pages/example/example"],"tabBar":{"list":[{"pagePath":"pages/index/index","text":"路由演示","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/tab2/tab2","text":"卡片一号","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"},{"pagePath":"pages/tab3/tab3","text":"卡片二号","iconPath":"images/icon3.png","selectedIconPath":"images/icon3.png"}]},//以下省略修改index.wxml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="navigateto">NavigateTo</button><buttontype="primary"bind:tap="relaunch">Relaunch</button><buttontype="primary"bind:tap="redirectto">RedirectTo</button><buttontype="primary"bind:tap="switchtab">SwitchTab</button></view></scroll-view>修改index.js为如下内容：//index.jsPage({navigateto(){wx.navigateTo({url:'/pages/example/example',})},relaunch(){wx.reLaunch({url:'/pages/example/example',})},redirectto(){wx.redirectTo({url:'/pages/example/example',})},switchtab(){wx.switchTab({url:'/pages/tab2/tab2',})}})修改tab2.json为如下内容：修改tab2.wxml问如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/tab2/tab2.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><imagesrc="/images/01.jpg"></image></view></scroll-view>类似的，修改tab3.json和tab3.wxml为类似的内容。然后，修改example.json问如下内容：修改example.wxml为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/example/example.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="navigateback">NavigateBack</button></view></scroll-view>运行这个程序，显示如图所示的页面。6.4数据缓存API微信小程序可以使用数据缓存API在微信客户端保存少量数据。数据以“key:value”形式存储，单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。6.4.1保存数据函数wx.setStorageSync(stringkey,anydata)和wx.setStorage(Objectobject)用于存储数据。它们都将数据存储在本地缓存中指定的key中，并且会覆盖掉原来该key对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。同步函数wx.setStorageSync(stringkey,anydata)直接以key和value作为参数，异步函数wx.setStorage(Objectobject)接受一个Object对象参数，Object参数的属性及其含义如表：序号属性名类型默认值必填说明1keystring无是本地缓存中指定的key2dataany无是需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。3encryptBooleanfalse否是否开启加密存储。若开启加密存储，setStorage和getStorage需要同时声明encrypt的值为true。4successfunction无否接口调用成功的回调函数5failfunction无否接口调用失败的回调函数6completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.4.2读取数据函数anywx.getStorageSync(stringkey)和wx.getStorage(Objectobject)读取保存的数据。其中，wx.getStorageSync(stringkey)读取指定参数key的值；wx.getStorage(Objectobject)接受一个Object对象的参数，Object参数的属性及其含义如表：序号属性名类型默认值必填说明1keystring无是本地缓存中指定的key2encryptBooleanfalse否是否开启加密存储。若开启加密存储，setStorage和getStorage需要同时声明encrypt的值为true。3successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的data属性就是读取得到的key对应的值。4failfunction无否接口调用失败的回调函数5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.4.3清除数据可以一次清除一个指定key的数据，或者一次性清除所有存储的数据。函数wx.removeStorage(Objectobject)和wx.removeStorageSync(stringkey)清除指定key及其值；函数wx.clearStorage(Objectobject)和wx.clearStorageSync()清除所有存储的key及其值。wx.removeStorage(Objectobject)函数的Object对象参数属性及其含义如表：序号属性名类型默认值必填说明1keystring无是本地缓存中指定的key2successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的data属性就是读取得到的key对应的值。3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）wx.clearStorage(Objectobject)函数的Object对象参数属性及其含义如表：序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的data属性就是读取得到的key对应的值。2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.4.4获取数据缓存状态函数wx.getStorageInfo(Objectobject)和Objectwx.getStorageInfoSync()获取数据缓存的状态。wx.getStorageInfo(Objectobject)接受一个Object对象参数，Object对象参数属性及其含义如表：函数Objectwx.getStorageInfoSync()的返回值Object对象，以及wx.getStorageInfo(Objectobject)的success回调函数的参数Object对象，这个Object对象的属性及其含义如表:序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性及其含义如表6-25所示。2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）序号属性名类型说明1keysArray.<string>当前数据缓存中所有的key2currentSizenumber当前占用的空间大小,单位KB3limitSizenumber限制的空间大小，单位KB6.4.5数据缓存使用举例举一个例子演示数据缓存API的使用。在程序的首页面显示4个按钮，分别用于保存数据、读取数据、清除数据和查看数据缓存状态。为此，新建名称为mini-ch06-05的小程序工程，修改index.wxml为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><buttontype="primary"bind:tap="save">保存数据</button><buttontype="primary"bind:tap="read">读取数据</button><buttontype="primary"bind:tap="clear">清除数据</button><buttontype="primary"bind:tap="status">数据缓存状态</button></view></scroll-view>修改index.js为如下内容：//index.jsPage({save(){letd=newDate();wx.setStorageSync('date',d.toTimeString());wx.setStorageSync('name','张三');wx.setStorageSync('age',20);},read(){console.log(wx.getStorageSync('date'));console.log(wx.getStorageSync('name'));console.log(wx.getStorageSync('age'));},clear(){wx.clearStorage();},status(){wx.getStorageInfo({success(res){console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);},fail(){console.log('读取数据缓存状态失败！');}})}})运行这个程序，点击“保存数据”按钮后再点击“读取数据”按钮，显示如图界面:6.5文件系统操作API典型的文件操作API包括：wx.openDocument(Objectobject)用于打开指定的文档；FileSystemManagerwx.getFileSystemManager()则用于获取一个FileSystemManager对象，通过这个对象可以对文件进行读写等操作。6.5.1打开文档函数wx.openDocument(Objectobject)用于打开指定的文档。这个函数接受一个Object对象参数，参数Object对象的属性及其含义如表：序号属性名类型默认值必填说明1filePathstring无是文件路径(本地路径)，例如通过wx.downloadFile获得2showMenubooleanfalse否是否显示右上角菜单3fileTypestring无否文件类型，指定文件类型打开文件。可选值：doc；docx；xls；xlsx；ppt；pptx；pdf4successfunction无否接口调用成功的回调函数5failfunction无否接口调用失败的回调函数6completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.5.2使用FileSystemManager对象操作文件如果需要对文件进行完全的操作，例如，打开文件、读取文件数据、像文件中写入数据、关闭文件、删除文件等操作，则需要首先获取一个FileSystemManager对象。可以调用通过如下函数：FileSystemManagerwx.getFileSystemManager()获取FileSystemManager对象。一旦获得了FileSystemManager对象，就可以通过FileSystemManager对象提供的方法对文件进行操作。FileSystemManager对象提供的方法及其作用如表：序号方法含义1FileSystemManager.access(Objectobject)判断文件/目录是否存在。2FileSystemManager.saveFile(Objectobject)保存临时文件到本地。此接口会移动临时文件，调用成功后，tempFilePath将不可用。3FileSystemManager.getSavedFileList(Objectobject)获取该小程序下已保存的本地缓存文件列表4FileSystemManager.removeSavedFile(Objectobject)删除该小程序下已保存的本地缓存文件5FileSystemManager.close(Objectobject)关闭文件6FileSystemManager.copyFile(Objectobject)复制文件7FileSystemManager.getFileInfo(Objectobject)获取该小程序下的本地临时文件或本地缓存文件信息8FileSystemManager.open(Objectobject)打开文件，返回文件描述符9FileSystemManager.read(Objectobject)读文件10FileSystemManager.readFile(Objectobject)读取本地文件内容。单个文件大小上限为100M。11FileSystemManager.unlink(Objectobject)删除文件12FileSystemManager.write(Objectobject)写入文件13FileSystemManager.writeFile(Objectobject)写文件1、FileSystemManager.saveFile(Objectobject)的Object参数FileSystemManager.saveFile(Objectobject)函数将某个临时文件保存到文件系统的指定文件中，它的Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1tempFilePathstring无是临时存储文件路径(本地路径)2filePathstring无否要存储的文件路径(本地路径)3successfunction无否接口调用成功的回调函数。该回调函数接受一个Object对象参数，其属性、类型及含如下：savedFilePath，string，存储后的文件路径(本地路径)4failfunction无否接口调用失败的回调函数5completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、FileSystemManager.getSavedFileList(Objectobject)的Object参数FileSystemManager.getSavedFileList(Objectobject)函数获取该小程序下已保存的本地缓存文件列表。它的Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1successfunction无否接口调用成功的回调函数。该回调函数接受一个Object对象参数，其属性、类型及含如下：fileList，Array.<Object>，文件数组，元素的成员：filePath，string，文件路径(本地路径)；size，number，本地文件大小，以字节为单位；createTime，number，文件保存时的时间戳。2failfunction无否接口调用失败的回调函数3completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）3、FileSystemManager.removeSavedFile(Objectobject)的Object参数FileSystemManager.removeSavedFile(Objectobject)函数删除该小程序下已保存的本地缓存文件。它的Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1filePathstring无是需要删除的文件路径(本地路径)2successfunction无否接口调用成功的回调函数。3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）4、FileSystemManager.readFile(Objectobject)的Object参数FileSystemManager.readFile(Objectobject)函数读取本地文件内容。单个文件大小上限为100M。它的Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1filePathstring无是要读取的文件的路径(本地路径)2encodingstring无否指定读取文件的字符编码，如果不传encoding，则以ArrayBuffer格式读取文件的二进制内容。可选值：ascii、base64、binary、hex、utf-8、utf8、latin1。3positionnumber无否从文件指定位置开始读，如果不指定，则从文件头开始读。4lengthnumber无否指定文件的长度，如果不指定，则读到文件末尾。有效范围：[1,fileLength]。单位：byte5successfunction无否接口调用成功的回调函数。该回调函数接受一个Object对象参数，其属性、类型及含如下：data，string/ArrayBuffer，文件内容。6failfunction无否接口调用失败的回调函数7completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）5、FileSystemManager.unlink(Objectobject)的Object参数FileSystemManager.unlink(Objectobject)函数删除指定文件。它的Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1filePathstring无是要删除的文件路径(本地路径)2successfunction无否接口调用成功的回调函数。该回调函数接受一个Object对象参数，其属性、类型及含如下：data，string/ArrayBuffer，文件内容。3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）6.6媒体API微信媒体API包括图像API、音频API、视频API、录音API、相机操作API、地图API等，下面对常用的媒体API进行介绍。6.6.1图像API图像API包括选择图像、预览图像、保存图像到相册、图像压缩、获取图像基本信息等API调用。下面先介绍常用图像API，再通过举例介绍常用API的使用。1、选择图像wx.chooseImage函数wx.chooseImage(Objectobject)允许从本地相册选择图片或使用相机拍照，并返回选择或者拍摄的图像。它接受一个Object对象作为参数，Object参数对象的属性及其含义如表：当wx.chooseImage(Objectobject)成功执行后，将回调success属性所指定的函数，并传递一个Object对象作为参数，该Object对象的属性及其含义如表：序号属性名类型说明1tempFilePathsArray.<string>图片的本地临时文件路径列表(本地路径)2tempFilesArray.<Object>图片的本地临时文件列表。Object元素包括如下属性：path，string，本地临时文件路径(本地路径)；size，number，本地临时文件大小，单位B。序号属性名类型默认值必填说明1countnumber9否最多可以选择的图片张数2sizeTypeArray.<string>['original','compressed']否所选的图片的尺寸.可选值：original，原图；compressed，压缩图。3sourceTypeArray.<string>['album','camera']否选择图片的来源。可选值：album，从相册选图；camera，使用相机。4successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性及其含义如表6-27所示。5failfunction无否接口调用失败的回调函数6completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）2、图像预览wx.previewImage函数wx.previewImage(Objectobject)在新页面中全屏预览图片，预览的过程中用户可以进行保存图片、发送给朋友等操作。它接受一个Object对象作为参数，Object参数对象的属性及其含义如表：序号属性名类型默认值必填说明1urlsArray.<string>无是需要预览的图片链接列表。2showmenubooleantrue否是否显示长按菜单。3currentstringurls中的第一张否当前显示图片的链接4successfunction无否接口调用成功的回调函数。5failfunction无否接口调用失败的回调函数6completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）3、获取图像基本信息wx.getImageInfo函数wx.getImageInfo(Objectobject)获取图片信息。它接受一个Object对象作为参数，Object参数对象的属性及其含义如表：当wx.getImageInfo(Objectobject)成功执行后，将回调success属性所指定的函数，并传递一个Object对象作为参数，该Object对象的属性及其含义如表：序号属性名类型默认值必填说明1srcstring无是图片的路径，支持网络路径、本地路径、代码包路径2successfunction无否接口调用成功的回调函数。接受一个Object参数对象，该对象的属性及其含义如表6-37所示。3failfunction无否接口调用失败的回调函数4completefunction无否接口调用结束的回调函数（调用成功、失败都会执行）