uniapp一键登录功能

利用uniapp开发Android App,利用unicloud云函数实现手机号码一键登录功能。

uniapp一键登录相关文档

相关文档写的很详细,比较常用的就是一键登录的请求方式以及univerifyStyle 数据结构。

uni.login({
    provider: 'univerify',
    univerifyStyle: {  
      "fullScreen": false, // 是否全屏显示,默认值: false
      "backgroundColor": "#ffffff",  // 授权页面背景颜色,默认值:#ffffff
      "backgroundImage": "", // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持)  
      "icon": {  
          "path": "static/xxx.png" // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo   
      },  
      "closeIcon": {  
          "path": "static/xxx.png" // 自定义关闭按钮,仅支持本地图片。 HBuilderX3.3.7+版本支持
      },  
      "phoneNum": {  
          "color": "#202020"  // 手机号文字颜色 默认值:#202020  
      },  
      "slogan": {  
          "color": "#BBBBBB"  //  slogan 字体颜色 默认值:#BBBBBB  
      },  
      "authButton": {  
          "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5  
          "highlightColor": "#2861c5",  // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)  
          "disabledColor": "#73aaf5",  // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)  
          "textColor": "#ffffff",  // 授权按钮文字颜色 默认值:#ffffff  
          "title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”  
          "borderRadius": "24px"    // 授权按钮圆角 默认值:"24px" (按钮高度的一半)
      },  
      "otherLoginButton": {  
          "visible": true, // 是否显示其他登录按钮,默认值:true  
          "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值:透明 
          "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值:透明 
          "textColor": "#656565", // 其他登录按钮文字颜色 默认值:#656565  
          "title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式”  
          "borderColor": "",  //边框颜色 默认值:透明(仅iOS支持)  
          "borderRadius": "0px" // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半)
      },  
      "privacyTerms": {  
          "defaultCheckBoxState":true, // 条款勾选框初始状态 默认值: true
          "isCenterHint":false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
          "uncheckedImage":"", // 可选 条款勾选框未选中状态图片(仅支持本地图片 建议尺寸 24x24px)(3.2.0+ 版本支持)   
          "checkedImage":"", // 可选 条款勾选框选中状态图片(仅支持本地图片 建议尺寸24x24px)(3.2.0+ 版本支持)   
          "checkBoxSize":12, // 可选 条款勾选框大小,仅android支持
          "textColor": "#BBBBBB", // 文字颜色 默认值:#BBBBBB  
          "termsColor": "#5496E3", //  协议文字颜色 默认值: #5496E3  
          "prefix": "我已阅读并同意", // 条款前的文案 默认值:“我已阅读并同意”  
          "suffix": "并使用本机号码登录", // 条款后的文案 默认值:“并使用本机号码登录”  
          "privacyItems": [  // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效  
              {  
                  "url": "https://", // 点击跳转的协议详情页面  
                  "title": "用户服务协议" // 协议名称  
              }  
          ]  
      },
      "buttons": {  // 自定义页面下方按钮仅全屏模式生效(3.1.14+ 版本支持)
          "iconWidth": "45px", // 图标宽度(高度等比例缩放) 默认值:45px
          "list": [
              {
                  "provider": "apple",
                  "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
              }, 
              {
                  "provider": "weixin",
                  "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
              }
          ]
      }
  }

})

取消一键登录后白屏问题

进入一键登录页面,点击右上角叉号,此时如果使用uni.navigateTo进行路由跳转,会有一个空路由页面的闪现问题,影响观感。此时可以使用uni.navigateBack模拟返回操作,就不会有空路由页面出现。

一键登录错误码bug

官网给的错误码示例中可能会有格式错误问题.

已知30002、30003、30005为number格式,30008为string格式

预登录真机模拟正常,打完测试包后失效

可能是证书问题,打包使用的证书已经失效了。

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可。