第六章总结

//wxml
<button type="primary" bindtap="getbaidutap">获取HTML数据</button>
<textarea value='{{html}}'auto-height maxlenght='0'> </textarea>
//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的GET方法获取邮政编码对应的信息代码如下：

//wxml
<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>
//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(e) {
    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':'0ff9bfccdf147476e067de994eb5496e'
        },
        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
          })
        }
      }
      })
    }
  }
})

运行结果如下（控制台报错无法解决）：

通过POST方法获取邮政编码代码如下：

//wxml
<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>
//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;
      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/x-www-form-urlencoded',
        },
        method:'POST',
      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
          })
        }
      }
      })
    }
  }
})

运行结果如下：

6.1.2 上传文件

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

代码如下：

/wxml
<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix" />
//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) {
    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.setDate({
              img:path[0]
            })
       },
       fail:function(e) {
         console.log(e);
         wx.showModal({
           title: '提示',
           content: '上传失败',
           showCancel:false
         })
       },
       complete:function() {
         wx.hideToast();
       }
     })
    }
  }
})

运行结果如下：

6.1.3 下载文件

wx.downloadFile用于实现下载文件资源到本地，在客户端发起一个HTTPS GET请求，返回文件的临时路径。其相关参数如表：

通过wx.downliadFile实现从服务器中下载图片代码如下：

//wxml
<button type="primary" bind:tap="downloadimage">下载图片</button>
<image src="{{img}}" mode="widthFix" style="width: 90%; height: 500px;"/>
//js
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
        })
      }
    })
  }
})

运行结果如下：

6.2 多媒体API

多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API。

6.2.1 图片API

1. 选择图片或拍照

wx.chooseImage接口用于从本地相册选择图片或使用相机拍照。其属性如下：

代码如下：

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

2. 预览图片

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

代码如下：

//js
wx.previewImage({
    current:"http://bmbo - cdn - 16488.b0.upaiyun.com/2018/02/05/2.png",
    urls:["http://bmbo - cdn - 16488.b0.upaiyun.com/2018/02/05/1.png",
    "http://bmbo - cdn - 16488.b0.upaiyun.com/2018/02/05/2.png",
    "http://bmbo - cdn - 16488.b0.upaiyun.com/2018/02/05/3.png"
    ]
})

3. 获取图片信息

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

代码如下：

//js
wx.chooseIamge({
    success:funcion(){
        wx.getIamgeInfo({
            src:res.tempFilePaths[0],
            success:function(){
                console.log(e.width),
                console.log(e.height)
            }
        })
    },
})

4. 保存图片到系统相册

wx.saveImageToPhotosAlbum接口用于保存图片到系统相册，其参数如表：

代码如下：

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

6.2.2 录音API

1.开始录音

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

2. 停止录音

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

代码如下:

//js
wx.startRecord)
({
    success:function(res){
        var tempFilePath = res.tempFilePath
    },
    fail:function(res){
        
    }
})
setTimeout(function(){
    wx.stopRecord()
},10000)

6.2.3 音频播放控制API

1. 播放语音

wx.playVoice接口用于开始播放语音，其相关参数如表：

代码如下：

//js
wx.startRecord({
    success:function(res){
        var tempFilePath = res.tempFilePath
        wx.playVoice({
            filepath:tempFilePath,
            complete:function(){
            }
        })
    }
})

2. 暂停播放

wx.pauseVoice用于暂停正在播放的语音。

代码如下：

//js
wx.startRecord({
    success:function(res){
        vat tempFilePath = res.tempFilePath
            wx.playVoice({
      filePath:tempFilePath
        })
        setTimeout(function(){
            wx.pauseVoice()
        },5000)
    }
})

3. 结束播放

wx.stopVoice用于结束播放语音。

代码如下：

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

6.2.4 音乐播放控制API

1.播放音乐

wx.playBackgroundAudio用于播放音乐，其相关参数如表：

2.获取音乐播放状态

代码如下：

