小程序第六章API应用

已于 2024-04-17 08:19:34 修改
阅读量1.1k 收藏 8
点赞数 18
文章标签： 小程序
于 2024-04-08 19:12:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74843457/article/details/137506964
版权

1.网络API

           微信小程序处理的数据通常从后台服务器获取, 再将处理过的结果保存到后台服务器,这就要求微信小程序要有与后台进行交互的能力。 微信原生API 接口或第三方API 提供了各类接口实现前后端交互。

          网络API 可以帮助开发者实现网络UPL 访问调用、文件的上传和下载、网络套接字的使用等功能处理。 微信开发团队提供了10个网络API 接口。

  • wx.request(Object) 接口 用于发起HTTPS 请求。
  • wx.uploadFile(Object) 接口 用于将本地资源上传到后台服务器。
  • wx.downloadFile(Object) 接口 用于下载文件资源到本地。
  • wx.connectSocket(Object) 接口 用于创建一个WebSocket 连接。
  • wx.sendSocketMessage(Object) 接口 用于实现通过WebSocket 连接发送数据。
  • wx.closeSocket(Object) 接口 用于关闭WebSocket 连接。
  •  wx.onSocketOpen(CallBack) 接口 用于监听WebSocket 连接打开事件。
  •  wx.onSocketError(CallBack) 接口 用于监听WebSocket 错误。
  • wx.onSocketMessage(CallBack) 接口 用于实现监听WebSocket 接收到服务器的消息事件。
  • wx.onSocketClose(CallBack) 接口 用于实现监听WebSocket 关闭。

 1.发起网络请求

              wx.request(Object) 实现向服务器发送请求、获取数据等各种网络交互操作, 其相关参数如表。

          例如，通过wx.request(Object)获取百度（http://www.baidu.com）首页数据。（需要在微信公众平台小程序服务配置中的request合法域名http://www.baidu.com“） 。

示例代码如下：

.wxml代码
<button type="primary"bindtap="getbaidutap">获取HTML数据</button>
<textarea value='{{html}}'auto-height maxlength='0'></textarea>
.js代码
Page({
  data:{
     html:''
   },
   getbaidutap:function(){
    var that=this;
     wx.request({
      url:'https://www.baidu.com',
       data:{},
       hearder:{'Content-Type':'application/json'},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
         })
      }
    })
  }

运行结果：

      例如，通过wx.request(Object)的GET方法获取邮政编码对应的地址信息。 

示例代码：

.wxml代码
<view>邮政编码：</view>
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bind:tap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
.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 self=this;
    //显示toast提示消息
    wx.showToast({
      title: '正在查询，请稍候....',
      icon:'loading',
      duration:10000
    });
    wx.request({
      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 || res.data.reason,//错误原因分析
            error_code:res.data.error_code
          })
        }
      }
    })
  }
}

运行结果:

例如，通过wx.request(Object)的POST方法获取邮政编码对应的地址信息。

示例代码：

.wxml代码
<view>邮政编码:</view>
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bind:tap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
.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 self=this;
  //显示toast提示消息
  wx.showToast({
    title: '正在查询，请稍候。。。。',
    icon:'loading',
    duration:10000
  });
  wx:wx.request({
    url: 'https://v.juhe.cn/postcode/query',//第三方后台服务器
    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//获取到的数据
        })
      }
      else{
        self.setData({
          errMsg:res.data.reason || res.data.reason,//错误原因分析
          error_code:res.data.error_code
        })
      }
    }
  })
    }
  }

 运行结果：

2.上传文件

          wx.uploadFile(Object) 接口用于将本地资源上传到开发者服务器, 并在客户端发起一个HTTPSPOST 请求, 其相关参数如表 所示。

                  通过wx.uploadFile(Object) , 可以将图片上传到服务器并显示。示例代码如下：

.wxml代码
<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>
.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();
      }
    })
  }
  }
})

运行结果：

3.下载文件 

          wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地, 在客户端直接发起一个HTTPGET请求, 返回文件的本地临时路径。 其相关参数如表所示。

          例如，通过wx.downloadFile(Object)实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。示例代码如下：

