uni-app 常用方法
1、微信小程序获取 code
vue
<script>
uni.login({
provider: "weixin",
success: function (res) {
console.log("res.code", res.code);
},
});
</script>2、获取手机系统信息
vue
<script>
// 获取手机系统信息
const info = uni.getSystemInfoSync();
// 设置状态栏高度(H5顶部无状态栏小程序有状态栏需要撑起高度)
const statusBarHeight = info.statusBarHeight;
// 获取胶囊位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 导航栏的高度 = (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏的高度)
const navHeight =
menuButtonInfo.bottom -
info.statusBarHeight +
(menuButtonInfo.top - info.statusBarHeight);
</script>3、传值带参
vue
<script>
// 传值
encodeURIComponent(JSON.stringify(data))
// 接收
JSON.parse(decodeURIComponent(data))
// 🔺如果是富文本 传输的时候就是
encodeURIComponent(JSON.stringify(data).replace(/%/g, '%25'))
</script>4、个人信息
vue
<template>
<!-- 昵称 -->
<input
type="nickname"
class="weui-input"
placeholder="请输入昵称"
v-model="nicknameone"
@blur="inputData"
/>
<!-- 头像 -->
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">头像</button>
</template>
<script>
inputData(e) {
console.log('当前微信昵称' , e.detail.value)
},
onChooseAvatar(e) {
console.log('当前微信头像' , e.detail.avatarUrl)
}
</script>5、微信支付
vue
<script>
WeChatPay(){
uni.requestPayment({
provider: "wxpay",
timeStamp: res.data.timeStamp, //时间戳
nonceStr: res.data.nonceStr, //随机字符串
package: res.data.package, //统一下单接口返回的 prepay_id 参数值
signType: res.data.signType,
paySign: res.data.paySign, //签名内容
success: function (res) {
uni.showToast({
title: "支付成功",
icon: "none",
});
},
fail: function (err) {
uni.showToast({
title: "支付失败",
icon: "none",
});
},
})
}
</script>6、上传多张图片
vue
<script>
UploadPictures(){
uni.chooseImage({
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
count: 9,
success: (res) => {
var that = this;
uni.showLoading({
title: '上传中',
mask: true
})
const tempFilePaths = res.tempFilePaths;
let picturelistlength = that.picturelist.length
for (var i = 0; i < tempFilePaths.length; i++) {
const uploadTask = uni.uploadFile({
url: '',
filePath: tempFilePaths[i],
name: 'file',
formData: {
file: tempFilePaths[i]
},
success: function(res) {
console.log("返回参数", JSON.parse(res.data));
that.picturelist.push(JSON.parse(res.data)['data'][0]);
if(that.picturelist.length == tempFilePaths.length + picturelistlength){
uni.hideLoading()
}
}
});
}
}
})
}
</script>7、预览图片
vue
<script>
Previewpicture(){
uni.previewImage({
current: 0, //预览图片的下标
urls: picturelist //预览图片的地址,必须要数组形式
})
}
</script>