API

小程序开发框架提供丰富的微信原生API,可以方便的调起微信停供的能力,如网络要求,用户信息获取,本地存储,支付功能等

异步API大多数API都是异步API,如wx.request,wx.login等

同步API以Sync结尾的API ,如 wx.setStorageSync

 

wx.request网络请求-API

我们在本地打开服务

 

 

 可以看到对应的数据

我们在小程序中查看数据,index.js

// index.js
// 获取应用实例
const app = getApp()
Page({
/*** 页面的初始数据*/
  data: {
    lists:[],
  },
/*** 生命周期函数--监听页面加载*/
  onLoad: function (options) {
    wx.request({
      url: 'http://127.0.0.1:3000/lists', 
      data: {
      },
      header: {
        'content-type': 'application/json'
      },
      success (res) {
        console.log(res.data)
      }
    })
  },
/*** 生命周期函数--监听页面初次渲染完成*/
  onReady: function () {},
/*** 生命周期函数--监听页面显示*/
  onShow: function () {},
/*** 生命周期函数--监听页面隐藏*/
  onHide: function () {},
/*** 生命周期函数--监听页面卸载*/
  onUnload: function () { },
/*** 页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function () {},
/*** 页面上拉触底事件的处理函数*/
  onReachBottom: function () {},
/*** 用户点击右上角分享*/
  onShareAppMessage: function () {}
})

可以看到输出了50条数据

 

 

 

wx.login登陆-API

调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。

         

 

 

 我们在App.js文件中查看这个信息,返回一个code和一个login状态

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        console.log(res)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

 

 

 

 wx.authorize授权-API

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。

用户登录小程序之后,处于对用户信息的保护,小程序仅仅得到的是一个登录状态,但是很多权限,用户并没有给小程序,这就需要小程序去获取用户授权的信息。

通过API   wx.authorize()向用户发起授权请求,调用后会立即弹窗询问是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口,如果之前用户已经授权,则不会出现弹窗,直接返回结果。

 参数

属性类型默认值必填说明
scope string   需要获取权限的 scope,详见 scope 列表
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)
<!--pages/shouquan/shouquan.wxml-->
<button class="button" type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"></button>
授权登录</button>


// pages/shouquan/shouquan.js
Page({
  bindGetUserInfo:function(){
    //获取用户信息
    wx.authorize({
      //询问授权的属性,
      scope:"scope.userInfo",  
      success:function(res){
        console.log(res)
      }
    })
  },
})

授权之前要先清理一下授权数据,不清理的话可能在点击授权的时候没有弹窗提示

 

 我们点击允许之后查看一下授权信息,代表已授权

 

 

 wx.getSetting获取授权信息-API

 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

参数

属性类型默认值必填说明最低版本
withSubscriptions Boolean false 是否同时获取用户订阅消息的订阅状态,默认不获取。注意:withSubscriptions 只返回用户勾选过订阅面板中的“总是保持以上选择,不再询问”的订阅消息。 2.10.1
success function   接口调用成功的回调函数  
fail function   接口调用失败的回调函数  
complete function   接口调用结束的回调函数(调用成功、失败都会执行)
  •  authSeting

案例

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

返回值中的authSetting属性,表示用户授权的设置信息

  • scope.userInfo是否授权用户信息,值为布尔
  • scope.userLocation是否授权地理位置

 wx.openSetting({})调起客户端小程序设置界面,返回用户设置的操作结果,设置界面只会出现小程序已经向用户请求过的权限

<!--pages/shouquan/shouquan.wxml-->

<button 
class="button" 
type="primary" 
open-type="getUserInfo" 
lang="zh_CN" 
bindgetuserinfo="bindGetUserInfo"
>
授权登录</button>


// pages/shouquan/shouquan.js
Page({
  bindGetUserInfo:function(){
    wx.getSetting({
      success:function(res){
        //用户授权的状态,res.authSetting['scope.userInfo']
        console.log(res)
      }
    })
  },
})

 在控制台中查看用户授权的信息

 我们也可以通过这种方法来实现用户是否授权,如果授权就跳转到主页,没有授权,在进行授权

// pages/shouquan/shouquan.js
Page({
  bindGetUserInfo:function(){
    wx.getSetting({
      success:function(res){
        if(res.authSetting['scope.userInfo']){
          wx.redirectTo({
            url: '../index/index',
          })
        }else{
          wx.authorize({
            //询问授权的属性,
            scope:"scope.userInfo",  
            success:function(res){
              console.log(res)
            }
          })
        }
      }
    })
  },
})

 

 

wx.getUserInfo获取用户信息-API

 在小程序插件中使用时,需要在用户信息功能页中获得用户授权之后调用。否则将返回 fail

 参数

 

