uni-app快速入门（十三）--常用API（下）
本文介绍uni-app的扫码、动画、下拉刷新、授权登录、微信支付、节点信息、调试API。
一、扫码
扫码功能支持使用相机直接扫码和从相册中选择图片进行扫码，也支持条码扫描。使用uni.scanCode可调出客户端扫码界面，扫码成功后返回对应结果。不支持H5平台。下面是uni-app的官方介绍：
uni.scanCode(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.scanCode(OBJECT)
https://uniapp.dcloud.net.cn/api/system/barcode.html示例代码：
// 允许从相机和相册扫码
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
// 只允许通过相机扫码
uni.scanCode({
onlyFromCamera: true,
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
// 调起条码扫描
uni.scanCode({
scanType: ['barCode'],
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});二、动画
uni-app的动画API可实现复杂的动画效果，使用uni.createAnimation创建一个动画实例animation，然后调用实例的方法描述动画，最后通过实例的export()方法导出动画数据，传递给组件的animation属性。官方说明见：
uni.createAnimation(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.createAnimation(OBJECT),animationhttps://uniapp.dcloud.net.cn/api/ui/animation.html示例代码：
export default{
data() {
return {
animationData: {}
}
},
onShow: function(){
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2,2).rotate(45).step()
this.animationData = animation.export()
setTimeout(function() {
animation.translate(30).step()
this.animationData = animation.export()
}.bind(this), 1000)
},
methods:{
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.animationData = this.animation.export()
}
}
}
三、下拉刷新
下拉刷新功能在实际开发中经常用到，通常应用于首页、栏目页、订单的数据刷新。
下拉刷新的官方文档见：
onPullDownRefresh | uni-app官网uni-app,uniCloud,serverless,onPullDownRefresh,uni.startPullDownRefresh(OBJECT),uni.stopPullDownRefresh(),FAQhttps://uniapp.dcloud.net.cn/api/ui/pulldown.html 下拉刷新使用uni.onPullDownRefresh()。首先需要在pages.json文件中开启支持下拉刷新：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}
}在页面监听下拉刷新事件以及结束下拉刷新（实际开发中是查询完数据后结束下拉刷新）：
// 仅做示例，实际开发中延时根据需求来使用。
export default {
data() {
return {
text: 'uni-app'
}
},
onLoad: function (options) {
setTimeout(function () {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
}
}四、授权登录
授权登录可实现多平台一站式登录，例如获取微信小程序用户信息以及openId,将openId存储到数据库中实现一站式登录，官方说明见：
uni.login(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.login(OBJECT),App平台支持的登录方式,小程序平台支持的登录方式,web平台支持的登录方式,OBJECT 参数说明,注意事项,uni.getLoginCode(OBJECT),uni.checkSession,uni.gehttps://uniapp.dcloud.net.cn/api/plugins/login.html 使用uni.login()实现授权登录，如QQ登录、微信登录、微博登录等。下面是微信登录的示例代码：
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
console.log(loginRes.authResult);
let code = loginRes.code;//用户登录凭证
//使用code获取微信openId
let appId = "wx1111111";//微信小程序的appId
let secret = "11111111111111";//微信小程序的appSecret
uni.request({
url:"https://api.weixin.qq.com/sns/jscode2session?
appid='"+appId+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code"
}).then(data=>){
let[err,res] = data;
let openId = res.data.openid;
let sessionKey = res.data.session_key;
//sessionKey是会话密钥，用于获取手机号
});
}
});说明：在生产环境中可以从后台发起https://api.weixin.qq.com的请求。这样小程序端不需要存储appsecret密钥，增加小程序的安全性。
【获取用户信息】
使用uni.getUserInfo可以获取用户信息。在微信小程序端，当用户未授权时，调用此接口不会出现授权弹窗。获取用户信息的示例代码：
uni.login({
provider: 'weixin',
success: function (loginRes) {
console.log(loginRes.authResult);
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickName);
}
});
}
});五、微信支付
uni-app的在线支付功能非常强大，支持各平台的客户端支付API，如支付宝、微信、百度收银台、苹果等支付平台。uni-app的在线支付官方资料：
uni.requestPayment(OBJECT) | uni-app官网uni-app,uniCloud,serverless,uni.requestPayment(OBJECT),注意事项,orderInfo 注意事项,H5 平台,App平台支付流程,manifest.json里配置相关参数,App支付,示例,支付宝App支付,申请流程,微信App支付,申请流程,示例https://uniapp.dcloud.net.cn/api/plugins/payment.html下面是示例代码：
uni.requestPayment({
"provider": "wxpay",
"orderInfo": {
"appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
"package": "Sign=WXPay", // 固定值
"partnerid": "148*****52", // 微信支付商户号
"prepayid": "wx202254********************fbe90000", // 统一下单订单号
"timestamp": 1597935292, // 时间戳（单位：秒）
"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
},
success(res) {},
fail(e) {}
})微信支付的实现比较复杂，首先是需要在微信支付平台申请开通微信支付，并关联小程序。另外手机微信支付需要在微信开放平台中申请开通微信支付。下面是相对完整的微信支付的示例代码：
金额：
五、获取节点信息
在实际开发中，需要获取节点信息得到元素的宽、高及布局的位置。在uni-app中为兼容各种平台，采用小程序获取节点方式来获取节点信息。官方示例见：
uni.createSelectorQuery() | uni-app官网uni-app,uniCloud,serverless,uni.createSelectorQuery(),SelectorQuery,selectorQuery.in(component),selectorQuery.select(selector),selectorQuery.selectAllhttps://uniapp.dcloud.net.cn/api/ui/nodes-info.html下面是示例代码：
const query = uni.createSelectorQuery().in(this);
query
.select("#id")
.boundingClientRect((data) => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
})
.exec();
六、调试
在实际开发中，可通过 uni.setEnableDebug({
enableDebug: true //true 为打开调试，false为关闭调试。
})