微信小程序如何实现短信登录

本篇文章为大家展示了微信小程序如何实现短信登录，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

项目要求增加短信登录及人脸识别登录功能，下面我们来实现下短信登录功能

1.界面效果预览

2.uView安装

uView官网：https://www.uviewui.com
以npm安装为例,执行：npm install uview-ui即可

3.uView配置

3.1 main.js中引入

import uView from "uview-ui";Vue.use(uView);

3.2 uni.scss中引入

@import 'uview-ui/theme.scss';

3.3 App.vue中引入

3.4 pages.json中配置

"easycom": {                "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",        },

注意如果easycom中还有别的配置有可能会导致uView样式无法加载

4.短信登录界面

5.点击获取验证码接口

import utilTools from '../../../../utils/UtilTools.js';import { isMobile } from '../../../../utils/validate.js';        getCheckNum() {                        let obj = utilTools.getParams();                        obj.method = 'xxx';                        obj.message = JSON.stringify({ mobile_phone: this.model.phone });                        this.$Api.getDataFromWeb(obj).then(data => {                                        if (!!data && data['success'] == 'true') {                                                this.$refs.uCode.start();                                        } else {                                                this.$Api.messHint(`${data.detail}`);                                        }                                })                                .catch(err => {                                         this.$Api.messHint(`${err.errMsg}`);                                });                }

UtilTools中封装的方法

import Request from './request.js';const request = new Request().http;hostAddress:'xxxx',getDataFromWeb:function(data){                return request(`${this.hostAddress}`,data,'POST')        }

点击获取验证码按钮，调用后端接口，后端接口封装了调用阿里云短信的方法，向当前传入的手机号中发送固定的模板信息，验证码可由后端随机生成写入到模板中。

上述内容就是微信小程序如何实现短信登录，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。