.wxml代码
<button type="primary" bind:tap="downloadimage">下载图像</button>
<image src="{{img}}" mode="widthFix" style="width: 90%;height: 500px;"></image>
.js代码
Page({
  data:{
    img:null
  },
  downloadimage:function(){
    var that=this;
    wx.downloadFile({
      url: 'http://localhost/1.jpg',//通过WAMP软件实现
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

 运行结果：

2.多媒体API

         多媒体ＡＰＩ 主要包括图片ＡＰＩ、录音ＡＰＩ、音频播放控制ＡＰＩ、音乐播放控制ＡＰＩ 等, 其目的是丰富小程序的页面功能。

1.图片API

         图片ＡＰＩ 实现对相机拍照图片或本地相册图片进行处理, 主要包括以下４ 个ＡＰＩ 接口:

  •  wx.chooseImage(Object) 接口 用于从本地相册选择图片或使用相机拍照。
  • wx.previewImage(Object) 接口 用于预览图片。
  • wx.getImageInfo(Object) 接口 用于获取图片信息。
  •  wx.saveImageToPhotosAlbum(Object) 接口 用于保存图片到系统相册。

１.选择图片或拍照

             wx.chooseImage(Object) 接口用于从本地相册选择图片或使用相机拍照。 拍照时产生的临时路径在小程序本次启动期间可以正常使用, 若要持久保存, 则需要调用wx.saveFile 保存图片到本地。 其相关参数如表6-4所示。

             若调用成功, 则返回tempFilePaths 和tempFiles, tempFilePaths 表示图片在本地临时文件路径列表。tempFiles 表示图片的本地文件列表, 包括path 和size。

示例代码：

wx.chooseImage({
  count:2,//默认值为9
  sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
  sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
  success:function(res){
    //返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性来显示图片
    var tempFilePaths=res.tempFilePaths
    var tempFiles=res.tempFiles
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

运行结果： 

选择图片后： 

２.预览图片

          wx.previewImage(Object) 接口主要用于预览图片, 其相关参数如表６ －５ 所示。

示例代码：

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"]
})

运行结果：

３.获取图片信息

         wx.getImageInfo(Object)接口用于获取图片信息, 其相关参数如表６ －６ 所示。 

示例代码：

wx.chooseImage({
  success:function(res){
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success:function(e){
        console.log(e.width)
        console.log(e.height)
      }
    })
  },
})

运行结果; 

选择照片后控制台显示： 

４.保存图片到系统相册

           wx.saveImageToPhotosAlbum(Object) 接口用于保存图片到系统相册, 需要得到用户授权scope.writePhotosAlbum。 其相关参数如表６ －７ 所示。

示例代码：

运行结果：

选择图片之后 ，文件夹中会保存照片： 

２. 录音ＡＰＩ

               录音ＡＰＩ 提供了语音录制的功能, 主要包括以下两个ＡＰＩ 接口:

    wx.startRecord(Object) 接口 用于实现开始录音。

    wx.stopRecord(Object) 接口 用于实现主动调用停止录音。

１.开始录音

              wx.startRecord(Object) 接口用于实现开始录音。 当主动调用 wx.stopRecord(Object)接口或者录音超过１ 分钟时, 系统自动结束录音, 并返回录音文件的临时文件路径。 若要持久保存, 则需要调用wx.saveFile()接口。 其相关参数如表所示。

２.停止录音 

            wx.stopRecord(Object) 接口用于实现主动调用停止录音。

示例代码：

wx.startRecord({
  success:function(res){
    var tempFilePath=tempFilePath
  },
  fail:function(res){
    //录音失败
  }
})
setTimeout(function(){
  //结束录音
  wx.stopRecord()},10000)

运行结果 ：

３ .音频播放控制ＡＰＩ

          音频播放控制ＡＰＩ 主要用于对语音媒体文件的控制, 包括播放、暂停、停止及audio 组件的控制, 主要包括以下３ 个ＡＰＩ:

  •  wx.playVoice(Object)接口 用于实现开始播放语音。
  •  wx.pauseVoice(Object)接口 用于实现暂停正在播放的语音。
  •  wx.stopVoice(Object)接口  用于结束播放语言

１.播放语音

         wx.playVoice(Object)接口用于开始播放语音, 同时只允许一个语音文件播放, 如果前一个语音文件还未播放完, 则中断前一个语音文件的播放。 其相关参数如表 所示。

示例代码： 

wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        //录音完后立即播放
        filePath:tempFilePath,
        complete:function(){
          
        }
      })
    }
  })

