【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>
UniApp 开发支付宝小程序时,使用 `uni.requestPayment` 进行支付的步骤如下: 1. 首先,确保已安装并配置了支付宝小程序的 SDK。在项目中需要引入相应的插件,可以通过 `uni.addPlugin` 动态加载。确保你已经安装了 `@dcloudio/ali-opensdk` 插件。 ```javascript uni.addPlugin({ id: 'alipay', path: '/node_modules/@dcloudio/ali-opensdk/lib/index.js' }); ``` 2. 引入支付宝的支付模块: ```javascript const AliPay = uni.requirePlugin('alipay').default; ``` 3. 准备支付信息。创建一个包含必要的参数对象,包括 `totalAmount`(总金额)、`subject`(商品标题)、`body`(商品描述)、`out_trade_no`(交易号)等。同时,需要获取用户的支付宝账号和安全校验码(如果需要)。 ```javascript const orderParams = { total_amount: '0.01', // 示例金额,实际使用时替换为正确数值 subject: '测试订单', body: '测试支付', out_trade_no: Date.now().toString(), // 生成唯一的交易号 notify_url: '你的服务器通知URL', // 支付成功后回调地址 return_url: '你的服务器返回URL', // 支付结果页面返回地址 }; ``` 4. 使用 `uni.requestPayment` 发起请求,并传递支付参数: ```javascript uni.requestPayment({ provider: 'alipay', // 指定支付渠道 orderParams: orderParams, success: (res) => { // 支付成功处理逻辑 }, fail: (err) => { // 支付失败处理逻辑 console.error('支付宝支付失败:', err); } }); ``` 5. 提示用户授权:在实际场景中,`uni.requestPayment` 会自动弹出支付宝的登录/授权窗口,用户完成授权操作后才会继续支付流程。 重要提示:在生产环境中,你需要在微信公众平台商户后台设置对应的回调地址,并且遵循支付宝的安全策略,确保用户信息的安全。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值