Skip to content

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>

Released under the MIT License.