２.暂停播放

        wx.pauseVoice(Object)用于暂停正在播放的语音。再次调用wx.playVoice(Object)播放同一个文件时, 会从暂停处开始播放。 如果想从头开始播放, 则需要先调用wx.stopVoice(Object)。

示例代码：

 wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath
      })
      setTimeout(function(){
        //暂停播放
        wx.pauseVoice()
      },5000)
    }
  })

３.结束播放

        wx.stopVoice(Object)用于结束播放语音。

示例代码：

wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath:tempFilePath
      })
      setTimeout(function(){
        wx.stopVoice()
      },5000)
    }
  })

４ .音乐播放控制ＡＰＩ

       音乐播放控制ＡＰＩ 主要用于实现对背景音乐的控制, 音乐文件只能是网络流媒体, 不能是本地音乐文件。 音乐播放控制ＡＰＩ 主要包括以下８ 个ＡＰＩ:

 wx.playBackgroundAudio（Object）接口 用于播放音乐。

 wx.getBackgroundAudioPlayerState（Object）接口 用于获取音乐播放状态。

 wx.seekBackgroundAudio（Object）接口 用于定位音乐播放进度。

 wx.pauseBackgroundAudio() 接口 用于实现暂停播放音乐。

 wx.stopBackgroundAudio() 接口 用于实现停止播放音乐。

 wx.onBackgroundAudioPlay(CallBack) 接口 用于实现监听音乐播放。

 wx.onBackgroundAudioPause(CallBack) 接口 用于实现监听音乐暂停。

 wx.onBackgroundAudioStop(CallBack) 接口 用于实现监听音乐停止。

１.播放音乐

         wx.playBackgroundAudio（Object）用于播放音乐, 同一时间只能有一首音乐处于播放状态, 其相关参数如表所示。

示例代码：

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
  }
})

 ２.获取音乐播放状态

                wx.getBackgroundAudioPlayerState（Object） 接口用于获取音乐播放状态, 其相关参数如表所示。

                                      接口调用成功后返回的参数如表所示。  

 示例代码：

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("播放状态："+status)
    console.log("音乐文件地址："+dataUrl)
    console.log("音乐文件当前播放位置："+currentPosition)
    console.log("音乐文件的长度："+duration)
    console.log("音乐文件的下载进度："+downloadPercent)
  }
})

 ３. 控制音乐播放进度

           wx.seekBackgroundAudio（Object）接口用于控制音乐播放进度, 其相关参数如表所示。

 示例代码

wx.seekBackgroundAudio({
  position: 30,
})

４.暂停播放音乐 

              wx.pauseBackgroundAudio() 接口用于暂停播放音乐。

示例代码：

wx.playBackgroundAudio({
  dataUrl: '/music/a.mp3',
  title:'我的音乐',
  coverImgUrl:'images/poster.jpg',
  success:function(){
    console.log('开始播放音乐了');
  }
});
setTimeout(function(){
  console.log('暂停播放');
  wx.pauseBackgroundAudio();
},5000);//5秒后自动暂停

５.停止播放音乐

                   wx.stopBackgroundAudio() 接口用于停止播放音乐。

示例代码：

wx.playBackgroundAudio({
  dataUrl: '/music/a.mp3',
  title:'我的音乐',
  coverImgUrl:'images/poster.jpg',
  success:function(){
    console.log('开始播放音乐了');
  }
});
setTimeout(function(){
  console.log('暂停播放');
  wx.stopBackgroundAudio();
},5000);//5秒后自动停止

６.监听音乐播放

               wx.onBackgroundAudioPlay(CallBack) 接口用于实现监听音乐播放, 通常被wx.playBackgroundAudio(Object)方法触发, 在CallBack 中可改变播放图标。

