第六章总结

于 2024-06-06 16:26:36 发布
阅读量252 收藏 7
点赞数 3
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48215063/article/details/139503872
版权

 API应用

6.1.网络API

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

        网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。

1 发起网络请求

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

通过 wx.requesl(0bject)获取百度(https:// www,baidu.com)首页的数据。

代码：

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

2 上传文件

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

代码：

 
Page({
data:{
  img:null,
},
uploadumage:function(){
  var that=this;
  //选择图片
  wx.chooseImage({
    success:function(res){
      var tempFilePaths=res.tempFilePaths
      upload(that.tempFilePaths);
    }
  })
  //显示toast提示消息
function upload(page,path){
  wx.showToast({
    icon:'loading',
    title: '正在上传'
  }),
  wx.uploadFile({
    filePath: path[0],
    name: 'file',
    url: 'http://localhost/',
    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
      })
    },
    //隐藏Toast
    complete:function(){
      wx.hideToast();
    }
  })
  }
}
})

3 下载文件

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

 
Page({
  datd:{
    img:null
  },
  downloadimage:function(){
    var that=this;
    wx.downloadFile({
      //通过WAMP软件实现
      url: 'http://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

2 多媒体 API

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

1.选择图片或拍照

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

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

        wx.previewlmage(0bject)接口主要用于预览图片

page({
wx.previewImage({
    current:"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
    urls: ["http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
           "http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
           "http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
  ],
  })
})
3.获取图片信息

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

  wx.chooseImage({
    success:function(res){
      wx.getImageInfo({
        src: res.tempFilePaths[0],
        success:function(e){
          console.log(e.width)
          console.log(e.height)
        }
      })
    },
  })
4.保存图片到系统相册

        wx.savelmageToPhotosAlbum(Objee)接日用于保存图片到系统相册

  wx.chooseImage({
    success:function(res){
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePaths[0],
        success:function(e){
          console.log(e)
        }
      })
    },
  })

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

（1）wx.stariRecord(Object)接口 用于实现开始录音。

（2）wx.stopRecord(Objeet)接日 用于实现主动调用停止录音.

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

3录音API

1.开始录音

2.停止录音

        ws.slopReeord(Objeet)接口用于实现主动调用停止录音.

代码：

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

四.音频播放控制API
        音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制.

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

  wx.startRecord({
    success:function(res) {
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath,
        complete:function() {
          
        }
      })
    }
  })
2.暂停播放

        wx.pauseVoice(0bject)用于暂停正在播放的语音。

代码：

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

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

代码

  // 结束播放
  wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath,
      })
      setTimeout(function(){
        wx.stopVoice()
      },5000)
    }
  })
4  音乐播放控制API

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

1.播放音乐

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

2.获取音乐播放状态

        wx. getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态

3.控制音乐播放进度

wx,seekBackgroundAudio(0bject)接口用于控制音乐播放进度

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

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

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

7.监听音乐暂停
        wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx.pauseBackgroundAudio()方法触发。

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

9.案例展示
        以小程序music为案例来展示音乐API的使用。该小将司程序的4个页面文件分别为music.wxml、music.wxss、music.json。

代码：

.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}
.control-viewimage{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}
Page({
  data:{
    isplaying:false,
    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.stopBackgroundAudio({
      success:function(){
        that.setData({
          isplaying:false,changedImg:false
        });
      }
    })
  },
  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.setBackgroundAudio({
              position:position
            });
            wx.showToast({
              title: '快退10s',
              duration:500
            });
          }
          if(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({
        isplaying:false,
        changedImg:false
      });
      console.log("on stop")
    });
  }
})
<view class="container">
<image class="bgaudio"src = "{{changedImg? music.coverImg:'/pages/image/1.jpg'}}"/>
<view class ="control-view">
<!--使用data-how定义一个0表示快退10秒-->
<image src ="/pages/image/1.jpg"bindtap="onPositionTap"data-how= "0 "/>
<image src = "/pages/image/1.jpg" bindtap = "onAudioTap"/>
<image src ="/pages/image/1.jpg"bindtap = "onStopTap"/><!--使用data-how定义一个1表示快进10秒-->
<image src ="/pages/image/1.jpg"bindtap ="onPositionTap"data-how = "1"/>
</view >
</view >

