第六章总结

m0_心事

已于 2024-04-17 10:42:51 修改

阅读量728

点赞数 19

文章标签：微信小程序小程序

于 2024-04-11 09:32:43 首次发布

本文链接：https://blog.csdn.net/m0_74196159/article/details/137556953

版权

API应用

网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生AP接口或第三方APL提供了各类接口实现前后端交互
网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口
（1）wx.request(0bject)接口用于发起HTTPS 请求。
（2）wx.uploadFile(Object)接口用于将本地资源上传到后台服务器。
（3）wx.downloadFile(Object)接口用于下载文件资源到本地。
（4）wx.connectSocket(0bject)接口用于创建一个WehSocket 连接。
（5）wx.sendSocketMessage(0bject)接口用于实现通过 WehSocket连接发送数据
（6）wx.closeSocket(0bject)接口用于关闭WebSocket 连接。
（7）wx.onSocketOpen(CallBack)接口用于监听WebSocket 连接打开事件。
（8）wx.onSocketEror(CallBack)接口用于监听WebSocket 错误。
（9）wx.onSocketMessage(CallBack)接口用于实现监听WebSocket 接收到服务器的消息
事件。

（10）wx.onSocketClose(CallBack)接口用于实现监听WebSocket 关闭。

发起网络请求

wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求

示例代码如下：

wxml

<button type="primary" bind:tap="getbaidutap">获取HTML数据</button>
<textarea value="{{html}}" auto-height="" maxlength="0"></textarea>

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

运行结果：

示例代码：

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>

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;
      wx.showToast({
        title: '正在查询，请稍侯...',
        icon: 'loading',
        duration: 10000
      });
      wx.request({
        url: 'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'off9bfccdf147476e067de994eb5496e'
        },
        header:{
          'Content-Type':'application/json',
        },
        method:'GET',
        success:function(res){
          wx.hideToast();
          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.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求

示例代码如下：

wxml

<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>

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){
      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(){
          wx.hideToast()
        }
      })
    }
  }
})

运行结果：

下载文件

wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET 请求，返回文件的本地临时路径。

示例代码如下：

wxml

<button type="primary" bind:tap="downloadimage">下载图像</button>
<image src="{{img}}" mode="widthFix" style="width: 90%; height: 500px;"></image>

Page({
  data:{
    img:null
  },
  downloadimage:function(){
    var that = this;
    wx.downloadFile({
      url: 'http://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

运行结果：

多媒体API

多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API，其目的是丰富小程序的页面功能

图片API

wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照

wx.previewImage(Object)接口用于预览图片

wx.getImageInfo(Object)接口用于获取图片信息

wx.saveImageToPhotosAIbum(Object) 接口用于保存图片到系统相册

1.选择图片或照片

wx.chooseImage(Object)接口用于本地相册选择图片或使用相机拍照

示例代码如下：

Page({
  count:2,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths = res.tempFilePaths
    var tempFiles = res.tempFilePaths;
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

运行结果

预览图片

wx.previewImage(Object)接口主要用于预览图片

获取图片信息

保存图片到系统相册

录音API

录音API提供了语音录制功能，主要包括以下两个API接口：

wx.startRecord（Object）接口用于实现开始录音

wx.stopRecord（Object）接口用于实现主动调用停止录音

开始录音

停止录音

wx.stopRecord（Object）接口用于实现主动调用停止录音

示例代码如下：

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

音频播放控制API

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

wx.playBackgroundAudio(0bject)接口用于播放音乐。wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态wx.seekBackgroundAudio(0bject)接口用于定位音乐播放进度。
wx.pauseBackgroundAudio()接口用于实现暂停播放音乐。
wx.stopBackgroundAudio()接口用于实现停止播放音乐。
wx.onBackgroundAudioPlay(CalBack)接口用于实现监听音乐播放wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止

1.播放音乐

wx.playBackgroudAudio(Object)用于播放音乐，用于播放同一时间只能有一首音乐处于播放状态

示例代码如下：

 wx.playBackgroundAudio({
    dataUrl: 'http://bmob - cdn - 16488.b0.upaiyun/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)
    }
  })
Page({
 
})

获取音乐播放状态

wx.getBackgroundAudioPlayState(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("音乐文件的下载进度:"+status)
    }
  })

控制音乐播放进度

wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度

暂停播放音乐

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

停止播放音乐

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

监听音乐播放

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

监听音乐暂停

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

监听音乐停止

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

案例展示

wxml:

<view class="container">
  <image class =" bgaudio" src="{{changedImg? music.coverImg:'../../images/ai.png'}}"/>
  <view class="Control-view">
    <image src ="../../images/ps.png" bindtap="onPositionTap" data-how="0"/>
    <image src ="../../images/{{isPlaying? 'pause': 'play'}}.png"bindtap="onAudioTap"/>
    <image src ="../../images/微信图片_20240306105445.jpg"bindtap ="onStopTap"/>
    <image src ="../../images/ai.png"bindtap ="onPositionTap"data -how = "1"/>
  </view>
  </view>


Page({
  data:{
      //记录播放状态
  isPlaying:false, 
  //记录coverImg，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时都使用当前音乐的图片
 coverImg,
 changedImg: false, 
 //音乐内容
 music:{
 "url":
 "http://bmob-can-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
"title":"盛晓玫-有一天",
"coverImg":
"http://bmob-can-16488.b0upaivun.com/2018/02/09/£6042971409681880cc3d3e581f7724.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.stopBackgroundAudio({
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){
let status=res,status;
if(status===1){
let duration=res.duration;
let currentPosition=res.currentPosition;
if(how ==="0"){
let position=currentposition-10;
if(position<0){
position =1;
}
wx.seekBackgroundAudio({
position: position
});
wx.showToast({title:"快退10s",duration:500});
}
(how==="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(){
that.setData({isPlaying:true,changedImg:true});
console.log( "on play");
});
wx.onBackgroundAudioPause(function(){
that.setData({isPlaying:false});
console.log("on pause");
});
wx.onBackgroundAudioStop(function(){
that.setData({lisPlaying:false,changedImg:false});
console.log("on stop");
});
  }
},)

wxss

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

文件API

        从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口:wx.saveFile(0bject)接口用于保存文件到本地。
        wx.getSavedFileList(0bject)接口用于获取本地已保存的文件列表。
        wx.getSaveFilelnfo(0bject)接口用于获取本地文件的文件信息。
        wx.removeSaveFile(Object)接口用于删除本地存储的文件。
        wx.openDocument(0bject)接口用于新开页面打开文档，支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts .

保存文件

wx.saveFile（Objcet）用于保存文件到本地

示例代码

saveImg:function(){
  wx.chooseImage({
    cont:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths = res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          varsaveFilePath = res.savedFilePath;
          console.log(saveFilePath)
        }
      })
    }
  })
}

获取本地文件列表

wx. getSavedFileList(0bject)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳(从1970/01/0108:00:00到当前时间的秒数)文件列表。

示例代码

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

获取本地文件的文件信息

wx. getSaveFileInfo(0bject)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFileInfo(0bject)接口。

示例代码

wx.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths = res.tempFilePaths,
    wx.saveFile({
      tempFilePath:tempFilePaths,
      success:function(res){
        var saveFilePath = res.saveFilePath;
        wx.getSavedFileInfo({
          filePath:saveFilePath,
          success:function(res){
            console.log(res.size)
          }
        })
      }
    })
  }
})

