유니앱에서 휴대폰 번호 로그인을 구현하는 방법

npm install uview-ui

// 在login页面中添加一个按钮
<template>
  ...
  <button>获取验证码</button>
  ...
</template>

<script>
  export default {
    data() {
      return {
        phone: &#39;&#39;, // 存储用户输入的手机号
        code: &#39;&#39;, // 存储服务器返回的验证码
      }
    },
    methods: {
      // 发送验证码
      sendCode() {
        if (!this.phone) {
          uni.showToast({
            icon: &#39;none&#39;,
            title: &#39;请输入手机号&#39;
          })
          return
        }
        if (!/^1[3456789]\d{9}$/i.test(this.phone)) {
          uni.showToast({
            icon: &#39;none&#39;,
            title: &#39;请输入正确的手机号&#39;
          })
          return
        }
        // 向服务器发送请求
        uni.request({
          url: &#39;http://localhost:8080/sendCode&#39;,
          method: &#39;POST&#39;,
          header: {
            &#39;Content-Type&#39;: &#39;application/json&#39;
          },
          data: {
            phone: this.phone
          },
          success: (res) => {
            if (res.statusCode === 200) {
              uni.showToast({
                icon: &#39;none&#39;,
                title: &#39;验证码已发送，请注意查收&#39;
              })
              this.code = res.data.code // 保存验证码
            } else {
              uni.showToast({
                icon: &#39;none&#39;,
                title: &#39;发送验证码失败，请重新发送&#39;
              })
            }
          },
          fail: (err) => {
            console.log(err)
          }
        })
      },
    }
  }
</script>

// 在store/index.js文件中新增一个state
export default new Vuex.Store({
  state: {
    code: '', // 存储验证码
  }
  ...
})

// 用户信息
const userInfo = {
  phone: this.phone,
  code: this.$store.state.code
}

// 保存授权信息
uni.setStorageSync('token', res.data.token) // 将token保存到本地

// 获取授权信息
uni.getStorageSync('token') // 获取本地保存的token