WeChat applet implements SMS login in action

WeChat applet implements SMS login in action

The project requires the addition of SMS login and face recognition login functions. Let's implement the SMS login function below

1. Interface effect preview

2.uView installation

uView official website: https://www.uviewui.com
Take npm installation as an example, execute: npm install uview-ui

3.uView configuration

3.1 Introduction in main.js

import 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 interface

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}`);
				});
		}

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:
  • Implementation of a simple login page for WeChat applet (with source code)
  • How to maintain session in WeChat applet
  • Solution to the inconsistency problem of sessionid in WeChat applet
  • WeChat applet development one-click login to obtain session_key and openid instance
  • Solution to invalid session key for WeChat applet login

<<:  HTML table tag tutorial (7): background color attribute BGCOLOR

>>:  Detailed explanation of how to deploy SpringBoot in docker and replace jar packages

Recommend

mysql 8.0.19 winx64.zip installation tutorial

This article records the installation tutorial of...

Example of using nested html pages (frameset usage)

Copy code The code is as follows: <!DOCTYPE ht...

In-depth understanding of javascript class array

js array is probably familiar to everyone, becaus...

How to uninstall MySQL 5.7 on CentOS7

Check what is installed in mysql rpm -qa | grep -...

Detailed tutorial on Tomcat installation and deployment in Windows 10

Table of contents 1 Java environment configuratio...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...

In-depth understanding of the use of CSS clear:both

clear:both is used to清除浮動This is the impression I...

Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS

Installing MySQL 5.7 from TAR.GZ on Mac OS X Comp...

JavaScript Design Pattern Command Pattern

The command pattern is a behavioral design patter...

javascript:void(0) meaning and usage examples

Introduction to void keyword First of all, the vo...

Linux remote login implementation tutorial analysis

Linux is generally used as a server, and the serv...

How to make a List in CocosCreator

CocosCreator version: 2.3.4 Cocos does not have a...

Detailed explanation of VUE's data proxy and events

Table of contents Review of Object.defineProperty...

How to detect Ubuntu version using command line

Method 1: Use the lsb_release utility The lsb_rel...

How to monitor the running status of docker container shell script

Scenario The company project is deployed in Docke...