6.3文件API

1.保存文件

Page({
  saveImage: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.savedFilePath;
            console.log(saveFilePath)
          }
        })
      }
    })
  }
})

2.获取本地文件列表

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

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

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.savedFilePath;
          wx.getSavedFileInfo({
            filePath:saveFilePath,
            success:function(res){
              console.log(res.size)
            }
          })
        }
      })
    }
  })

4.删除本地文件

wx.getSavedFileList({
    success:function(res){
      if(res.fileList.length>0){
      wx.removeSaveFile({
       FilePath:res.fileList[0].filePath,
       complete:function(res){
              console.log(res)
            }
          })
        }
      }
      })

5.打开文档

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

6.4本地数据及缓存API

6.4.1保存数据

1.wx.setStorage(Object)

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

2.wx.setStorageSync(key,data)

js代码

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

6.4.2获取数据

1.wx.setStorage(Object)

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

2.wx.setStorageSync(key)

js代码

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

6.4.3删除数据

1.wx.removeStorage(Object)

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

2.wx.removeStorageSync(key)

js代码

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

6.4.4清空数据

1.wx.clearStorage()

js代码

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

2.wx.clearStorageSync()

js代码

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

6.5位置信息API

6.5.1获取位置信息

js代码

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

6.5.2选择位置信息

js代码

wx.chooseLocation({
    success:function(res){
      console.log("位置的名称"+res.longitude)
      console.log("位置的地址"+res.accuracy)
      console.log("位置的纬度"+res.horizontalAccuracy)
      console.log("位置的纬度"+res.verticalAccuracy)
    }
})

6.5.3显示位置信息

js代码

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

6.6设备相关API

6.6.1获取系统信息

js代码

wx.getSystemInfo({
    success:function(res){
      console.log("手机型号:"+res.model);
      console.log("设备像素比:"+res.pixelRatio);
      console.log("窗口的高度:"+res.windowHeight);
      console.log("窗口的宽度:"+res.windowWidth);
      console.log("微信的版本号:"+res.version);
      console.log("操作系统版本:"+res.system);
      console.log("客户端平台:"+res.platform);
    },
})

6.6.2网络状态

1.获取网络状态

js代码

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

2.监听网络状态变化

js代码

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

6.6.3拨打电话

js代码

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

6.6.4扫描二维码

js代码