示例代码;

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
      })
    })
  }
})

7.监听音乐暂停

                       wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停,通常被wx.pauseBackgroundAudio()方法触发。在CallBack中可以改变播放图标。

8.监听音乐停止


           wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止,通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标。

9.案例展示

代码如下：

.wxml代码：

<view class="container">
<image class="bgaudio" src="{{changedImg? music.coverImg:'/pages/hhhh/image/ko.jpg'}}"/>
<view class="control-view">
<!-- 使用data-how定义一个0表示快退10秒 -->
<image src="/pages/hhhh/image/mo.png"bindtap="onPositionTap"data-how="0"/>
<image src="/pages/hhhh/image/{{isPlaying? 'pause':'we'}}.jpg"bindtap="onAudioTap"/>
<image src="/pages/hhhh/image/jo.png"bindtap="onStopTap"/>
<!-- 使用data-how定义一个1表示快进10秒 -->
<image src="/pages/hhhh/image/lo.png"bindtap="onPositionTap"data-how="1"/>
</view>
</view>

.wxss代码：

.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}
.control-view image{
height: 60rpx;
width: 60rpx;
margin: 30rpx;
}

.js代码：

Page({
  data:{
    //记录播放状态
    isPlaying:false,
    //记录covering，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时，都使用当前音乐的图片
     coverImg:"",
    changedImg:false,
    //音乐内容
    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(){
    //页面加载时，注册监听事件
    this.onAudioState();
  },
  //点击播放或者暂停按钮时触发
  onAudioTap:function(event){
    if(this.data.isPlaying){
      //如果在正常播放状态，就暂停，并修改播放的状态
      wx.pauseBackgroundAudio();
    }else{
      //如果在暂停状态，就开始播放，并修改播放的状态
      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和播放状态
        that.setData({isPlaying:false,changedImg:false});
      }
    })
  },
  //点击“快进10秒”或者“快退10秒”时，触发
  onPositionTap:function(event){
    let how =event.target.dataset.how;
    //获取音乐的播放状态
    wx.getBackgroundAudioPlayerState({
      success:function(res){
        //仅在音乐播放中，快进和快退才生效
        //音乐的播放状态，1表示播放中
        let status=res.status;
        if(status===1){
          //音乐的总时长
          let duration =res.duration;
          if(how==="0"){
            //注意:快退时，当前播放位置快退10秒小于0时，直接设置position为1，否则，直接减去10秒
            //快退达到的位置
            let position=currentPosition-10;
            if(position<0){
              position=1;
            }
            //执行快退
            wx.seekBackgroundAudio({
              position:position
            });
            //给出一个友情提示，在实际应用中，请删除！！！
            wx.showToast({title:"快退10s",duration:500 });
          }
          if(how==="1"){
            //注意：快进时，当前播放位置快进10秒后大于总时长时，直接设置position为总时长减1
            //快进达到的位置
            let position=currentPosition+10;
            if(position>duration){
              position=duration-1;
            }
            //执行快进
            wx.seekBackgroundAudio({
              position: position
            });
            //给出一个友情提示，在实际应用中，请删除！！！
            wx.showToast({ title: "快进10s",duration:500 });
          }
        }else{
          //给出一个友情提示，在实际应用中，请删除！！！
          wx.showToast({title: "音乐未播放",duration:800});
        }
      }
    })
  },
  //音乐播放状态
  onAudioState:function(){
    let that=this;
    wx.onBackgroundAudioPlay(function(){
      //当wxwx.playBackgroundAudio()执行时触发
      //改变coverImg和播放状态
      that.setData({isPlaying:true,changedImg:true});
      console.log("on play");
    });
    wx.onBackgroundAudioPause(function(){
      //当wxwx.pauseBackgroundAudio()执行时触发
      //仅改变播放状态
      that.setData({isPlaying:false});
      console.log("on pause");
    });
    wx.onBackgroundAudioStop(function() {
      //当音乐自行播放结束时触发
      //改变coverImg和播放状态
      that.setData({isPlaying:false,changedImg:false});
      console.log("on stop");
    });
  }
})