删除本地文件

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

打开文档

wx.openDocument(Object)接口用于新开页面打开文档,支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx

示例代码

wx.downloadFile({
  url: 'http://localhost/fm2.pdf',
  success:function(res){
    var tempFilePath = res.tempFilePath;
    wx.openDocument({
      filePath: 'tempFilePath',
      success:function(res){
        console.log("打开成功")
      }
    })
  }
})

本地数据及缓存API

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

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后缀的为异步接口

保存数据

wx.setStorage（Object）

wx.setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来的key对应的内容

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

运行结果

wx.setStorageSync(key,data)

wx.setStorageSync(key,data)是同步接口

示例代码

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

运行结果

获取数据

wx.getStorage(Object)

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容

示例代码

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

wx.getStorageSync(key)

wx.getStorageSync(key)从本地缓存中同步获取指定key对应的内容

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

删除数据

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 对应的内容。

示例代码如下

try{
  wx.removeStorageSync('name')
}catch(e){
  
}

清空数据

wx.clearStorage()

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

wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()
  },
})

wx.clearStroageSync()

wx.clearStroageSync()接口用于同步清理本地数据缓存

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

位置信息API

        小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GC
标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局
定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系
默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口.
        wx.getLocation(Object)接口用于获取位置信息。
        wx.chooseLocation(Object)接口用于选择位置信息。
        wx.openLocation(Object)接口用于通过地图显示位置。

获取位置信息

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

wx.getLocation(Objcet)调用成功后，返回的参数如表

wx.getLocation({
  type:'wgs84',
  success:function(res){
    console.log("经度:"+res.longitude);
    console.log("纬度:"+res.latitude);
    console.log("速度:"+res.longitude);
    console.log("位置的精确度:"+res.accurary);
    console.log("水平精确度:"+res.horizontalAccuracy);
    console.log("垂直精确度:"+res.verticalAccuracy);
  },
})

选择位置信息

wx.chooseLocation(Object)接口用于打开的地图中选择位置，用户选择为之后可返回当前位置的名称，地址，经纬度新信息。其相关参数如表

wx.chooseLocation(Object)调用成功后，返回参数如表

显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息，其相关参数如表

示例代码如下：

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:'西安市长安区西长安区300号'
    })
  }
  })

设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及主
码等。主要包括以下5个接口API：
wx. getSystemInfo(Object)接口、wx.getSystemInfoSyne()接口用于获取系统信息
wx. getNetworkType(Object)接口用于获取网络类型。
wx.onNetworkStatusChange(CallBack)接口用于监测网络状态改变。
wx.makePhoneCall(Object)接口用于拨打电话。
wx.scanCode(Object)接口用于扫描二维码。

获取系统信息

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

运行结果

网络状态

获取网络状态

wx.getNetworkType(Object)用于获取网络类型，如下表

如果wx.getNetworkType()接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）。

示例代码如下

wx.getNetworkType({
  success:function(res){
    console.log(res.networkType)
  },
})

运行结果

监听网络状态变化

wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络链接。

示例代码如下

wx.onNetworkStatusChange(function(res) {
  console.log("网络是否连接:"+res.isConnected)
  console.log("变化后的网络类型"+res.networkType)
})

拨打电话

wx.makePhoneCall(Object)接口用于实现调用手机拨打电话，如下表

示例代码如下

wx.makePhoneCall({
  phoneNumber: '13177843308',
})

运行结果

扫描二维码

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