第六章（微信小程序API深度解析与应用实践）

微信小程序作为一种新兴的应用开发方式，因其便捷性和高效性受到了广泛的关注和应用。小程序的灵活性和功能丰富性很大程度上得益于其强大的API支持。本文将对微信小程序中的网络API、多媒体API、文件API等进行深入解析，帮助开发者更好地理解和应用这些API，从而提升小程序的性能和用户体验。

网络API：构建前后端交互的桥梁

网络API是微信小程序与服务器进行数据交互的核心。通过这些API，小程序能够实现数据的发送和接收，从而与后端服务器进行通信。微信小程序对网络请求进行了严格的安全限制，所有请求必须通过HTTPS协议进行，以确保数据传输的安全性。

在实际应用中，网络API的使用需要注意以下几点：

1. 合法域名配置：在微信公众平台的小程序管理后台，需要提前配置请求的合法域名，否则请求会被拒绝。
2. 网络请求限制：小程序对同时发起的网络请求数量有限制，开发者应当合理规划请求逻辑，避免因请求过多导致的性能问题。
3. 请求数据格式：微信小程序推荐使用JSON格式进行数据的发送和接收，这有助于简化数据处理流程。
4. 错误处理和重试机制：在网络请求中，应妥善处理可能出现的错误情况，并根据需要实现合理的重试机制。

 发起网络请求

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

<button type="primary"bindtap ="getbaidutap">获取 HTML 数据</button>
<textarea value ='{{html}}'auto-heightmaxlength ='0'> </textarea>

获取邮政编码

//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 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.reasonllres.data.reason,//错误原因分析
  error_code:res.data.error_code
  })
  }
  }
  })
  }
  }
  })

<view>邮政编码:</view >
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}"><text>{{item}}</text></block>
</block >

 多媒体API：丰富小程序的媒体处理能力

多媒体API为小程序提供了丰富的媒体处理功能，包括图片、音频、视频和录音等。这些API使得小程序能够实现拍照、录音、播放音频和视频等功能，极大地提升了用户体验。

在使用多媒体API时，应注意以下几点：

1. 用户授权：部分多媒体功能需要用户授权才能使用，如拍照和访问相册。开发者应确保在请求权限时给予用户清晰的提示。
2. 性能考虑：处理多媒体文件通常需要较多的计算资源，开发者应优化媒体处理逻辑，减少对用户设备性能的影响。
3. 多媒体文件存储：对于拍摄的照片和录制的音频，开发者可以选择保存到本地或者上传到服务器，应根据实际需求和小程序的政策进行选择。

图片api

图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
■ wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
■ wx.previewImage（Object）接口 用于预览图片。

■ wx.getImageInfo（Object）接口用于获取图片信息。
■ wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。
1．选择图片或拍照
wx. chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx. saveFile保存图片到本地。其相关参数如表所示

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

2．预览图片

 3．获取图片信息

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

 4．保存图片到系统相册

录音API

录音API提供了语音录制的功能，主要包括以下两个API接口：
 wx.startRecord（Object）接口用于实现开始录音。
 wx.stopRecord（Object）接口

音频播放控制API 

 文件API：管理小程序的本地存储

文件API为小程序提供了操作本地文件的能力，包括文件的读写、删除等。这些API使得小程序能够实现数据的持久化存储，为用户提供更加连贯和个性化的体验。

在使用文件API时，应注意以下几点：

1. 文件存储空间：小程序的文件存储空间是有限的，开发者应合理规划存储策略，避免不必要的存储占用。
2. 文件安全：对于存储在本地的敏感数据，应采取加密等措施保护数据安全。
3. 文件访问权限：在访问文件时，需要确保小程序具有相应的文件访问权限。

 

 

本地数据缓存API

 

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有4个：
wx.setStorage（Object）或wx.setStorageSync（key, data）接口 用于设置缓存数据。
 wx.getStorage（Object）或wx.getStorageSync（key）接口 用于获取缓存数据。
wx.removeStorage（Object）或wx.removeStorageSync（key）接口 用于删除指定缓存数据。wx.clearStorage（）或wx.clearStorageSync（）接口 用于清除缓存数据。

 

 

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

 

位置信息API

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

 

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

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