uni-app 之 短信验证码登录

这篇具有很好参考价值的文章主要介绍了uni-app 之 短信验证码登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app 之 短信验证码登录

uniapp 短信验证登录,uni-app,javascript,前端,vue.js,uni-app

image.png文章来源地址https://www.toymoban.com/news/detail-730627.html

uniapp 短信验证登录,uni-app,javascript,前端,vue.js,uni-app

image.png

<template>
    <view style="width: 100%; display: flex; flex-direction:column; align-items:center;">

        <view style="width: 300px; margin-top: 100px;">

            <!-- // -->
            <!-- 1,输入手机号码,获取验证码 -->
            <view style="display: flex; ">
                <u-input placeholder="请输入手机号码" v-model="logon_phone" />
                <button @click="getphoneurl">验证码</button>
            </view>

            <!-- // -->
            <!-- 2,输入验证码,登录 -->
            <u-input placeholder="请输入验证码" v-model="logon_code" />
            <button @click="getcodeurl">登录</button>

        </view>

        <!-- 返回参数 -->
        <text>retCode={{urlretCode}}; </text>
        <text>retMsg={{curlretMsg}}; </text>
        <text>retdata={{curlretdata}}; </text>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                // 返回參數
                urlretCode: "",
                curlretMsg: "",
                curlretdata: "",

                // 輸入框内容
                logon_phone: "",
                logon_code: "",

            };
        },

        methods: {
            // 按钮点击后执行的方法

            ///
            // 1,输入手机号码,获取验证码
            getphoneurl() {
                // uni.showLoading({
                //  title: "加载中" // 加个进度条
                // })

                console.log("111 111 logon_phone 打印", this.logon_phone)

                uni.request({

                    url: "https://api.xxx.com/sms/SendSms/" + this.logon_phone,
                    success: res => {
                        console.log("111 111 res 打印", res) // log打印获取的数据
                        this.urlretCode = res.data.retCode
                        this.curlretMsg = res.data.retMsg
                        // uni.hideLoading() // 加载出来后,关闭进度条
                    }
                })
            },

            ///
            // 2,输入验证码,登录
            getcodeurl() {
                // uni.showLoading({
                //  title: "加载中" // 加个进度条
                // })

                let params = {
                    // "phone": "177128xxxxx",
                    // "verificationCode": "5546",
                    "phone": this.logon_phone,
                    "verificationCode": this.logon_code,
                }

                console.log("222 222 params 打印", params) // log打印获取的数据

                uni.request({
                    method: 'post',
                    url: "https://api.xxx.com/cusInfo/login",
                    data: params,
                    success: res => {
                        console.log("222 222 res 打印", res) // log打印获取的数据
                        this.urlretCode = res.data.retCode
                        this.curlretMsg = res.data.retMsg
                        this.curlretdata = res.data.data

                        // 存储返回的token
                        uni.setStorageSync('s_token', res.data.data);
                        uni.setStorageSync('s_retCode', res.data.retCode);

                        // 打印存储的token
                        const token = uni.getStorageSync('s_token'); //获取token
                        const g_phone = uni.getStorageSync('s_phone'); //获取token
                        console.log("333 333 token>>>", token, g_phone) // log打印获取的数据

                        if (token) {
                            //存在则关闭前页面
                            uni.navigateBack({
                                //关闭当前页面,返回上一页面或多级页面。
                                delta: 1
                            });

                        } else {
                            //不存在则跳转至登录页
                            // uni.reLaunch({
                            //  url: "/pages/ldy_logon/ldy_logon",
                            //  success: () => {
                            //      plus.navigator.closeSplashscreen();
                            //  }
                            // })
                        }
                    }
                })
            },

        },

        onLoad() {
            // 页面刚进去就初始化的方法

            // this.getphoneurl(),
            // this.getcodeurl()
        },

    }
</script>


<style lang="scss">

</style>

到了这里,关于uni-app 之 短信验证码登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UniApp】-uni-app-网络请求

    经过上个章节的介绍,大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档,我先带着大家看一下官方文档的介绍:https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到,可以

    2024年02月04日
    浏览(53)
  • uni-app使用uniCloud实现图形验证码(uni-captcha)

    uniCloud 是 DCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。 官方文档:https://uniapp.dcloud.net.cn/uniCloud/uni-captcha.html 下载地址:https://ext.dcloud.net.cn/plugin?id=4048 GitCode 仓库:https://gitee.com/dcloud/uni-captcha 图形验证码主要起到人机校验或其他限制

    2024年02月08日
    浏览(49)
  • 【UniApp】-uni-app-打包成网页

    经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。 除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文

    2024年02月04日
    浏览(72)
  • uni-app中使用微信一键登录

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 一、微信一键登录是什么? 二、使用步骤 1.在onLoad获取用户登录信息code 2.编写页面button按钮          3.根据pen-type=\\\"getPhoneNumber\\\"获取的用户信息传值给后端 总结 在uni-app中使用微信一键登录分析和

    2024年02月09日
    浏览(60)
  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(64)
  • 在uni-app中使用手机号一键登录

    https://dev.dcloud.net.cn/uniLogin 开通一键登录服务, 获取关键最关键的两个参数  ApiKey  和  ApiSecret 真机调试无需添加应用,如需打包使用请添加。一键登录应用ID为离线打包时配置的appid https://unicloud.dcloud.net.cn/home      新建云函数后会有一个index.js【 getPhoneNumber/index.js 】生成,

    2023年04月23日
    浏览(36)
  • 关于uni-app小程序接入微信登录

    https://uniapp.dcloud.net.cn/api/plugins/login.html#login 官网上有关于uni.login()的说明,如果是要微信登录,则需要wx.login()。 小程序登录 | 微信开放文档         如下图,在小程序管理平台生成AppSecret,同时将AppId在HubilderX中配置。           在HbuilderX中使用wx.login获取到code,然后调用

    2024年02月11日
    浏览(60)
  • 【uni-app2.0】实现登录页记住密码功能

    使用uni-app的 uni.setStorageSync() 和 uni.getStorageSync() 方法来存储和读取密码 在登录页中添加一个记住密码的 u-checkbox 选项,并在data里面添加一个 rememberPwd 的布尔值,在每次点击记住密码 change 的时候来记录用户的选择 在点击登录按钮执行的事件中,使用 uni.setStorageSync() 方法将【

    2024年02月15日
    浏览(56)
  • VUE3、uni-app、SpringBoot登录密码加密

    aes.js import {Encrypt} from \\\'@/utils/aes.js\\\'; loginForm.value.password = Encrypt(password.value); new Aes().decrypt(loginBody.getPassword()) CryptoJS.js aes.js import {Encrypt} from \\\'@/utils/aes.js\\\' Encrypt(this.password)

    2024年02月08日
    浏览(46)
  • uni-app:登录与支付-- 三秒后自动跳转

    三秒后自动跳转到登录页面 需求描述:在购物车页面,当用户点击 “结算” 按钮时, 如果用户没有登录,则 3 秒后自动跳转到登录页面 在  my-settle  组件的  methods  节点中,声明一个叫做  showTips  的方法,专门用来展示倒计时的提示消息: 改造  结算  按钮的  click  

    2023年04月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包