The project requires the addition of SMS login and face recognition login functions. Let's implement the SMS login function below 1. Interface effect preview2.uView installation uView official website: https://www.uviewui.com 3.uView configuration3.1 Introduction in main.jsimport uView from "uview-ui"; Vue.use(uView); 3.2 Introduction to uni.scss@import 'uview-ui/theme.scss'; 3.3 Introduction in App.vue<style lang="scss"> /* Note that it should be written in the first line, and the lang="scss" attribute should be added to the style tag*/ @import "uview-ui/index.scss"; </style> 3.4 Configuration in pages.json"easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue", }, Note that if there are other configurations in easycom, it may cause the uView style to fail to load. 4. SMS login interface<template> <view class="wrap"> <view class="login"> <view class="login-logo"> <image src="../../../../static/img/logo.png" mode=""></image> </view> <view class="form-view"></view> </view> <u-form :model="model" ref="uForm"> <u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" :label-position="labelPosition" label="Mobile number" prop="phone" label-width="150"> <u-input :border="border" placeholder="Please enter your phone number" v-model="model.phone" type="number"></u-input> </u-form-item> <u-form-item :label-position="labelPosition" label="Verification code" prop="code" label-width="150"> <u-input :border="border" placeholder="Please enter the verification code" v-model="model.code" type="text"></u-input> <u-button slot="right" type="success" size="mini" @click="getCheckNum">{{ codeTips }}</u-button> </u-form-item> <view class="bot-view"> <button class="btn btn-submit" @click="doLogin">Login</button> </view> </u-form> <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> </view> </template> 5. Click to get the verification code interfaceimport 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}`); }); } Methods encapsulated in UtilTools import Request from './request.js'; const request = new Request().http; hostAddress:'xxxx', getDataFromWeb:function(data){ return request(`${this.hostAddress}`,data,'POST') } Click the Get Verification Code button to call the backend interface. The backend interface encapsulates the method of calling Alibaba Cloud SMS and sends a fixed template information to the currently passed mobile phone number. The verification code can be randomly generated by the backend and written into the template. This is the end of this article about the practical implementation of SMS login in WeChat Mini Program. For more relevant content on SMS login in Mini Program, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML table tag tutorial (7): background color attribute BGCOLOR
>>: Detailed explanation of how to deploy SpringBoot in docker and replace jar packages
Six steps of JDBC: 1. Register the driver 2. Get ...
Firewall A firewall is a set of rules. When a pac...
1. v-on event monitoring To listen to DOM events,...
I would like to share with you the graphic tutori...
Table of contents The origin of JSBridge The bidi...
In the latest HTML standard, there is a calc CSS e...
A brief analysis of rem First of all, rem is a CS...
Preface I made a loading style component before. ...
Professional web design is complex and time-consu...
Installation environment: CentOS7 64-bit MINI ver...
Preface: As a giant in the IT industry, Microsoft...
When making a form in a recent project, I need to...
Table of contents 1. MHA 1. Concept 2. Compositio...
CSS3 achieves cool 3D rotation perspective 3D ani...
HTML structure <body> <div class="w...