Uni-app社会化功能：登录支付分享全攻略

既然昨天我们搞定了"表单录入"，今天咱们就进入 App 开发最核心的商业化环节：社会化功能（Social Features）。

在 Uni-app 中，登录（获取用户）、支付（变现）、分享（裂变） 是最重要的"三驾马车"。好消息是，Uni-app 把这些复杂的原生 SDK（微信、支付宝、QQ 等）都封装成了统一的 API，你不需要写一行 Java 或 Objective-C 代码。

---

🚀 今日份：一行代码搞定 登录、支付与分享

1. 统一登录：uni.login 与 差异化

虽然 API 名字一样，但 小程序 和 App 的登录逻辑天差地别。

🟢 场景 A：微信小程序登录 (静默登录)

小程序不需要用户点"同意"，你可以直接拿到用户的 code，换取 openid（唯一标识）。

uni.login({
  provider: 'weixin',
  success: (res) => {
    console.log('登录 code:', res.code);
    // 拿着这个 code 去请求你的后端
    // 后端调用微信接口：code -> openid & session_key
    this.requestBackendLogin(res.code);
  }
});

• 注意 ：现在无法通过 uni.getUserProfile 直接弹窗获取头像昵称了（微信回收了权限），通常建议让用户自己填写头像昵称，或者使用"头像昵称填写能力"组件。

🔵 场景 B：App 端的一键登录 (Univerify)

这是 Uni-app 的杀手级功能。利用运营商网关认证，用户不需要输验证码，点击"本机号码一键登录"即可。

• 体验：秒开，转化率极高。
• 成本：需要开通 DCloud 的云服务（按次收费，通常几分钱一次）。

// #ifdef APP-PLUS
uni.preLogin({
  provider: 'univerify',
  success: () => {
    uni.login({
      provider: 'univerify',
      success: (res) => {
        // res.authResult 包含 access_token
        // 发给云函数或后端换取手机号
      }
    })
  }
})
// #endif

---

2. 统一支付：uni.requestPayment

支付是很多新手的噩梦，不是因为代码难写，而是流程没搞懂。

⚠️ 核心误区： 前端绝对不要 去计算金额、生成订单号或签名。
正确流程：

1. 前端请求后端 API："我要买这个商品"。
2. 后端去微信/支付宝服务器下单，拿到一个支付凭证 (OrderInfo)。
3. 后端把凭证返回给前端。
4. 前端调用 uni.requestPayment 唤起微信/支付宝 App。

实战代码：

// 假设这是后端返回的数据
const orderInfo = await api.createOrder({ goodsId: 1 });

uni.requestPayment({
    provider: 'wxpay', // 或 'alipay'
    
    // === 小程序端参数 ===
    timeStamp: orderInfo.timeStamp,
    nonceStr: orderInfo.nonceStr,
    package: orderInfo.package,
    signType: 'MD5',
    paySign: orderInfo.paySign,
    
    // === App 端参数 ===
    orderInfo: orderInfo.orderStr, // 支付宝是字符串，微信是对象
    
    success: function (res) {
        console.log('支付成功');
        // 最好再请求一次后端查询订单真实状态，不要完全信任前端回调
    },
    fail: function (err) {
        console.log('支付失败或取消:', err);
    }
});

---

3. 统一分享：裂变的引擎

🟢 小程序端：被动触发

小程序不能主动调起分享，必须由用户点击按钮或右上角菜单。

// 页面中必须定义这个生命周期
onShareAppMessage(res) {
    if (res.from === 'button') {
        console.log('来自页面内转发按钮');
    }
    return {
        title: '我的Uni-app学习笔记',
        path: '/pages/index/index?id=123',
        imageUrl: '/static/share-cover.jpg' // 封面图，比例 5:4
    }
}

🔵 App 端：主动调用

App 可以分享到微信聊天、朋友圈、QQ 等。需在 manifest.json 配置 SDK。

uni.share({
    provider: "weixin",
    scene: "WXSceneSession", // WXSceneSession:聊天, WXSceneTimeline:朋友圈
    type: 0, // 图文
    href: "https://uniapp.dcloud.io/",
    title: "Uni-app 分享测试",
    summary: "这是摘要内容",
    imageUrl: "https://...",
    success: function (res) {
        console.log("success:" + JSON.stringify(res));
    }
});

---

⚠️ 避坑指南（含泪总结）

1. iOS Universal Link (通用链接)：

• 现象：App 无论如何都调不起微信支付或登录，或者调起了没回调。
• 原因：苹果强制要求配置 Universal Link。
• 解法：去苹果开发者后台配置 Association Domain，并在微信开放平台填写一致的链接。如果没有自己的服务器，可以使用 DCloud 提供的免费公用域名。

2. 基座包名一致性：

• 微信开放平台绑定的 Bundle ID (iOS) 和 包名 (Android) 必须和你打包时的一模一样。
• 调试：自定义基座调试时，务必确认基座的签名和线上签名一致，否则微信会报错"签名错误"。

3. 支付金额单位：

• 微信支付通常单位是分 （整数），支付宝是元（字符串）。后端传参时别搞混了，否则用户付 100 元变成了 1 分钱。

---

💡 核心总结

1. 后端主导：支付和登录的核心逻辑都在后端，前端只是个"传话筒"。
2. 配置为王 ：代码写得再对，manifest.json 里的 AppID 填错一个数字，或者 iOS 通用链接没配好，功能全都跑不通。
3. 真机测试 ：所有社会化功能（登录支付分享）必须在真机上测试，模拟器是测不出来的。

---