欢迎光临,了解微信小程序开发,就上易用通!

微信小程序把玩《十二》:Video API,Storage API,location API

发布:2018-01-26 14:53浏览: 来源:网络 作者:cola

一:Video API

微信小程序把玩《十二》:Video API,Storage API,location API(图1)

电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题。

主要属性:

wx.chooseVideo(object)

微信小程序把玩《十二》:Video API,Storage API,location API(图2)

成功之后返回参数

微信小程序把玩《十二》:Video API,Storage API,location API(图3)

wxml

<button type="primary" bindtap="listenerBtnOpenVideo">打开视频</button>
<!--默认视频组件是隐藏的-->
<video src="{{videoSource}}" hidden="{{videoHidden}}" style="width: 100%; height: 100%"/>
  •  

js

Page({
  data:{
    // text:"这是一个页面"
    videoSource: '',
    videoHidden: true
  },

 listenerBtnOpenVideo: function() {
     var that = this;
     wx.chooseVideo({
         //相机和相册
         sourceType: ['album', 'camera'],
         //录制视频最大时长
         maxDuration: 60,
         //摄像头
         camera: ['front', 'back'],
         //这里返回的是tempFilePaths并不是tempFilePath
         success: function(res){
           console.log(res.tempFilePaths[0])
             that.setData({
                 videoSource: res.tempFilePaths[0],
                 videoHidden: false
             })
         },
         fail: function(e) {
           console.log(e)
         }
     })
 },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
二:Storage API

微信小程序把玩《十二》:Video API,Storage API,location API(图4)

其实这个存储在新建Demo的时候就已经用到了就是存储就是那个logs日志,数据存储主要分为同步和异步

异步存储方法:

存数据 
wx.setStorage(object) 相同key会覆盖,可写回调方法

微信小程序把玩《十二》:Video API,Storage API,location API(图5)

获取方法:

wx.getStorage(object)

微信小程序把玩《十二》:Video API,Storage API,location API(图6)

清除方法:

wx.clearStorage()里面可以写回调函数 成功,失败,完成

同步存储方法:

存数据 相同key会覆盖

wx.setStorageSync(key,data)

读数据

wx.getStorageSync(key) 存储是指定的key

清除数据

wx.clearStorageSync() 不可写回调方法

wxml

<!--动态获取数据-->
<text>{{storageContent}}</text>
<!--存-->
<button type="primary" bindtap="listenerStorageSave">storage存储信息会在text上显示</button>
<!--取-->
<button type="primary" bindtap="listenerStorageGet">获取storage存储的信息</button>
<!--清-->
<button type="warn" bindtap="listenerStorageClear">清楚异步存储数据</button>


<text>{{storageSyncContent}}</text>
<button type="primary" bindtap="listenerStorageSyncSave">storageSync存储信息会在text上显示</button>
<button type="primary" bindtap="listenerStorageSyncGet">获取storageSync存储信息</button>
<button type="warn" bindtap="listenerStorageSyncClear">清除同步存储数据</button>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

js

Page({
  data:{
    // text:"这是一个页面"
    storageContent: '',
    storageSyncContent: ''
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  /**
   * 异步存储
   */
  listenerStorageSave: function() {
    //以键值对的形式存储 传进去的是个对象
    wx.setStorage({
      key: 'key',
      data: '我是storeage异步存储的信息',
      success: function(res) {
        console.log(res)
      }
    })
  },
  /**
   * 异步取信息
   */
  listenerStorageGet: function() {
    var that = this;
    wx.getStorage({
      //获取数据的key
      key: 'key',
      success: function(res) {
        console.log(res)
        that.setData({
          //
          storageContent: res.data
        })
      },
      /**
       * 失败会调用
       */
      fail: function(res) {
        console.log(res)
      }
    })
  },

  /**
   * 清除数据
   */
  listenerStorageClear: function() {
    var that = this;
    wx.clearStorage({
      success: function(res) {
        that.setData({
          storageContent: ''
        })
      }
    })
  },


  /**
   * 数据同步存储
   */
  listenerStorageSyncSave: function() {
    wx.setStorageSync('key', '我是同步存储的数据')
  },

  /**
   * 数据同步获取
   */
  listenerStorageSyncGet: function() {
    // var that = this;
    var value = wx.getStorageSync('key')
    this.setData({
      storageSyncContent: value
    })
  },

  /**
   * 清除同步存储数据
   */
  listenerStorageSyncClear: function() {
    wx.clearStorageSync()
  },

  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
三:location API

微信小程序把玩《十二》:Video API,Storage API,location API(图7)

location API也就分这里分两种wx.getLocation(object)获取当前位置和wx.openLocation(object)通过经纬度打开内置地图。其中定位获取位置信息返回参数是有问题的speed,accuracy这两个是没有的。还有一个就是打开内置地图之后再返回会报一个错误(Page route错误—WAService.js:2 navigateBack 一个不存在的webviewId0)如果有知道的可告知,我找到解决方式也会补充下!

主要属性:

wx.getLocation(object)获取当前位置

微信小程序把玩《十二》:Video API,Storage API,location API(图8)

  • 成功之后返回参数

    微信小程序把玩《十二》:Video API,Storage API,location API(图9)

wx.openLocation(object)打开微信内置地图

微信小程序把玩《十二》:Video API,Storage API,location API(图10)

这里直接进入微信内置应用,当使用导航返回键时是内部写的外界无法干预所以WAService.js:2 navigateBack 一个不存在的webviewId0这个错估计也带等小程序修复吧!!

wxml

<button id="0" type="primary" bindtap="listenerBtnGetLocation">定位当前位置并打开内置地图</button>
  •  

js

Page({
  data:{
    text:"Page location"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },

  /**
   * 监听定位到当前位置
   */
  listenerBtnGetLocation: function() {
    wx.getLocation({
      //定位类型 wgs84, gcj02
      type: 'gcj02',
      success: function(res) {
        console.log(res)
        wx.openLocation({
          //当前经纬度
          latitude: res.latutude,
          longitude: res.longitude,
          //缩放级别默认28
          scale: 28,
          //位置名
          name: '测试地址',
          //详细地址
          address: '火星路24号',
          //成功打印信息
          success: function(res) {
            console.log(res)
          },
          //失败打印信息
          fail: function(err) {
            console.log(err)
          },
          //完成打印信息
          complete: function(info){
            console.log(info)
          },
        })

      },
      fail: function(err) {
        console.log(err)
      },
      complete: function(info) {
        console.log(info)
      },
    })
  },

  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。