抖音快手小程序一键登录, 支付，获取手机号

公司开发了一款智能生成logo小程序，微信小程序版的很快就开发出来了，想要试试抖音和快手的。大体功能都是不需要改变，但是该小程序涉及支付和一键登录，获取手机号等，很容易忘记所以抽空归类写成一个文档。

一键登录

快手

在后台申请，一定要先申请才能用，链接: 快手开发者后台
这个申请是需要自己p一张图片上去，就是那张场景示例图，我是找公司ui帮忙p上去的。。。
官方文档链接: 获取手机号
使用的话抖音快手微信都是一样的，注意要先登录，将encryptedUserInfo和iv传给后端去解密

<button open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber"></button>
const getPhoneNumber = async (e: any) => {
  // #ifdef MP
  uni.login({
    // provider: 'weixin',
    success: async (loginRes) => {
      console.log('loginRes ==> ', loginRes)
      let tempData: any = {}
      // #ifdef MP-WEIXIN
      const { data: weixin } = await authorizeWeappUserInfo({
        code: loginRes.code,
        authorized: false,
        phoneCode: e.detail.code
      })
      tempData = weixin
      // #endif
      // #ifdef MP-KUAISHOU
      const { data: ks } = await ksLogin({
        code: loginRes.code,
        encryptedUserInfo: e.detail.encryptedData,
        iv: e.detail.iv
      })
      tempData = ks
      // #endif

      // #ifdef MP-TOUTIAO
      const { data: dy } = await dyLogin({
        code: loginRes.code,
        encryptedUserInfo: e.detail.encryptedData,
        iv: e.detail.iv
      })
      tempData = dy
      // #endif

      console.log('获取返回值', tempData)
    }
  })
 
}

快手对webview的支持。。。不太友好，不能互相传递数据

抖音

抖音的话需要先通过试运营，试运营是必须要先发布成功一版之后才正式进入试运营，获取手机号也是通过试运营之后默认就有的权限
官方文档: link
在项目中使用看上面代码
试运营默认60分，达到80分就能获取用户手机号，详情看这里：link
比较头疼的是抖音的自定义导航栏，也要通过试运营。。。通过试运营也不能立马使用自定义导航栏，要到90分

快手抖音在按钮文案上也要注意一下，必须要写清楚，比如抖音一键登录，快手一键登录等等，隐私协议和用户服务协议也要加，不然审核过不了

支付

支付可以用uni提供的uni.requestPayment方法，官方文档：link使用的话要什么传什么
但是也要先用uni.login登录获取到code传给后端，才能调用抖音快手的支付
支付相对来说没那么多限制，根据团队制定的支付逻辑走就行。后台也需要配置很多地方，回调地址，token令牌，服务器地址等等
快手: 小程序担保支付接入指南
抖音：小程序担保支付接入指南

const pay = (params: PayInfo) => {
  return new Promise<any>(async (resolve, reject) => {
    let data: any = {}
    // #ifdef MP-WEIXIN
    const { data: weixin } = await wechatPay(params.outTradeNo)
    data = weixin
    // #endif
    // #ifdef MP-KUAISHOU
    const { data: kuaishou } = await ksPayUnifiedOrder(params.outTradeNo)
    data = kuaishou
    // #endif
    // #ifdef MP-TOUTIAO
    const { data: toutiao } = await dyPayUnifiedOrder(params.outTradeNo)
    data = toutiao.pay_json
    // #endif

    const provider = await useProvider().getPaymentProvider()
    uni.requestPayment({
      // @ts-ignore
      appId: data.appId,
      // @ts-ignore
      provider: provider[0],
      // #ifdef MP-KUAISHOU
      orderInfo: data,
      // #endif
      // #ifdef MP-TOUTIAO
      orderInfo: data,
      service: 5,
      // #endif
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.package,
      signType: data.signType,
      paySign: data.paySign,
      success: function (result) {
        resolve(result)
      },
      fail: function (error) {
        reject(error)
      }
    })
  })
}

h5分两种支付, 微信内嵌浏览器支付, 手机系统中的浏览器, 贴代码
JSAPI: >yarn add weixin-js-sdk, import wx from ‘weixin-js-sdk’

// PayInfo:{outTradeNo: string}
const h5Pay = async (params: PayInfo) => {
  const { data } = await h5PayUnifiedOrder(params.outTradeNo)
  var ua = navigator.userAgent.toLowerCase()
  // @ts-ignore
  var isWeixin = ua.match(/MicroMessenger/i) == 'micromessenger'
  console.log('isWeixin ==> ', isWeixin)
  if (isWeixin) {
    // 微信内部浏览器
    const { timeStamp, nonceStr, signType } = data
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，企业微信的corpID
      timestamp: timeStamp as any, // 必填，生成签名的时间戳 —>单位：秒==
      nonceStr, // 必填，生成签名的随机串—>长度一般不超过32，格式建议[0-9a-zA-z]==
      signature: signType, // 必填，签名==，见 微信公众号开发文档附录JS-SDK使用权限签名算法
      jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    })
    wx.ready(function () {
      //config权限验证成功会走
      //ready成功之后接可以调用微信的api
      console.log('success')
    })
    wx.error(function () {
      //config权限验证失败会走
      console.log('error')
    })
    wx.chooseWXPay({
      timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      nonceStr: '', // 支付签名随机串，不长于 32 位
      package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
      signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
      paySign: '', // 支付签名
      success: function (res) {
        // 支付成功后的回调函数
      }
    })
  } else {
    // 微信外部浏览器 后端响应一个url, 前端直接跳转即可
    // console.log('微信外部H5支付')
    // let redirect_url =
    //   data.mweb_url + '&redirect_url=' + encodeURIComponent(successRedirectUrl)
    // window.location.href = redirect_url
  }
}