第六章总结

Lrruri.

已于 2024-04-17 10:47:39 修改

阅读量609

点赞数 12

文章标签：微信小程序

于 2024-04-11 09:56:29 首次发布

本文链接：https://blog.csdn.net/a645356566/article/details/137556677

版权

（一）网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要与后台进行交互的能力。

1.发起网络请求

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

例如通过wx.request(Object)获取百度(http://www.baidu.com)首页的数据。

示例代码如下：

//baidu.wxml	< buttontype = "primary"bindtap ="getbaidutap">获取HTML数据<Ab	
ton >	
    <textareavalue =|llhtml||'auto -heightmaxlength ='0'> </textarea>	
    //baidu.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
            })
         }
     }）
    }
}）

运行截图：

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

示例代码如下：

   //postcode.wxml
<view>邮政编码:</view >
<inputtype = "text "bindinput ="input "placeholder ='6位邮政编码'/>
<buttontype = "primary"bindtap ="find*>查询</button>
<blockwx:for = "{{address}}">
    <blockwx:for ="{{item}}">
         <text > {{item|}</text >
    </block >
</block >

//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 selt = this;
   //显示toast 提示消息
   wx.showtoast({
       title:'正在查询,请精候.....,
       icon:'loading' 
       duration:10000 
   });
   wx.request(l
	   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 llres.data.reason,//错误原因分析
           error_code:res.data.error_code
})
}
}
})
}
}
})

运行截图：

2.上传文件

wx.uploadFile(Object)接口用于将本地资源上传到本地服务器，并在本地发起一个HTTPS POST请求，其相关参数如表：

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

    //upload.wxml
	<buttontype = "primary"bindtap = "uploadimage">上传图片</button>
    <imagesrc = *||img|| "mode = "widthFix"/>

    //upload.js
    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){
显示toast 提示消息
    wx.showToast({
      icon:"loading",
      title:"正在上传"|),
     }),
      wx.uploadFile(l
         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)l
     console.log(e);
     wx.showModal({
     title:'提示'，
     content:'上传失败'
     showCancel:false
    })
}，
          complete:function( )
//隐藏 Toast
            wx.hideToast();
         }
      })
     }
   }
})

3.下载文件

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

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

示例代码如下：

//down1oadfile.wxml
<buttontype ="primary "bindtap ='downloadimage'>下载图像</button>
<imagesrc = " || img||" mode = 'widthFix'style =" width:90% ; height500px"> < /image >
//down1oadFile.js 
  Page({ data:{
 img:null
}，
downloadimage:function( ) {
var that = this;
   wx.down1oadFile(l
     url:"http://iocalhost/1.jpg",//通过WAMP软件实现
     success:function(res){
       console.log(res)
       that.setData({
         img:res.tempFilePath
    }）
   }
})
}
})