运行结果： 

 3.文件API

           从网络上下载或录音的文件都是临时保存的,若要持久保存,需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力,主要包括以下５个API接口:

  • wx.saveFile(Object)接口用于保存文件到本地。
  • wx.getSaveFileList(Object) 接口用于获取本地已保存的文件列表。
  • wx.getSaveFileInfo(Object) 接口用于获取本地文件的文件信息。
  • wx.removeSaveFile(Object) 接口用于删除本地存储的文件。
  • wx.openDocument(Object) 接口用于新开页面打开文档,支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts。

1.保存文件

               wx.saveFile(Object)用于保存文件到本地, 其相关参数如表所示。

 

示例代码：

saveImg:function(){
  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;
          console.log(saveFilePath)
        }
      })
      
    }
  })
}

2.获取本地文件列表

                wx.getSaveFileList(Object) 接口用于获取本地已保存的文件列表, 如果调用成功, 则返回文件的本地路径、文件大小和文件保存时的时间戳(从1970/01/0108: 00:00到当前时间的秒数)文件列表。其相关参数如表所示。

示例代码：

wx.getSavedFileList({
  success:function(res){
    that.setData({
      fileLIst:res.fileLIst
    })
  }
})

 3.获取本地文件的文件信息

            wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息,此接口只能用于获取已保存到本地的文件,若需要获取临时文件信息,则使用wx.getFileInfo(Object)接口。其相关参数如表所示。

示例代码：

wx.chooseImage({
  count:1,//默认值为9
  sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二则都有
  sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
  success:function(res){
    var tempFilePaths=res.tempFilePaths[0]
    wx.saveFile({
      tempFilePath:tempFilePaths,
      success:function(res){
        var saveFilePath=res.savedFilePath;
        wx.getSavedFileInfo({
          filePath:saveFilePath,
          success:function(res){
            console.log(res.size)
          }
        })
      }
    })
  }
})

运行结果：会获取文件夹中的图片 

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,其相关参数如表所示。

示例代码：

wx.downloadFile({
  url: 'http://localhost/fm2.pdf',//在本地通过wxamp搭建服务器
  success:function(res){
    var tempFilePath=res.tempFilePath;
    wx.openDocument({
      filePath:tempFilePath,
      success:function(res){
        console.log("打开成功")
      }
    })
  }
})

运行结果： 

4.本地数据及缓存API

          小程序提供了以键值对的形式进行本地数据缓存功能,并且是永久存储的,但最大不超过10MB,其目的是提高加载速度。数据缓存的接口主要有４个:

  • wx.setStorage(Object)或wx.setStorageSync(key,data)接口用于设置缓存数据。
  • wx.getStorage(Object)或wx.getStorageSync(key) 接口用于获取缓存数据。
  • wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存数据。
  • wx.clearStorage()或wx.clearStorageSync()接口用于清除缓存数据。

               其中,带Sync后缀的为同步接口,不带Sync后缀的为异步接口。


1.保存数据


１.wx.setStorage(Object)


             wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中,接口执行后会覆盖原来key对应的内容。其参数如表所示。

示例代码：

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

运行结果： 

２.wx.setStorageSync(key,data)

           wx.setStorageSync(key,data)是同步接口,其参数只有key和data。

示例代码：

wx.setStorageSync('age','25')

2.获取数据 

1.wx.getStorage(Object)

             wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表所示:

示例代码：

wx.getStorage({
  key:'name',
  success:function(res){
    console.log(res.data)
  },
})

2.wx.getStorageSync(key) 

          wx.getStorageSync(key)从本地缓存中同步获取指定key对应的内容。其参数只有key。

示例代码：

try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}

 3.删除数据

1.wx.removeStorage(Object)

           wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。其相关参数如表所示

示例代码：

wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

 ２.wx.removeStorageSync(key)

             wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。示例代码如下：

try{
  wx.removeStorageSync('name')
}catch(e){
  //Do something when catch error
}

4.清空数据 

１.wx.clearStorage()

              wx.clearStorage()接口用于异步清理本地数据缓存,没有参数。

