【uniapp】开发支付宝小程序 — 注意事项

button 边框有黑线 解决办法
btn{ border: 1px solid transparent; }

css 复制代码
.btn{ 
    padding: 0; margin: 0; border: 1px solid transparent;
    line-height: initial; height: initial;
}
.btn::after{ display: none; }

自定义导航栏问题
自定义导航栏时Title为空: "navigationBarTitleText": "",
page.json代码 globalStyle中引入

"mp-alipay": {
"allowsBounceVertical": "NO", //是否允许向下拉拽。支持 YES / NO

"transparentTitle": "always",//导航栏透明设置 always一直透明 / auto 滑动自适应 / none 不透明

"titlePenetrate": "YES" //设置小程序导航栏为透明

}


禁止页面下拉拖动
其中有allowsBounceVertical属性 :是否允许向下拉拽。支持 YES / NO

授权支付宝头像、昵称

cpp 复制代码
<template>
  <view>
    <!-- #ifdef MP-ALIPAY -->
	<button open-type="getAuthorize" scope='userInfo' 
	@getAuthorize="onGetAuthorize" @error="onAuthError" 
	class="btn2 btn font-32 h-90 fcc radius10">授权支付宝头像、昵称登录</button>
	<!-- #endif -->
  </view>
</template>
 
<script>
export default {
  methods: {
    onGetAuthorize() {
      my.getAuthCode({
        scopes: 'auth_user',
        success: (authCodeRes) => {
          const authCode = authCodeRes.authCode;
          // 继续获取用户信息
          my.getOpenUserInfo({
            success: (userInfoRes) => {
              const userInfo = JSON.parse(userInfoRes.response).response;
              console.log('User Info:', userInfo);
              // 将用户信息发送到后端
              this.ali_login(authCode, userInfo);
            },
            fail: (error) => {
              console.error('获取用户信息失败', error);
            }
          });
        },
        fail: (error) => {
          console.error('获取授权码失败', error);
        }
      });
    },
	ali_login:function(authCode, userInfo){
		console.log(authCode, userInfo);
		var that=this;
		// 请求接口
		uni.showLoading({ title: '登录中...' });
		uni.request({
			method: 'POST',
			url: '后端接口地址',
			data: {
				code: authCode,
				nickName: userInfo.nickName, gender: 0, avatarUrl: userInfo.avatar,
				referid: uni.getStorageSync('referid') || that.referid || 0
			},
			header: { 'app-type':uni.getStorageSync('app-type')||"" },
			success: (res) => {
				uni.hideLoading();
				if (res.header) {
					uni.setStorageSync('token', res.header['token']||'');
				}
				if (res.data.code == 1) {
					uni.setStorageSync('gl_login_status',true);
					setTimeout(()=>{
						// uni.switchTab({ url: '/pages/index/index' });
					},100);	
				}else{
					that.toast(res.data.msg);
				}
			}
		});
	},
	onAuthError(e){ console.log(e); }, // 授权报错
  }
}
</script>
相关推荐
lhldsg5 小时前
家政派单系统开发实战:从需求分析到智能调度全流程指南
java·junit·小程序·uni-app·需求分析
小小谈电商10 小时前
2026 年 8 月|国内企业级商城源码服务商全方位测评报告
大数据·运维·小程序
PedroQue9910 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
ZhiMuZhiLing13 小时前
企业获客软件免安装能力横评:网页端和小程序端实测数据
大数据·小程序·流量运营·用户运营
lhldsg13 小时前
课程排课系统实战指南:从数据库设计到算法调优全流程解析
java·数据库·算法·小程序
Ai-_Man14 小时前
AI办公智能体工作平台能否电脑批量导出?我们拆解了“AI导出鸭”的底层逻辑
人工智能·ai·小程序·电脑
博、、14 小时前
课程培训系统如何选型?从架构设计到答题模块的实战经验
小程序·需求分析
编程小橘子14 小时前
基于微信小程序健康心理测试、设计与实现 (源码+lw+参考文档+核心代码讲解等)
微信小程序·小程序·毕业设计·毕设
AI行业应用研究16 小时前
2026年主流报名工具测评报告:眨眼猫会务智能体报名小程序为何成为多场景首选?
java·开发语言·小程序
v1588972620116 小时前
货运搬家小程序从0到1(五):JWT 鉴权,拦截器 + ThreadLocal 用户上下文
小程序·货运小程序源码·货运小程序·搬家小程序