//wxml
<view class="container">
<image class="bgaudio" src="{{changeImg?music.coverImg:'/image/background.png'}}"/>
<view class="control-view">
<image src="../image/cxk.png" bind:tap="onPositionTap" data-how="0"/>
<image src="/image/{{isPlaying?'pause':'play'}}.png" bind:tap="onAudioTap" />
<image src="../image/ik.gif" bind:tap="onStopTap"/>
<image src="../image/ji.png" bind:tap="onPositionTap" data-how="1"/>
</view>
</view>
//js
Page({
  data:{
    isPlaying:false,
      changeImg:false,
//音乐内容
    music:{
      "url":"http://bmbo-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
      "title":"盛晓玫 - 有一天",
      "coverImg":"http://bmbo-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,changeImg:false});
      }
    })
},
  onPositionTap:function() {
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
          });
      }
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,changeImg:true});
      console.log("on play");
    });
    wx.wx.onBackgroundAudioPause(function() {
      that.setData({isPlaying:false});
      console.log("on pause");
    });
    wx.onBackgroundAudioStop(function() {
      that.setData({isPlaying:false,changeImg:false});
      console.log("on stop");
    })
  }
})
//wxss
.bgaudio{
    height: 350rpx;
    width: 350rpx;
    margin-bottom: 100rpx;
}
.control-view{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

运行结果如下：

6.3 文件API

1. 保存文件

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

部分代码如下：

//js
Page({
  saveImg: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.saveFilePath;
              console.log(saveFilePath)
            }
          })
      }
    })
  }
})

2. 获取本地文件列表

wx.getSavedFileList接口用于获取本地已保存的文件列表。其相关参数如下：

部分代码如下：

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

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

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

代码如下：

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

4. 删除本地文件

wx.removeSaveFile接口用于删除本地存储的文件，其相关参数如表：

代码如下：

//js
Page({
  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.downloadFile接口用于新开页面打开文档，其相关参数如下：

代码如下：

//js
Page({
  wx: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接口

wx.setStorage接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖掉原来key对应的内容。其相关参数如表：

代码如下：

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

2. wx.setStorageSyne(key,data)

代码如下：

//js
wx.setStorageSyne('age','25')

6.4.2 获取数据

1. wx.getStorage

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

代码如下：

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

2. wx.getStorageSync

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

代码如下：

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

6.4.3 删除数据

1. wx.removeStrage

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

代码如下：

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

2. wx.removeStorageSync

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

代码如下：

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

6.4.4 清空数据

1. wx.clearStorage(）

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

代码如下：

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

2. wx.clearStorageSync()

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

代码如下：

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

6.5 位置信息API

6.5.1 获取位置信息

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

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

代码如下：

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 选择位置信息

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

wx.chooseLocation调用成功后，返回的参数如表：

代码如下：

wx:chooseLocation({
    success:function(res){
      console.log("位置的名称:"+res.name)
      console.log("位置的地址:"+res.address)
      console.log("位置的经度:"+res.longitude)
      conole.log("位置的纬度:"+res.latitude)
    }
  })

6.5.3 显示位置信息

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

代码如下：

wx:getLocation({
    type: 'gcj02',
    success:function(res){
      var latitude = res.latitude
      var longtitude = res.longitude
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          scale:10,
          name:'智慧国际酒店',
          address:'西安市长安区西长安区300号'
        })
    }
  })

6.6 设备相关API

6.6.1 获取系统信息

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

wx.getSystemInfo接口或wx.getSystemInfoSync接口调用成功后，返回系统相关信息如表：

代码如下：

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. 获取网络状态

wx.getNetworkType用于获取网络类型，其相关参数如表：

代码如下：

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

2. 监听网络状态变化

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

代码如下：

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

6.6.3 拨打电话

wx.makePhoneCall接口用于实现调用手机拨打电话，其相关参数如表：

代码如下：


wx.makePhoneCall({
  phoneNumber: '18092585093',//需要拨打的电话号码
})

6.6.4 扫描二维码

wx.scanCode接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如表：

扫码成功后，返回的数据如表：

代码如下：

//允许从相机和相册扫码
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)
  }
})

诚恳的cd

关注

8
点赞
踩
15

收藏

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

wx.chooseLocation接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。wx.getSystemInfo接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。wx.setStorage接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖掉原来key对应的内容。wx.removeStorageSync接口用于从本地缓存中同步删除指定key对应的内容。wx.removeStorage接口用于从本地缓存中异步移除指定key。
复制链接

扫一扫