示例代码如下：

wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()  //清理本地数据缓存
  },
})

２.wx.clearStorageSync() 

          wx.clearStorageSync()接口用于同步清理本地数据缓存。示例代码如下：

try{
  wx.clearStorageSync()
}catch(e){
  
}

5.位置信息API

                  小程序可以通过位置信息API来获取或显示本地位置信息, 小程序支持WGS84和GCj02标准,WGS84标准为地球坐标系,是国际上通用的坐标系;GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统,是由WGS84坐标系经加密后的坐标系,又称为火星坐标系。

            默认为WGS84标准,若要查看位置需要使用GCj02标准。主要包括以下３个API接口:

  • wx.getLocation(Object)接口用于获取位置信息。
  • wx.chooseLocation(Object)接口用于选择位置信息。
  • wx.openLocation(Object)接口用于通过地图显示位置。

1.获取位置信息

         wx.getLocation(Object)接口用于获取当前用户的地理位置、速度,需要用户开启定位功能,当用户离开小程序后,无法获取当前的地理位置及速度,当用户点击“显示在聊天顶部”时,可以获取到定位信息,其相关参数如表所示。

                  wx.getLocation(Object)调用成功后，返回的参数如表所示。

示例代码：

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.chooseLocation(Object)调用成功后，返回的参数如表所示： 

示例代码： 

wx.chooseLocation({
  success:function(res){
    console.log("位置的名称："+res.name)
    console.log("位置的地址："+res.address)
    console.log("位置的经度："+res.longitude)
    console.log("位置的纬度："+res.latitude)
  }
})

运行结果：

3.显示位置信息 

            wx.openLocation(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号'
    })
  }
})

运用真机调试结果：

6.设备相关API 

               设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下５个接口API:

  • wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口用于获取系统信息。
  • wx.getNetworkType(Object)接口用于获取网络类型。
  • wx.onNetworkStatusChange(CallBack)接口用于监测网络状态改变。
  • wx.makePhoneCall(Object)接口用于拨打电话。
  • wx.scanCode(Object)接口用于扫描二维码。​​​​​​​​​​​​​​

1.获取系统信息

            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: '14796770916',
})

 运行结果：

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)
  }
})

运行结果：