属性类型默认值必填说明
withCredentials boolean   是否带上登录态信息。当 withCredentials 为 true 时,要求此前有调用过 wx.login 且登录态尚未过期,此时返回的数据会包含 encryptedData, iv 等敏感信息;当 withCredentials 为 false 时,不要求有登录态,返回的数据不包含 encryptedData, iv 等敏感信息。
lang string en 显示用户信息的语言
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

 案例

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性别 0:未知、1:男、2:女
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
  }
})

 

 案例

<!--pages/getuserinfo/getuserinfo.wxml-->
<text>pages/getuserinfo/getuserinfo.wxml</text>
<button type="primary" bindgetuserinfo="getuserinfo" open-type="getUserInfo" >获取信息</button>


// pages/getuserinfo/getuserinfo.js
Page({
  getuserinfo:function(res){
    console.log(res)
  },
})

此时我们在控制台可以看到信息

 

 我们看下面的案例

// pages/getuserinfo/getuserinfo.js
Page({
  getuserinfo:function(res){
   wx.getSetting({
     success:function(res){
      if(res.authSetting["scope.userInfo"]){
        //用户将用户信息权限给予了小程序
        wx.getUserInfo({
          //这个接口是获取用户信息
          success:function(res){
            console.log(res)
          }
        })
      }else{
        //用户没有给予小程序获取用户信息的权限
        wx.authorize({
          scope:"scope.userInfo",
          success:function(res){
              console.log(res)
          }
        })
      }
     }
   })
  },
})

 

 注意:使用该方法的前提是用户给予了小程序获取用户信息的权限

 rawData中的数据:

  • nickName:微信名称
  • gender:性别
  • language:语言
  • city:城市
  • province:省份
  • country:国家
  • avatarUrl:图片地址

 

wx.createAnimation动画-API

 需要使用wx.createAnimation({})创建一个动画实例animation调用方法来描述动画,最后通过动画实例的export方法导出动画数据传递给组件的animation属性

 大部分的动画实例上的方法都是设置动画样式,他们返回的还是动画实例对象本身,所以我们可以采用链式写法,需要注意大量animation.step()和animation.export()两个方法。

  • step()表示一组动画完成,可以在一组动画中调用多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画
  • export()导出动画队列,export方法每次调用后会清掉之前的动画操作

 参数

属性类型默认值必填说明
duration number 400 动画持续时间,单位 ms
timingFunction string 'linear' 动画的效果
delay number 0 动画延迟时间,单位 ms
transformOrigin string '50% 50% 0'

 我们新建一个案例查看属性

<!--pages/animat/animat.wxml-->
<view id="hello">hello</view>

// pages/animat/animat.js
const app=getApp()
Page({
/*** 生命周期函数--监听页面加载*/
  onLoad: function (options) {
    //创建一个动画实例
      var animation=wx.createAnimation({
        duration:1000,
        delay: 0,
      })
      console.log(animation)
  },
})

控制台中输出了这个动画包含的所有属性

 

 此时我们定义了一个动画,但是并没有生效,我们看一下打印出来的是什么

// pages/animat/animat.js
const app=getApp()
Page({
/*** 生命周期函数--监听页面加载*/
  onLoad: function (options) {
    //创建一个动画实例
      var animation=wx.createAnimation({
        duration:1000,
        delay: 0,
      })
      //表示动画放大2倍
     var scal= animation.scale(2)
      console.log(scal)
  },
})

控制台输出的内容与animation输出的内容是一样的,都具备这些方法,也就是说都是同一个的实例对象,这里没有动画的原因是主要我们注意的两个函数,step和export,只有我们添加step方法后才表示这组动画完成,否则表示这组动画一直处于挂起的状态,我们在这个动画后面添加step

var scal= animation.scale(2).step()

此时我们看到这个动画依然没有起到效果,

我们在看一下animation.export()这个方法,会导出一个动画队列,我们用一个变量来接收输出一下

var arr=animation.export()

此时我们可以看到我们定义的这个动画此时

 

 注意:创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性,

所以我们定义一个变量存储这个animation的值  ,在组件中添加这个属性的时候采用插值表达式

此时我们需要将导出的动画数据传送给我们刚才定义的变量

 此时就可以实现动画

<!--pages/animat/animat.wxml-->
<view id="hello" animation="{{myanimation}}">hello</view>



// pages/animat/animat.js
const app=getApp()
Page({
/*** 生命周期函数--监听页面加载*/
data:{
  myanimation:null
},
  onLoad: function (options) {
    //创建一个动画实例
      var animation=wx.createAnimation({
        duration:1000,
        delay: 0,
      })
      //表示动画放大2倍,.step()表示一组动画结束,如果不加就不会有任何效果
     var scal= animation.scale(2).step()
     var arr=animation.export()
     this.setData({
       myanimation:arr
     })
  },
})

 

 总结实现动画的过程:

1>创建一个动画实例

2>我们需要一个动画的添加样式,添加样式的过程中注意:一定要在每个动画的结尾处加上.step()的方法,添加这个属性之后表示一组动画,如果不加就不会有任何效果

