Shulou(Shulou.com)06/03 Report--

This article shows you how to achieve WeChat Mini Programs SMS login, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

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

1. Preview of interface effect

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 main.js introduces import uView from "uview-ui"; Vue.use (uView); 3.2 uni.scss introduces @ import 'uview-ui/theme.scss';3.3 App.vue introduces / * Note to write on the first line, and add the lang= "scss" attribute * / @ import "uview-ui/index.scss" to the style tag 3.4 configure "easycom" in pages.json: {"^ 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 {{codeTips}} login 5. Click the API 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 button to get CAPTCHA, and call the backend API. The backend API encapsulates the method of calling Ali Cloud SMS and sends fixed template information to the current mobile phone number. The CAPTCHA can be randomly generated and written into the template by the backend.

The above content is WeChat Mini Programs how to achieve SMS login, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.