uniapp开发小程序笔记一

最新推荐文章于 2025-06-12 10:57:06 发布

_MadD

最新推荐文章于 2025-06-12 10:57:06 发布

阅读量779

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/weixin_45849112/article/details/109119283

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了微信小程序中uni.app的modal弹窗展示、本地存储与读取、扫码功能、获取用户信息和手机号，以及权限管理的实践，包括授权、支付接口和统一用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni.showModal(OBJECT)

显示模态弹窗，类似于标准 html 的消息框：alert、confirm。

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

uni.scanCode(OBJECT)（扫码）

调起客户端扫码界面，扫码成功后返回对应的结果。

// 允许从相机和相册扫码
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);
    }
});

获取用户手机号

button

按钮。
open-type String 开放能力
@getphonenumber Handler 获取用户手机号回调 open-type=“getPhoneNumber” 微信小程序

<body>
<button class='bottom' type='primary' open-type="getPhoneNumber" withCredentials="true" lang="zh_CN"
				 @getphonenumber="wxGetUserPhone">微信用户一键登录</button>
</body>
<script>
methods: {
			wxGetUserPhone(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log('用户点击了允许')
					this.updateUserInfo(e); //调用更新信息方法
				} else {
					console.log('用户点击了拒绝')
				}
			}
}
</script>

获取用户信息，button open-type 开放能力

@getuserinfo Handler 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo open-type=“getUserInfo” 微信小程序

// 获取用户信息
			wxGetUserInfo() {
				let _this = this;
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						_this.nickName = infoRes.userInfo.nickName; //昵称
						_this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
						_this.updateUserInfo(); //调用更新信息方法
						uni.setStorage({
							key: "avatarUrl",
							data: infoRes.userInfo.avatarUrl
						})
						uni.setStorage({
							key: "nickName",
							data: infoRes.userInfo.nickName
						})
					},
					fail(res) {}
				});
			},

授权uni.authorize(OBJECT)

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用。

// 获取用户位置信息
			getAuthorizeInfo() {
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo();
					},
					fail() { // 拒绝授权
						that.openConfirm();
					}
				})
			},