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

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

.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

授权支付宝头像、昵称

<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>
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp开发支付宝小程序,调起支付功能需要用到支付宝的官方SDK和UniApp提供的API适配。以下是基本步骤: 1. **安装支付宝插件**: 在UniApp项目中,首先需要安装支付宝的插件,可以通过命令行工具或在`uni-app`的插件市场搜索"alipay"找到官方提供的支付宝组件。安装完成后,需要在`uni-app.json`配置文件中注册插件。 2. **引入依赖**: 在项目中引用支付宝的JavaScript SDK,通常是在`app.js`或相关的业务组件文件里。 ```javascript import { alipayInstance } from '@/plugins/alipay/index'; ``` 3. **初始化支付环境**: 初始化支付宝支付对象,并设置应用ID(APPID)和支付宝公钥等必要信息。 ```javascript const app = createApp(App); app.registerComponent(...); alipayInstance.init({ appid: 'your_app_id', app_notify_url: 'your_server_callback_url', // 支付成功后的回调地址 ... }); ``` 4. **调用支付接口**: 使用`alipayInstance.requestOrder`方法发起支付请求,传入具体的商品信息、支付参数等。 ```javascript async pay(orderInfo) { const result = await alipayInstance.requestOrder({ bizContent: orderInfo, // 这里包含商品ID、价格、订单描述等 method: 'alipay.trade.page.pay', // 支付方式 ... }); if (result.status === 'success') { // 处理支付成功的情况 } else { // 处理支付失败的情况 } } ``` 5. **处理支付结果**: 设置回调函数处理服务器返回的支付结果,如状态确认、退款、关闭订单等。 6. **安全问题**: 不要将敏感信息如私钥直接暴露在前端代码中,确保后台服务器的安全。 重要提示:支付宝开发者文档是实时更新的,具体使用时请查阅官方最新文档,以便获取最新的配置和调用方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值