前言微信自从更新之后为了保护用户隐私wx.getUserInfo、wx.getUserProfile都无法获取用户头像和昵称只能通过设计用户主动选择/输入形式而且头像还需要自己处理上传到存储才能使用最近发现使用微信小程序插件可以获取到以前类似的微信原始头像昵称性别地址等经过测试发现可行。所以便写了一款快捷登录的插件只需要简单的授权即可获取到微信的头像地址和昵称直接传递到后台即可内置了7种登录弹窗形式现在写一个文档保留以便后续使用。多程序统一化登录页插件1、支持所有内容自定义样式文字、弹窗、遮罩、按钮、图片、样式采用modal对话框形式提示用户登录点击登录可跳转登录申请可直接获取用户登录CODE、头像、昵称、性别等基本信息采用自定义的样式可以自定义头像、标题、说明以及服务列表等所有内容包括弹窗样式、图片、文字、图标、遮罩蒙版、文字、按钮、所有样式均支持自定义无需重复造轮子2、样式演示总览3、组件特性说明①、login-temp1居中弹出-完整版居中显示弹窗支持logo头像可配置显示/隐藏支持标题、副标题支持服务列表可配置显示/隐藏两个按钮横向排列取消 确认默认标题‘跳转提示’默认确认按钮‘立即登录’②、login-temp2底部弹出-完整版从屏幕底部弹出自动适配安全区iPhone X等设备支持logo头像可配置显示/隐藏支持标题、副标题支持服务列表可配置显示/隐藏两个按钮横向排列默认标题‘跳转提示’默认确认按钮‘立即登录’③、login-temp3底部弹出-简化版从屏幕底部弹出自动适配安全区无服务列表按钮垂直排列确认在上取消在下默认标题‘温馨提示’默认确认按钮‘去授权登录’④、login-temp4居中弹出-简化版-成功图标居中显示弹窗带成功图标绿色圆形背景白色对勾无服务列表两个按钮横向排列贴边显示无外边距默认标题‘微信授权成功’默认副标题‘授权绑定您的手机号’默认确认按钮‘确认授权’⑤、login-temp5嵌套授权提示居中显示弹窗展示授权流程说明嵌套展示授权对话框图片仅一个确认按钮‘我知道了’默认标题‘需要您的授权’默认logo‘…/…/static/ts.png’⑥、login-temp6居中弹出-极简版居中显示弹窗仅包含logo、标题、副标题两个按钮垂直排列确认按钮绿色取消按钮文字样式默认标题‘请登录’默认副标题‘登录后体验更好~’默认确认按钮‘微信快速登录’默认取消按钮‘暂不登录’⑦、login-temp7全屏页面样式不建议会跳转两次才能成功登录全屏显示position: fixed覆盖整个屏幕顶部背景区域使用 logo.url固定高度 60vh可延伸至波浪下方波浪分隔图片使用 ‘…/…/static/bw.png’半透明效果底部内容区白色背景固定高度 40vh自动适配安全区标题图片使用 ‘…/…/static/sq.png’权限说明列表subtitle 使用 ‘##’ 分割多行每行自动添加 ◇ 符号确认按钮蓝色圆角可选取消按钮文字样式默认确认按钮‘微信授权登录’4、微信使用方法在app.json页面的plugins中引入组件myPlugin:{version:latest,provider:wx1111111111111111111,}在具体页面的xxxx.json中引入组件{// 需要哪个用哪个 不要一次性引入全部usingComponents:{login1:plugin://myPlugin/login-temp1,login2:plugin://myPlugin/login-temp2,login3:plugin://myPlugin/login-temp3,login4:plugin://myPlugin/login-temp4,login5:plugin://myPlugin/login-temp5,login6:plugin://myPlugin/login-temp6,login7:plugin://myPlugin/login-temp7}}在页面中使用login1wx:if{{showLogin}}loginData{{loginData}}bind:successonLoginSuccessbind:failonLoginFailbind:cancelonLoginCancel/5、UniApp使用方法在manifest.json页面的mp-weixin下的plugins中引入组件myPlugin:{version:latest,provider:wx1111111111111111111,}在pages.json中具体使用的页面style下添加如下内容mp-weixin:{// 需要哪个用哪个 不要一次性引入全部usingComponents:{login1:plugin://myPlugin/login-temp1,login2:plugin://myPlugin/login-temp2,login3:plugin://myPlugin/login-temp3,login4:plugin://myPlugin/login-temp4,login5:plugin://myPlugin/login-temp5,login6:plugin://myPlugin/login-temp6,login7:plugin://myPlugin/login-temp7}}在页面中引入插件即可login1v-ifshowLogin:loginDataloginDatasuccessonLoginSuccessfailonLoginFailcancelonLoginCancel/6、参数说明loginData:{version:release,// 插件版本release正式版或 develop开发版// Logo配置logo:{isShow:true,// 是否显示logo默认trueurl:http://xxxxx.png,// logo图片地址urlStyle:// logo图片样式支持内联样式},// 基础信息配置base:{title:跳转提示,// 标题文本titleStyle:,// 标题样式subtitle:为了提供更好的服务请登录~,subtitleStyle:,// 副标题样式dividerStyle:,// 分割线样式modelStyle:,// 弹窗容器样式maskStyle:// 遮罩层样式},// 服务列表配置login-temp1/login-temp2使用其他不支持service:{isShow:true,// 是否显示服务列表默认truedesc:用于更好地提供以下服务,// 服务列表描述文字dividerStyle:,// 分割线样式serviceStyle:,// 服务列表容器样式services:[// 服务项数组{icon:,// 图标支持emoji或图片iconStyle:,// 图标样式title:显示头像,// 服务标题titleStyle:,// 标题样式desc:人群中一眼认出你,// 服务描述descStyle:// 描述样式}// ... 更多服务项]},// 确认按钮配置confirmBtn:{btnText:立即登录,// 按钮文字btnStyle:// 按钮样式},// 取消按钮配置cancelBtn:{isShow:true,// 是否显示取消按钮默认truebtnText:取消,// 按钮文字btnStyle:// 按钮样式}}7、事件说明所有组件都支持以下事件success: 登录成功时触发onLoginSuccess(e){// e.detail 包含登录结果数据console.log(登录成功,e.detail);}fail: 登录失败时触发onLoginFail(e){console.log(登录失败,e);}cancel: 取消登录时触发点击取消按钮或遮罩层onLoginCancel(e){console.log(取消登录,e);}8、注意事项所有样式字段如titleStyle、btnStyle等支持内联样式字符串例如color: red; font-size: 32rpx;所有组件使用微信官方的functional-page-navigator组件实现登录跳转无需额外配置
