第六章总结

网络API

  卫星小程序数据通常从后台获取，使用微信原生的API接口或第三方的接口实现获取

发起网络请求：

  使用wx.request方法实现向服务器发起请求

.wxml文件

<button type="primary" bind:tap="get">获取Html数据</button>
<textarea value="{{html}}" maxlanght='0'></textarea>

.js文件：

Page({
  data:{
    html:''
  },
  get:function(){
    var that = this;
    wx.request({
      url: 'https://www.baidu.com',
      data:{},
      header:{'Content-Type':'application'},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
        })
      }
    })
  }
})

获取邮箱地址：

.wxml

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

 .js

  data: {
html:'',
postcode:'',
address:[],
errMsg:'',
error_code:-1
  },
  getbaidutap(){
    var that=this
    wx.request({
      url: 'https://www.baidu.com',
      data:{},
      header:{'Content-Type':'application/json'},
      success(res){
        console.log(res);
     that.setData({
       html:res.data
     })
      }
    })
  },


  input(e){
    this.setData({
      postcode:e.detail.value
    })
    console.log(e.detail.value);
  },
  find(){
    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:'POST',
        success(res){
          wx.hideToast()
          if(res.data.error_code==0){
            console.log(res)
        self.setData({
          errMsg:'',
          error_code:res.data.error_code,
          address:res.data.repeat.list
        })
          }
          else{
            self.setData({
              errMsg:res.data.reason || res.data.reason,
              error_code:res.data.error_code
            })
          }
        }
      })
    }
  },

下载文件：

 .html:

<button type="primary" bind:tap="down">下载</button>
<image src="{{img}}" mode="widthFix" style='width: 90%;height: 500px;'></image>

.js:

  data:{
    img:null
  },
  down:function(){
    var that = this;
    wx.downloadFile({
      url: 'http://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }

获取邮箱地址：

.wxml

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

.js:

data: {
html:'',
postcode:'',
address:[],
errMsg:'',
error_code:-1,
img:null
  },
  getbaidutap(){
    var that=this
    wx.request({
      url: 'https://www.baidu.com',
      data:{},
      header:{'Content-Type':'application/json'},
      success(res){
        console.log(res);
     that.setData({
       html:res.data
     })
      }
    })
  }

上传文件：

可以通过接口把文件上传到服务器端

.wxml:

<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>

.js

  uploadimage(){
    var that=this
   wx.chooseImage({
     success(res){
       var tempFilepaths=res.tempFilePaths
       upload(that,tempFilepaths)
     }
   })
   function upload(page,path){
    wx.showToast({
      title: '正在上传',
      icon:'loading'
    }),
    wx.uploadFile({
      filePath: 'path[0]',
      name: 'file',
      url: 'http://localhost/',
    success(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(e){
console.log(e);
wx.showModal({
  title: '提示',
  content: '上传失败',
  showCancel:false
})
    },
    complete(){
      wx.hideToast()
    }
    })
  }
  },

 多媒体API:

主要包括图片，音频，视频

图片API:

wx.chooserInage

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

wx.previewImage

wx.previewImage({
  current:"第一张的路径",
  urls: ['路径...']
})

wx.getImageInfo

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

 wx.seveImageToPhotoAlbum

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

 录音API

wx.startRecord开始录音

wx.stopRecord结束

wx.startRecord({
  success:function(res){
    var temp = res.tempFilePath
  },
  fail:function(res){
    console.log("失败");
  }
})
setTimeout(function(){
  wx.stopRecord()
},10000)

音频播放API:

wx.playVoice 开始播放

wx.pauseVoice 暂停

wx.stopVoice 结束

wx.startRecord({
  success:function(res){
    var tempPath = res.tempFilePath
    wx.playVoice({
      filePath: 'tempPath',
      complete:function(){
      }
    })
  }
})

//暂停
wx.startRecord({
  success:function(res){
    var tempPath = res.tempFilePath
    wx.playVoice({
      filePath: tempPath,
    }),
    setTimeout(function(){
      wx.pauseVoice()
    },5000)
  }
})

//结束
wx.startRecord({
  success:function(res){
    var tempPath = res.tempFilePath
    wx.playVoice({
      filePath: tempPath,
    }),
    setTimeout(function(){
      wx.stopVoice()
    },5000)
  }
})

保存文件：

 wx.saveFile(Object)用于保存文件到本地, 其相关参数如表所示。

代码演示：

.js

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

获取本地文件列表：

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

获取本地文件的文件信息：

代码

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

删除文件：

代码：

//js
wx.getSavedFileList({
  success:function(res){
    if(res.fileList.Length > 0 ){
      wx.removeSavedFile({
        filePath:res.fileList[0].filePath,
        complete:function(res){
          console.log(res)
        }
      })
    }
  }
})

打开本地文档：

代码：

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

 本地数据和缓存API:

保存和获取：

//注册
wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res) {
    console.log(res)
  }
})
//注入
wx.setStorageSync('name', 'jake')
//获取
var data = wx.getStorageSync('name')
console.log(data)

结果：

 删除数据：

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

结果

清空数据：

 

//清空
wx.getStorage({
  key:'key',
  success:function (res) {
    wx.clearStorage()
  }
})
wx.clearStorageSync()

 位置信息API:

获取位置信息：

调用成功返回参数

wx.getLocation({
  type:'wgs84',
  success:function (res) {
    console.log("精度：",res.longitude)
    console.log("维度：",res.latitude)
  },
  fail:function (res) {
    console.log('失败')
  }
})

选择位置信息： 

获取点击地图的点的信息

wx.chooseLocation({
  success:function (res) {
   console.log(res.name);
   console.log(res.address) 
  },
  fail:function (res) {
    console.log('失败')
  }
})

 显示位置信息：

 

wx.openLocation({
  type:'gcj02',
  success:function (res) {
    var lat = res.latitude
    var long = res.longitde
    wx.openLocation({
      latitude:this.latitude,
      longitude:this.longitude,
      scale:10,
      name:'智慧酒店',
      address:'西安市长安区'
    })
  }
})

设备相关API: 

获取系统信息：

wx.getSystemInfo和wx.getSystemInfoSync接口

wx.getSystemInfo({
  success:function (res) {
    console.log("型号"+res.model)
    console.log("型号"+res.pixelRatio)
  }
})

网络状态： 

wx.getNetworkType接口

wx.getNetworkType({
  success:function (res) {
    console.log(res.networkType)
  }
})
wx.onNetworkStatusChange((res) => {
  console.log("是否连接"+res.isConnected)
  console.log("连接类型"+res.networkType)
})

拨打电话接口： 

wx.makePhoneCall:

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

扫描二维码：

wx.scanCode接口：

wx.scanCode({
  success:(res)=>{
    console.log(res.result)
    console.log(res.scznType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
wx.scanCode({
  onlyFromCamera:true,
  success:(res)=>{
    console.log(res)
  }
})