微信小程序登录流程，双登录，手机号登录和账户密码登录

一、第一步：

在app.js文件中调用wx.login方法发送res.code和appid给后台，后台返回openid和session_key，把openid和session_key存入storage中。因为之后获取解码的手机号码需要用到session_key。

app.js文件中
// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdloginTool.getOpenId(res.code)}})

二、写点击账号登陆或者微信登录的触发事件，用button标签，设置open-type="getPhoneNumber"就可以弹出获取手机号的弹框，bindgetphonenumber="getPhoneNumber"是点击触发函数。

<button class="denglubtn flexCenten" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberByLogin">登录</button><button class=" wxLogin flexCenten" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"><image src="../../image/login/wechat.png" class="wechatIcon"></image><text>微信登录        </text>
</button>

三、从点击事件中自带的参数中可获取到加密后的手机号码，把encryptedData,iv,session_key传给后端，后端返回解密后的手机号码过来，拿到手机号码后，调用微信登录后端写的接口把appid和手机号码传给后端，后端返回登陆状态，根据状态做出成功和失败的现在。

/*** 获取手机号码*/getPhoneNumber(e) {if (e.detail.errMsg == 'getPhoneNumber:ok') {let param = {encryptedData: e.detail.encryptedData,iv: e.detail.iv,session_key: storageData.getSession_key()}decryptPhone(param).then(res => {if (res.code == 200) {this.wechatLogin(res.dataInfo.phoneNumber);}})} else {}},
/*** 微信登录*/wechatLogin(moData) {loginTool.changeUser(moData, '', '../../pages/index/index')},/*** 获取密码登录号码*/getPhoneNumberByLogin(e) {this.normalLogin();},
/*** 账户密码登录*/normalLogin() {if (this.data.userName == '') {wx.showToast({title: '请输入手机号',icon: 'error',duration: 2000})} else if (this.data.passWord == '') {wx.showToast({title: '请输入密码',icon: 'error',duration: 2000})} else {loginTool.changeUser(this.data.userName, this.data.passWord, '../../pages/index/index')}},
/*** 切换账号* @param {*} e */
function changeUser(mo, password, state) {if (password == '') {//微信登录let param = {appId: wx.getAccountInfoSync().miniProgram.appId,mo: mo}authLogin(param).then(res => {if (res.code == 200) {登录成功} else {wx.showToast({title: res.message,icon: 'error',duration: 2000})}})} else if (password != '') {//账号密码登录let param = {mo: mo,password: password}login(param).then(res => {if (res.code == 200) {登录成功} else {wx.showToast({title: res.message,icon: 'error',duration: 2000})}})}
}

微信小程序登录流程，双登录，手机号登录和账户密码登录相关推荐

微信小程序中如何获取用户手机号授权登录
随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务.而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一.因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录. 步骤一 ...
小程序发布上线流程_微信小程序发布流程：公司、个人如何注册小程序
如今制作微信小程序已经是非常简单的事了,即使是完全不懂技术的小白,也能利用小程序制作工具快速生成小程序,基本上选一个模板就能快速把页面搭建好. 不过,虽然小程序页面搭建很简单,但还有不少人不知道页面搭 ...
微擎支付返回商户单号_微信小程序支付流程
微信支付之小程序支付微信的支付方式有以下几种,不同的支付方式适用于不同的支付场景,而今天要给大家讲的就是小程序支付方式说到支付功能就要涉及到金钱交易,必定是有比较严格的规范及流程,如要求小程序 ...
微信小程序python解析获取用户手机号_微信小程序获取用户手机号详解
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
微信小程序开发流程的两种方法科普
现在微信小程序早已渗透我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信公 ...
天使童装微信小程序支付流程：
(商城余额支付,优惠支付,积分抵消,微信支付) 前台后台系统后台微信后台 :三部分流程:点击下单按钮,请求下单支付,后端返回支付参数,收到5个参数之后输入密码确认用户支付输入密码是跟小程序小 ...
小程序：微信小程序支付流程
微信小程序支付流程小程序微信支付的流程图: 1. 登录微信公众平台, 开通微信支付功能这是准备工作的第一步, 确保小程序对应的支付功能已经开启 2. 登录微信商户平台该步骤需要获取两个参数, 一 ...
微信小程序python解析获取用户手机号_微信小程序如何获取用户手机号
最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话 ...
小程序发布上线流程_微信小程序开发流程的两种方法科普
现在微信小程序早已渗透到我们日常生活的方方面面,很多商家看到了小程序带来的巨大流量,也想开发一个自己的小程序.所以今天就跟大家科普下微信小程序开发流程,你会发现这个开发过程其实非常简单. 1. 在微信 ...
【小程序】微信小程序开发流程
文章目录一.概述二.整体开发架构三.注册账号和安装开发工具 1)注册账号 1.注册方法 2.选择注册的帐号类型 3.填写邮箱和密码 4.激活邮箱 5.填写主体信息 6.登录后台补充信息 2)安装 ...

微信小程序登录流程，双登录，手机号登录和账户密码登录

微信小程序登录流程，双登录，手机号登录和账户密码登录相关推荐

最新文章

热门文章