wx.scanCode({
  success:(res)=>{
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})

晓劉劉
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微型计算机原理与接口技术第六章总结
landiao8848的博客
05-25 143
第六章 输入输出和中断技术
6.第六章总结1
08-08
第六章总结的内容主要聚焦在电子通信中的调制与解调技术以及非线性器件的伏安特性分析。首先，我们讨论了线性频谱搬移，这是一个关键概念，指的是在调制过程中，信号的不同频率成分比例保持不变，允许只搬移部分频谱...
第六章 总结及作业【编译原理】
小心星的博客
06-07 1036
第六章 总结及作业【编译原理】
信号与系统第六章总结
qq_43543515的博客
06-03 483
西瓜书第六章总结
weixin_44852879的博客
12-27 412
【C#学习笔记】第六章总结
q418030645的博客
08-24 541
《C#入门经典第七期》第六章函数书后总结 定义函数 用函数名、0个或多个参数及返回类型来定义函数。函数的名称和参数统称为函数的签名。可以定义名称相同但签名不同的多个函数——这称为函数重载。也可以在结构类型中定义函数 返回值和参数 函数的返回类型可以是任意类型，如果没有返回值，那么就是void。参数也可以是任意类型，由一个用逗号分隔的类型和名称对组成。个数不定的特定类型的参数可以通过参数数组...
【笔记】概统论与数理统计第六章知识点总结
weixin_44835327的博客
06-27 810
6.1 大数律 切比雪夫不等式：设随机变量的期望和方差都存在, 则对任意 ε > 0, 有 依概率收敛：设是一随机变量序列，a 为常数，若对任意 ε > 0，有 直观意义：当 n 充分大的时候, |Xn − a| 以极大的概率充分接近于 0 一个随机变量序列依概率收敛的充分条件 切比雪夫大数定律：对两两不相关的随机变量序列 {}，若 E(), D() 都存在, 且有常数 C < ∞ 使得 D() ≤ C，k
matLab学习笔记第六章
m0_52024881的博客
11-17 1459
仿真 启动方法一： 建立一个简单的Simulink实例 Simulink界面窗口介绍 slx mdl simulink的工作原理 6.2simulink的常用模块库 simulink建立系统模型 ’ 改变模块方向 快捷键 ctrl+r 将模块顺时针旋转90° ctrl+I将模块顺时针旋转180° 可以将两个东西或多个东西选中之后旋转 右键旋转 颜色设定 ...
《概率论与数理统计》（浙大第四版）第六章总结笔记（纯手写）
qq_45681057的博客
05-26 2787
一. 写在前面 教材：《概率论与数理统计》（浙大第四版） 这份笔记仅为个人笔记，不具有全面性与权威性。但非常希望这份笔记可以给有需要的读者一些启发 这份笔记中可能存在错误或者偏差，希望与读者在评论区一起交流 这份笔记完全原创，但读者可以根据需要进行分享   二. 第六章总结笔记 ...
计算机网络知识点总结——第六章应用层
weixin_44546342的博客
08-08 2336
HTTP协议定义了浏览器（万维网客户进程）怎样向万维网服务器请求万维网文档，以及服务器怎样把文档传送给浏览器。：电子邮件客户端软件，为客户提供接口写发邮件（Foxmail，Outlook），功能：撰写、显示、处理、通信。万维网以客户/服务器方式工作，用户使用的浏览器就是万维网客户程序，万维网文档所驻留的主机运行服务器程序。提供不同种类主机系统（硬、软件体系等都不可以不同）之间的文件传输能力。：SMTP（发送邮件），POP3、IMAP（接收协议）的，因此在报文中的每一个字段都是一些ASCII码串。...
PMP知识点总结-第六章：项目进度管理
sun_meiko的博客
11-21 879
2022.11.27,PMP备考冲刺。
第六章 总结&习题.pptx
最新发布
06-16
第六章 总结&习题.pptx
第六章总结与展望.7z
12-31
"第六章总结与展望"这个标题可能指的是一个文档或一系列资料，它涵盖了某个特定技术主题的第六个章节的内容，并对当前研究或实践进行了回顾，同时对未来的发展趋势进行了预测。这种类型的文件常见于学术论文、技术...
计算机组成原理-第6章总结.pdf
10-13
计算机组成原理-第6章总结.pdf
半导体材料：半材第7章总结.doc
11-26
【半导体材料：半材第7章总结】 本章主要探讨了III-V族化合物半导体的外延生长技术，其中重点介绍了几种关键的生长方法，包括金属有机物气相外延生长(MOVPE)、分子束外延生长(MBE)、化学束外延生长(CBE)以及原子层...
操作系统第六章习题.doc
12-06
操作系统第六章习题知识点总结 本文总结了操作系统第六章习题中的相关知识点，涵盖文件管理、文件系统、文件组织、文件访问控制、文件存储管理、文件命名、文件路径、文件访问方式等方面的知识。 一、文件管理 * ...
数据库第六章总结+课后题（2020.4.13作业）
01-19
两个小节，问题的提出和规范化。 主要是规范化，定义比较多 问题的提出 规范化 函数依赖 函数依赖：设R(U)是一个属性集U上的关系模式，X和Y是U的子集。若对于R(U)的任意一个可能的关系r，r 中不可能存在：两个元组...
自动化学科概论-第6章-总结70352PPT文档.pptx
11-17
【自动化学科概论-第6章-总结】 自动化学科概论的第6章主要探讨了自动化学科的专业特点、与其他学科的关系以及其发展前景。这一章深入剖析了自动化技术在现代社会中的地位和作用，强调了它作为多学科交叉领域的核心...
深入.NET平台和C#编程第一章总结
10-25
word文档编写的，深入.NET平台和C#编程第一章的课程总结
总结认知神经科学第六章
02-15
第六章主要内容是关于认知神经科学中的注意力。注意力是认知系统中的一个重要组成部分，是指个体对外界刺激的选择性关注。 在本章中，可以学习到注意力的种类和作用，例如分配注意力和维持注意力；注意力的神经机制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值