3>我们需要导出对应的动画数据

4>将动画数据赋值给对应组件的animation属性

 onShareAppMessage转发

在小程序中,分享主要分为两种形式:

  • 右上角的menu分享
  • 按钮点击分享

这两种点击在点击得时候都会触发Page.onShareAppMessage()函数的执行

页面内发起转发

通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,相关组件:button。

实现button按钮转发效果:

在button组件上设置属性open-type="share",点击的时候会自动触发onShareAppMessage()函数的执行

 

 我们可以看一下这个函数输出的内容

 

 

onShareAppMessage的内部结构

  • 此事件处理函数需要 return 一个 Object,用于自定义转发内容,返回内容如下:
字段说明默认值最低版本
title 转发标题 当前小程序名称  
path 转发路径 当前页面 path ,必须是以 / 开头的完整路径  
imageUrl 自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。 使用默认截图 1.5.0
promise 如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数   2.12.0
// pages/zhuanfa/zhuanfa.js
Page({
  onShareAppMessage: function (res) {
    //console.log(res)
    return{
      title:'转发',
      path:"/pages/zhuanfa/zhuanfa",
      imageUrl:"../image/123456789.png"
    }
  }
})

我们可以看到转发的标题和图片

 

 

location-API小程序定位

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission

使用小程序定位的流程:

1>在App.json文件中配置permission

permission

小程序接口权限相关设置。字段类型为 Object,结构为:

属性类型必填默认值描述

scope.userLocation

PermissionObject   位置相关权限声明

PermissionObject 结构

属性类型必填默认值说明
desc string   小程序获取权限时展示的接口用途说明。最长 30 个字符

如:

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

 

 2>得到用户授权方可使用定位的API,如果没有这个权限,,API会自动以弹窗的形式询问授权只有授权之后才会调用API

wx.getLocation

以 Promise 风格 调用:支持

用户授权:需要 scope.userLocation

小程序插件:支持,需要小程序基础库版本不低于 1.9.6

获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。高频率调用会导致耗电,如有需要可使用持续定位接口 wx.onLocationChange。基础库 2.17.0 版本起 wx.getLocation 增加调用频率限制。

// pages/location/location.js
Page({
  onLoad: function (options) {
    wx.getLocation({
      type: 'gcj02',
      success (res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
      }
     })
  },
})

 

 

 我们点击允许,可以在控制台中看到

 

 3>wx.openLocation调用微信内置地图查看位置

wx.openLocation

以 Promise 风格 调用:支持

小程序插件:支持,需要小程序基础库版本不低于 1.9.6

使用微信内置地图查看位置

// pages/location/location.js
Page({
  onLoad: function (options) {
    wx.getLocation({
      type: 'gcj02',
      success (res) {
        console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        wx.openLocation({
          latitude,
          longitude,
          scale: 18
        })
      }
     })
  },
})

 

 

注意

  • 2.17.0 起wx.getLocation` 增加调用频率限制
  • 工具中定位模拟使用IP定位,可能会有一定误差。且工具目前仅支持 gcj02 坐标。
  • 使用第三方服务进行逆地址解析时,请确认第三方服务默认的坐标系,正确进行坐标转换。

 

video视频-API

组件:https://developers.weixin.qq.com/miniprogram/dev/component/video.html

API:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.saveVideoToPhotosAlbum.html

我们看官方提供的案例:

//video.wxml
<view class="page-body" > <view class="page-section tc"> <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture' ></video> <view style="margin: 30rpx auto" class="weui-label">弹幕内容</view> <input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" /> <button style="margin: 30rpx auto" bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button> <navigator style="margin: 30rpx auto" url="picture-in-picture" hover-class="other-navigator-hover"> <button type="primary" class="page-body-button" bindtap="bindPlayVideo">小窗模式</button> </navigator> </view> </view>
//video.js
function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length === 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({
  onShareAppMessage() {
    return {
      title: 'video',
      path: 'page/component/pages/video/video'
    }
  },

  onReady() {
    this.videoContext = wx.createVideoContext('myVideo')
  },

  onHide() {

  },

  inputValue: '',
  data: {
    src: '',
    danmuList:
    [{
      text: '第 1s 出现的弹幕',
      color: '#ff0000',
      time: 1
    }, {
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],
  },

  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },

  bindButtonTap() {
    const that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: ['front', 'back'],
      success(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

  bindVideoEnterPictureInPicture() {
    console.log('进入小窗模式')
  },

  bindVideoLeavePictureInPicture() {
    console.log('退出小窗模式')
  },

  bindPlayVideo() {
    console.log('1')
    this.videoContext.play()
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

  videoErrorCallback(e) {
    console.log('视频错误信息:')
    console.log(e.detail.errMsg)
  }
})

posted @ 2021-10-15 09:33  keyeking  阅读(180)  评论(0编辑  收藏  举报