结合回调函数操作API

来自CloudWiki
跳转至: 导航搜索

例一:

我们先来看媒体中的获取图片信息的函数:

wx.getImageInfo(对象对象)

该函数的作用是获取图片信息。网络图片需要先配置下载域名才能实现。

函数参数:

图片1.png

object.success附加函数参数:

图片2.png

res.orientation的合法值:

图片3.png

代码示例:

//index.js

const app=getApp()

Page({

   data:{
       src:'../../imgs/pic.jpg'
   },
   getImgInfo:function(){
       wx.getImageInfo({
           src:this.data.src,
           success(res)  {  //回调函数
               console.log(res)
           },
           fail(res){
               console.log(res)
           },
           complete(res){
               console.log('一定会执行')
           }
       })
   }

})

//index.wxml

<view>下面是一个获取图片信息的按钮</view>

<button bindtap='getImgInfo'>点一下</button>

运行

输出图片信息:

图片4.png

例二:

再来看一下界面相互作用中的 wx.showToast 函数

该函数的作用是显示消息提示框

函数参数:

图片5.png

代码示例:

//index.js

const app = getApp()

Page({

 data: {
   src:'../../imgs/pic.jpg'
 },
 //事件触发函数
 showImgInfo:function(text){
   wx.showToast({
     title: text,
     icon:'none'
   })
 },
 getImgInfo:function(){
   var that=this
   wx.getImageInfo({
     src: this.data.src,
     success(res) {  // 回调函数 委托 执行者变化
       that.showImgInfo('路径->'+res.path+'\n尺寸'+res.width+'X'+res.height)
     },
     fail(res){
       console.log(res)
     },
     complete(res){
       console.log('一定会执行',res)
     }
   })
 }

})

运行,获得图片信息,并在交互界面上看到所输出的图片信息