(二）多媒体API

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

1.图片API

图片API实现对相机拍照图片或本地相册图片进行处理，主要包括一下4个API接口：

（1）选择图片或拍照

wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照。其相关参数如表：

若调用成功，则返回tempFilePaths和tempFile。

（2）预览图片

wx.previewImage(Object)接口主要用于预览图片，其相关参数如表：

（3）获取图片信息

wx.getImageInfo(Object)接口用于获取图片信息，其相关参数如表：

（4）保存图片到系统相册

wx.saveImageToPhotosAlbum(Object）接口用于保存图片到相册，其相关参数如表：

2.录音API

(1）开始录音

wx.startRecord(Object)接口用于实现开始录音。其相关参数如表：

（2）停止录音

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

3.音频播放控制API

(1)播放语音

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

（2）暂停播放

wx.pauseVoice(Object)用于暂停播放的语音。

（3）结束播放

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

4.音乐播放控制API

（1）播放音乐

wx.playBackgroundAudio(0bject)用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表：

（2）获取音乐播放状态

wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态，其相关参数如表：

（3）控制音乐播放进度

wx.seekBackgroundAudio(Object)接口用于播放进度，其相关参数如表：

（4）暂停播放音乐

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

（5）停止播放音乐

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

（6）监听音乐播放

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

（7）监听音乐暂停

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

（8）监听音乐停止

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

（9）案例展示

music.wxml的代码如下：

<viewclass = "cont ainer">
< imageclass = " bg	audio"src = "{{changedImg?	music.coverImg:/im-	
7
age/background.png'}}
<viewclass ="cont rol -view">
<!--使用 data -how定义一个0表示快退10秒 -->
<imagesrc ="/image/pre.png "bindta tp="onPositionTap"data -how="0"/><imagesrc = "/image/{{isPlaying?'pause':'play'|} .png " bindtap = onAudioTap"/>
<imagesrc ="/image/stop.png "bin dtap = "onStopTap"<!--使用data-how定义一个1表示快进10 秒 -->
<imagesrc ="/image/next.png "bindt ap = "onPositionTap"data - how ="1"/>
< /view >
< /view >

music.wxss代码如下：

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

music.json代码如下：

{}

music.js代码如下：

1 Page({
2	data: {	
3 //记录播放状态
4	isPlaying:false，	
5 //记录coverImg,仅当音乐初始时和播放停止时,使用默认的图片。播放中和暂停都使用当前音乐的图片6 coverImg
changedImg:false,
^
8 //音乐内容
9	music:	
10 "url":
“http://bmob-cdn-16488 .b0 .upaiyun.com/2018/02 /09/117e4a1b405195b18061299e2de89597 .mp3".
12	"title":"盛晓玫-有一天"，	
13	"coverImg":	
14"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/604297140e9681880Cc3d3e581f7724.jpg"15
15
16
17	onLoad:function()	
18//页面加载时,注册监听事件19 this.onAudioState();20
21//点击播放或者暂停按钮时触发
22	onAudioTap:function( event){	
23 if(this.data.isPlaying){
24 //如果在正常播放状态,就暂停,并修改播放的状态
25	wx.pauseBackgroundAudio();	
26	|else {	
27 //如果在暂停状态,就开始播放,并修改播放的状态
28 letmusic = this.data.music;
29
wx.playBackgroundAudio({
30	dataUrl: music.url,	
31	title:music.title,	
32	coverImgUrl:music.coverImg	
33	1)	
34
35 |，
36 //点击即可停止播放音乐
37	onStopTap:function(){	
38 let that = this;
39	wx.stopBackgroundAudio(l	
40	success:function()	
//改变coverImg 和播放状态
that.setData(| isPlaying:false,changedImg: false|);
43
44	1)	
45
46	//点击“快进10秒"或者“快退10秒”时,触发	
47	onPositionTap;function( event)1	
48 et how = event.target.dataset. how:
49	//获取音乐的播放状态	
50	wx.getBackgroundAudioPlayerState(l	
51	success:function(res)	
52	//仅在音乐播放中,快进和快退才生效	
53//音乐的播放状态,1表示播放中
54 let status = res.status:
55 if(status ===1)l
56 //音乐的总时长
57 let duration = res.duration;
58 //音乐播放的当前位置
59 let currentPosition = res.currentPosition;
60 if(how ==="0"){
61 //注意:快退时,当前播放位置快退10秒小于0时,直接设置position 为1;否则,直接减去10秒
63 //快退到达的位置
64 let position = currentPosition - 10;65 if(position <0){
66	position =1;	
67
68	//执行快退	
69	wx.seekBackgroundAudio(	
70	position; position	
71	l);	
72//给出一个友情提示,在实际应用中,请删除!!!
73	wx.showToast(| title:"快退10s",duration: 500 1);	
74
75 if(how ==="1")|
76 //注意:快进时,当前播放位置快进10秒后大于总时长时,直接设置position为总时长减1
77 //快进到达的位置
78 let position =currentPosition +10:
79 if(position >duration){
80	position =duration -1;	
81
82 //执行快进
83	wx.seekBackgroundAudio(l	
84	position: position	
85	l);	
86 //给出一个友情提示,在实际应用中,请删除!!!
87	wx.showToast(| title:"快进 10s",duration:500 1);	
88
89	lelse'{	
90//给出一个友情提示,在实际应用中,请删除!!!
91
wx.showToast({ title:"音乐未播放",duration:800 |);
92}
93}
94})
95},
96 //音乐播放状态
97	onAudioState:function(){	
98 let that =this;
99	wx. onBackgroundAudioPlay(function()|	
100//当wx.playBackgroundAudio()执行时触发
101 //改变coverImg和播放状态
102	that.setData(| isPlaying:true,changedImg: true l);	
103	console.log( "on play");	
104	(1);	
105	wx.onBackgroundAudioPause(function()|	
106	//当 wx. pauseBackgroundAudio()执行时触发	
107	//仅改变播放状态	
108	that.setData(| isPlaying:false|);

（三）文件API

（1）保存文件

wx.saveFile(Object)用于保存文件到本地，其相关参数如表：

代码如下：

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

（2）获取本地文件列表

wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳文件列表。其相关参数如表：

代码如下：

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

（3）获取本地文件的文件信息

wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，其相关参数如表：

（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，其相关参数如表：

（四）本地数据及缓存API

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

1.保存数据

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

（2）获取本地文件列表

wx.seStorage(Object)

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

代码如下：


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

2.获取数据

（1）wx.getStorage(Object)

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

表 wx. getStorage（Object）相关参数

代码如下：

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

（2）

wx. getStorageSync( key)

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

代码如下：

//获取数据 同步 js文件
try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}

3.删除数据

wx. removeStorage( Object )

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

代码如下：

//删除数据 异步 js文件
wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

（2）wx.removeSlorageSyne( key )

wx.removeStorageSyne(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key

//删除数据 同步 js文件
try{
  wx.removeStorageSync('name')
}catch(e){
  //Do something when catch error
},

4.清空数据

（1）wx.clearStorage( )

wx.clearStorage()接口用于异步清理本地数据缓存，没有参数。示例代码如下:

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

（2）wx.clearStroageSyne( )

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

//清空数据 同步 js文件
try{
  wx.clearStorageSync()
}catch(e){}

（五）位置信息API

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

1.获取位置信息

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

wx. getLocation（Object）调试成功后，返回的参数如表6-23所示。

代码如下：

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

3.显示位置信息

（六）设备相关API

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

■ wx.scanCode（Object）接口用于扫描二维码

1.获取系统信息
wx. getSystemInfo（Object）接口、wx. getSystemInfoSync（）接口分别用于异步和同步获取系统信息。其相关参数如表：

表6-27 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:'18092585093'//需要拨打的电话号码
})

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

运行结果：

Lrruri.

关注

12
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
第六章总结

wx.onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被wx.playBackgroundAudio(Object）方法触发，在CallBack中可改变播放图标。wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx.pauseBackground()方法触发。wx.playVoice(Object)接口用于开始播放语音，同时只允许一个语音播放文件，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。
复制链接

扫一扫