小程序手机号登录,手机号验证码登录以及注册登录

前言

目前大多数常用的小程序都有手机号一键登录这个功能

一,手机号登录

在微信小程序中,可以通过调用 wx.login() 获取用户的登录凭证 code,然后将 code 发送给后端服务器,由后端通过微信提供的接口获取用户的手机号码。具体步骤如下:

// 前端页面的逻辑层
wx.login({
  success: (res) => {
    if (res.code) {
      // 获取到用户登录凭证 code
      const code = res.code;
      // 将 code 发送给后端服务器
      wx.request({
        url: ' ',(此处写自己的api)
        data: { code: code },
        method: 'POST',
        success: (res) => {
          console.log(res.data);
        },
        fail: (err) => {
          console.error('请求后端接口失败', err);
        },
      });
    } else {
      console.error('获取用户登录凭证失败', res.errMsg);
    }
  },
  fail: (err) => {
    console.error('调用 wx.login 失败', err);
  },
});

二,手机号验证码登录

具体实现步骤如下:

1,先点击输入框输入手机号,这里有个注意点,一般情况是用正则表达式判断手机号输入是否正确,也有情况是通过后端去判断输入的手机号格式是否正确。

这里我是用到自定义组件,没有用input组件,用input组件的话直接将d_input改成input,_type变type就行

用正则表达式去判断,手机号不正确就无法点击获取验证码,只有正确才可以。如下

onMobileChange: function (event) {
        let mobile = event.detail.value
        // 正则表达式校验手机号格式
        if (/^1[3456789]\d{9}$/.test(mobile)) {
            // 手机号格式正确,获取验证码高亮,可以点击
            this.setData({
                hasMobile: true,
                mobile: mobile
            })
        } else {
            this.setData({
                hasMobile: false,
                mobile: mobile
            })
        }
    },


效果图 

 通过后端去判断这里不多说,直接将输入的手机号通过post请求获取验证码。看是否能获取到验证码,获取不到一般会有提示,这里就不需要用到正则表达式。例如

这里就不要通过三元表达式去判断点击事件的存在

最后的登录功能只有输入正确的手机号和验证码后登录按钮才会高亮,才能登录

这里的写法和上面验证码高亮和点击几乎相同,因为我这里没有用到button组件。当然如果嫌麻烦,也可以正常写button,通过disabled控制按钮是否禁用(具体参考button | 微信开放文档)。

点击登录代码参考

onLogin: function(event) {
    const mobile = this.data.mobile
    const code = this.data.code
    if (!this.data.hasMobile || !this.data.hasCode) {
      return false
    }
    api.post({
      url: apiUrl.loginBySms,
      data: {
        mobile: mobile,
        code: code
      },
      success: res => {
        // 登录成功
        const data = res.results
      },
      fail: res => {
        // 登录失败
      }
    })
  },

三,注册登录

原理和上面手机号验证码登录一样,这里就不多阐述。

8-16位字母和数字的正则表达式/^[a-zA-Z0-9]{8,16}$/

注意:可能每个人的想法都不同,这里仅是本人个人学习的中用到的方法,仅供参考,如有不懂可互相探讨。

  • 19
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序手机号验证码登录的流程和短信验证码登录类似,只是在发送验证码的时候,后端将验证码发送到用户的手机号码上,而不是短信。 下面是微信小程序手机号验证码登录的代码示例: 1. 前端代码 ``` // 点击验证码登录按钮 wx.request({ url: 'https://your-domain.com/send-verification-code', method: 'POST', data: { phone: '13812345678' // 用户输入的手机号码 }, success: (res) => { // 发送验证码成功 }, fail: (err) => { // 发送验证码失败 } }) // 用户输入验证码并点击登录按钮 wx.request({ url: 'https://your-domain.com/verify-verification-code', method: 'POST', data: { phone: '13812345678', // 用户输入的手机号码 code: '123456' // 用户输入的验证码 }, success: (res) => { // 验证码正确,登录成功 wx.setStorageSync('token', res.data.token) }, fail: (err) => { // 验证码错误,登录失败 } }) ``` 2. 后端代码 ``` // 生成随机验证码 function generateVerificationCode() { return Math.floor(Math.random() * (999999 - 100000 + 1) + 100000) } // 发送验证码 app.post('/send-verification-code', (req, res) => { const { phone } = req.body const code = generateVerificationCode() // 将验证码发送到用户的手机号码上 // 这里需要调用短信服务商的 API 发送短信验证码 res.send({ code }) }) // 验证验证码 app.post('/verify-verification-code', (req, res) => { const { phone, code } = req.body // 验证验证码是否正确 if (code === '123456') { // 这里应该是验证真实的验证码 const token = 'xxxxx' // 将 token 存储到服务器上 res.send({ token }) } else { res.status(400).send('验证码错误') } }) ``` 同样需要注意的是,真实的手机验证码登录需要考虑更多的安全性和可靠性问题。另外,需要调用短信服务商的 API 发送短信验证码,可以选择国内的一些短信服务商,例如阿里云、腾讯云等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值