从零开始学微信小程序开发：10 使用手机设备

最新推荐文章于 2024-09-25 15:13:14 发布

CopperDong

最新推荐文章于 2024-09-25 15:13:14 发布

阅读量790

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/QFire/article/details/78997255

前端专栏收录该内容

71 篇文章

订阅专栏

本文详细介绍了微信小程序中实现拍照、录音、获取地理位置及网络状态等功能的API使用方法。通过具体示例展示了如何利用wx.chooseImage进行图片选择，wx.startRecord进行录音，wx.openLocation获取并展示地理位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

10.1 拍照

wx.chooseImage函数，Object对象的以下属性：

count：设置最多可以选择的图片张树，
sizeType：字符串数组，”original"表示原图， ”compressed“表示压缩图
sourceType：字符串数组，album表示相册，camera表示使用相机拍照
success：返回图片的本地文件路径列表，保存在tempFilePaths数组中
fail：
complete：结束后的回调函数

  data: {
    sources: '',  //照片文件列表
  },
  //选择照片
  choosePhotoTap1: function() {
    var self = this;
    wx.chooseImage({
      count: 2,
      sizeType: ['original'],  //使用原图
      sourceType: ['album'],
      success: function(res) {
        console.log(res);
        self.setData({
          sources: res.tempFilePaths  //更新相片列表
        })
      }
    })
  },
  //拍照
  choosePhotoTap2: function () {
    var self = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original','compressed'],  //使用原图
      sourceType: ['camera'],
      success: function (res) {
        console.log(res);
        self.setData({
          sources: res.tempFilePaths  //更新相片列表
        })
      }
    })
  },
  //
  choosePhotoTap3: function () {
    var self = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],  //使用原图
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res);
        self.setData({
          sources: res.tempFilePaths  //更新相片列表
        })
      }
    })
  },

<!--pages/photo/photo.wxml-->
<view class="content">
  <view class="page_hd">
    <text class="page_title">选择照片</text>
  </view>
  <view class="section">
    <button type="primary" bindtap="choosePhotoTap1">选择照片</button>
    <button type="primary" bindtap="choosePhotoTap2">拍照</button>
    <button type="primary" bindtap="choosePhotoTap3">选择照片/拍照</button>
  </view>

  <view class="section" wx:for="{{sources}}" wx:key="{{index}}">
    <image src="{{item}}" />
  </view>
</view>

10.2 录音

wx.startRecord函数，参数Object对象

wx.stopRecord函数，超过1分钟自动结束录音

wx.playVoice函数

创建record子目录

//将秒数转换为时分秒的表示形式
var formatSeconds = function(value) {
  var time = parseFloat(value);
  var h = Math.floor(time/3600);
  var m = Math.floor((time-h*3600)/60);
  var s = time - h*3600 - m*60;
  return [h, m, s].map(formatNumber).join(':'); 
  function formatNumber(n) {
    n = n.toString()
    return n[1] ? n : '0' + n 
  }
}
var interval;  //定时器
Page({

  /**
   * 页面的初始数据
   */
  data: {
    formatRecordTime: '00:00:00', //时长初始值
    recordTime: 0,   //计算器，每秒增加1
    recordFile: '',  //录音临时文件
  },
  //"开始录音"按钮事件处理函数
  startTap: function() {
    var self = this;
    //设置计时器，每秒执行一次
    interval = setInterval(function() {
      self.data.recordTime += 1;
      self.setData({
        formatRecordTime:formatSeconds(self.data.recordTime) //格式化时间显示
      })
    }, 1000);
    //开始录音
    wx.startRecord({
      success: function(res) {
        console.log(res)
        self.setData({
          formatRecordTime: formatSeconds(self.data.recordTime), //更新显示的时长
          recordFile: res.tempFilePath  //更新音频临时文件路径
        })
      },
      //完成清除定时器
      complete: function() {
        clearInterval(interval) //清除定时器
      }
    })
  },
  //结束录音
  endTap:function() {
    wx.stopRecord();          //停止录音
    clearInterval(interval);  //清除定时器
    this.setData({
      formatRecordTime: '00:00:00',
      recordTime: 0
    })
  },
  //播放录音
  playTap: function() {
    var self = this;
    wx.playVoice ({
      filePath: self.data.recordFile, //设置播放文件路径
      complete: function() {
      }
    })
  },

<view class="content">
  <view class="page_hd">
    <text class="page_title">录音</text>
  </view>
  <view class="section">
    <button type="primary" bindtap="startTap">开始录音</button>
    <button type="primary" bindtap="endTap">停止录音</button>
    <button type="primary" bindtap="playTap">播放录音</button>
  </view>
  <view class="section">
    {{formatRecordTime}}
  </view>
</view>

10.3 获取地理位置

wx.openLocation函数：使用微信内置地图查看指定经纬度的位置信息，参数Object的属性：

latitude：范围为-90~90纬度
longitude：范围为-180~180经度
scale INT：地图的缩放比例，范围1~28
name：目标位置的名称（自定义在地图上显示的名称）
address：目标位置的地址详细说明（自定义在地图上显示的地址）
success：接口调用成功的回调函数
fail:
complete：结束

wx.getLocation函数：获取当前所在位置的经纬度信息，属性：

type：坐标系类型，”wgs84“（返回gps坐标系）和"gcj02”（中国国家测绘局定义的）

success：返回内容包括latitude和longitude

fail：

complete：

创建getlocation子目录

  mapTap: function() {
     wx.openLocation({
        //当前经纬度
        latitude: 30.6573,
        longitude: 104.03434,
        scale: 28,
        name: '成都市天府广场',
        address: '广场',
        success: function(res) {
          console.log(res)
        },
        fail: function(err) {
          console.log(err)
        },
        complete: function(info) {
          console.log(info)
        }
     })
  },
  //
  locationTap: function() {
    var self = this;
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        console.log(res)
        wx.openLocation({
          latitude: res.latitude,
          longitude: res.longitude,
          scale: 28,
          name: '当前位置',
          address: '未知地址',
          success: function(res) {
            console.log(res)
          },
          fail: function(err) {
            console.log(err)
          },
          complete: function(info) {
            console.log(info)
          },
        })
      }
    })
  },

<!--pages/getlocation/getlocation.wxml-->
<view class="content">
  <view class="page_hd">
    <text class="page_title">获取当前位置</text>
  </view>
  <view class="section">
    <button type="primary" bindtap="mapTap">地图定位</button>
    <button type="primary" bindtap="locationTap">获取所在位置</button>
  </view>
  <view class="section">
    {{formatRecordTime}}
  </view>
</view>