胡小图图图图图
关注
  • 18
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序开发 | API应用案例（下）
惊鸿若梦一书生
04-12 2104
本章讲解了canvas绘图、animation动画、文件上传与下载、录音与播放，以及通过WebSocket实现在线聊天系统。通过本章学习，读者应掌握这些技术的使用，能够利用canvas来绘制各种图形；能够使用animation动画实现移动、旋转、移动、缩放等效果；能够根据实际需求开发文件上传、下载、录音、在线聊天等功能。
视频播放小程序-小程序媒体API-基础入门
m0_46965984的博客
03-20 3548
视频播放效果： 视频列表的切换方法 视频自动播放方法 视频随机颜色弹幕效果 一。界面设计 1.创建项目videoDemo 将app.json文件内pages属性中的”pages/logs/logs“删除 删除utils文件夹及其内容 删除index.wxml和index.wxss中的全部代码 删除index.js全部代码并输入page找到 按回车键自动补全函数 同理删除app.js全部代码，并且输入关键词app找到第一个选项按回车键补全代码 1.导航栏设计 ...
微信小程序开发（超详细保姆式教程）
热门推荐
m0_64875238的博客
11-10 32万+
微信小程序开发（超详细保姆式教程）
微信小程序api
weixin_44978043的博客
12-30 3879
1.api 1.概述 小程序开发框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等 2.api分类 监听api 约定以on开头的API用了来监听某个事件是否触发 同步api 约定，以Sync结尾的API都是同步API，直接接取函数返回的的结果既可，不需要等待 异步api 大多数API都是异步API，如wx.request,wx.login等，异步api方法主体是object结构，都有success/faill/complete 几乎所有的异步api都支
C++ WINDOWS API 第1章 Windows 应用程序开发入门
GarfieldEr007的专栏
04-18 1764
目录 1.1       第一个实例程序.. 1 1.1.1       start.exe. 1 1.1.2       Windows API 2 1.1.3       程序入口函数.. 2 1.1.4       start.c 代码分析.. 3 1.2       编译代码.. 4 1.2.1       安装Visual Studio. 4 1.2.2       安装
第一个微信小程序的诞生
choice~的博客
07-11 1万+
开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。跟随这个教程，开始你的小程序之旅吧！进入小程序注册页 根据指引填写信息和提交相应的资料；注意邮箱是没有被微信号或者公众号绑定，如果绑定了可以解绑就可以使用。下一步：邮箱激活账号信息填写完进入邮箱激活，需要到邮件里面验证登录使用电脑登录邮箱，我这里是网易邮箱，可使用QQ，步骤一样最后一步：信息登记，就可以拥有自己的小程序帐号。手机微信为管理员扫描二维码在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操
【小程序】微信小程序常用api的使用，附案例（建议收藏）
11-14 6206
学会使用 微信官方文档 · 小程序 wxapi.js 代码 界面 wxapi.js 代码截图 4.3 wx.uploadFile()上传文件 wxapi.js 案例截图 wxapi.js 代码截图 6- 网络请求 6.1 wx.request() 发起 HTTPS 网络请求 【微信小程序】小程序使用详细教程（建议收藏）
微信小程序调用新闻类API
qq_44538331的博客
05-27 1万+
做过微信小程序的伙伴都知道，当我们需要实现一个小程序中类似于新闻资讯的功能时，需要我们调用一个外部实时更新的新闻数据接口，从而将数据展示在我们的手机页面上。那么我们该如何实现这个功能呢？下面我们来实现一下： 新闻列表wxml: <view class="read" wx:for="{{readList}}" wx:key="{{index}}"> <image src='{{it...
钉钉小程序生态2—区分小程序和H5微应用
summon的博客
10-10 4126
小程序主页面H5微应用主页面从左侧菜单可以看出：在基础信息菜单下小程序比H5微应用多一个人员管理；在安全与监控菜单下小程序比H5微应用多一个安全中心。1. 不一样的运行环境H5仅能借助浏览器实现启动，但小程序虽然包含H5技术，但在运行环境方面与H5不同，它基于解析器得以运行，结合自定义的开发语言标准，其性能更是有了长足的进步。简单讲小伙伴们可以利用浏览器打开H5网页，运用微信、钉钉、支付宝平台打开小程序。2. 不一样的成本在开发方面，很多企业借助各类开发软件针对H5开发，定制化出众。
微信小程序-常用API开发技巧学习笔记
修炼之路
07-17 3497
常用API开发技巧学习笔记第一章 认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章 小程序环境搭建与开发工具介绍小程序开发环境 第一章 认识微信小程序   微信小程序是一种不需要下载安装即可使用的全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有“用完即走，不用关心是否安装太多应用”的使用体验。   微信小程序做成了一个开放式的平台，...
微信小程序案例包.zip
09-03
WxValidate微信小程序使用步骤及其插件下载和案例查看，到官网下载WxValidate插件，用谷歌浏览器可以翻译英文界面为中文（点击绿色按钮code下载）,分为64位和32位
微信小程序云开发如何使用云函数生成二维码
10-16
如果你还不知道如何在云函数中安装第三方依赖，可以参考“微信小程序中的云开发如何使用npm安装依赖”文档。你可以通过`npm install --save request-promise`命令在本地安装，然后将依赖上传到云端。 2. **初始化云...
清华大学张思民Java第6章.ppt
11-13
Java图形与图像处理是编程中一个重要的组成部分，特别是在开发用户界面和多媒体应用时。本章主要探讨了Java在图形绘制和数字图像处理方面的知识，由...这为开发图形用户界面和进行图像处理的Java应用程序奠定了基础。
零基础玩转微信小程序视频教程
10-14
微信生态当中，小程序相辅相成给了用户更加完美的用户体验，如果你现在是个人或者公司，想要享受到小程序的红利时刻，那第一步就是应该先会做一款属于企业或者属于你的小程序 课程内容 小程序基础 1、小程序注册 2...
莫凡图书商城-微信小程序企业应用实战精讲
07-01
由《微信小程序简明开发教程 第二版》作者 小刚老师亲自录制； （2）本套课程视频后续会出配套书籍《微信小程序开发项目教程》； （3）本套课程设计方式：由一个完整项目为主线，贯穿整个项目，基础内容讲解+实战...
1964springboot VUE小程序在线学习管理系统开发mysql数据库uniapp开发java编程计算机网页源码maven项目
qq_251836457的博客
06-21 1147
springboot VUE uniapp 小程序 在线学习管理系统是一套完善的完整信息管理类型系统，结合springboot框架uniapp和VUE完成本系统，对理解vue java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具有完整的源代码和数据库，系统主要采用B/S模式开发。需要源码 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者。6.是Maven项目；(1)管理员管理：对管理员信息进行添加、删除、修改和查看。
若依框架,小程序访问后端,后端访问客户端,客户端读取图片返回
threadroc的专栏
06-17 418
这个示例代码展示了如何在服务端调用客户端读取本地图片并返回给前端的基本流程。如果需要处理更多的业务逻辑或错误情况，可以进一步完善代码。的前缀路径，以适应你的图片存储路径。：根据你的实际情况修改。
低成本创业新篇章：上门回收小程序的崛起与挑战
最新发布
2402_83689311的博客
06-21 515
通过加强品牌建设、规范服务流程、完善法律法规、建立用户信任和创新商业模式等方式来不断提升服务质量和用户体验，从而赢得更多用户的信任和支持。同时，随着人们生活水平的提高和消费观念的转变，对于闲置物品的处理需求日益增长，为上门回收小程序提供了广阔的市场空间。上门回收小程序正是数字化趋势下的产物，它借助互联网平台的优势，实现了服务流程的优化和升级。同时，通过大数据和人工智能技术，上门回收小程序还能够实现精准营销和个性化服务，提高用户满意度和忠诚度。这一理念符合当代社会的环保趋势，有助于提升品牌形象和用户黏性。
Java聚合快递系统对接云洋系统快递小程序APP公众号系统源码
2401_84413757的博客
06-17 863
云洋系统作为行业领先的云计算平台，以其强大的数据处理能力和灵活的扩展性，为快递行业的变革提供了有力支持。通过深度对接各大快递公司，云洋系统实现了快递数据的实时同步和共享，为快递管理带来了质的飞跃。随着电商的蓬勃发展，快递业务量呈爆发式增长，而传统的快递管理方式已难以满足日益增长的需求。因此，如何提升快递管理的效率、降低运营成本、优化用户体验，成为了快递行业亟待解决的问题。快递小程序作为用户与快递系统之间的桥梁，其功能的丰富性和易用性对于提升用户体验至关重要。
第三方调用微信小程序api调用逻辑
10-25
第三方调用微信小程序的API的逻辑如下： 1.首先，第三方应该申请一个微信开放平台的账号，并在账号中注册自己的小程序。 2.在注册小程序之后，第三方需要在小程序设置中开启API的调用权限，并获取到小程序的AppID和AppSecret。 3.通过使用AppID和AppSecret，第三方可以向微信服务器发送HTTP请求来获取access_token。access_token是访问微信API的凭证。 4.获得了access_token之后，第三方可以使用它来调用微信提供的各种API。通过传入有效的access_token，第三方可以对小程序进行管理、授权用户信息、发送模板消息等功能。 5.在调用API时，第三方需要构造合法的HTTP请求，包括请求的URL、参数和请求方式等。例如，可以使用GET或POST方式发送请求，并将参数放在请求的URL或请求体中。 6.为了确保API请求的安全性，第三方需要使用自己申请的第三方平台的密钥对请求进行签名，以及对返回的数据进行解密。 7.调用API时，第三方需要注意每个API的调用限制和请求频率，避免超出限制。 总结：第三方调用微信小程序API的逻辑包括申请账号、获取access_token、构造合法HTTP请求、对请求进行签名和解密等步骤。通过这些步骤，第三方可以在自己的应用中调用微信小程序的各种功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值