目錄

• 1.介面效果預覽
• 2.uView安裝
• 3.uView配置
• 3.1 main.中引入
• 3.2 uni.s中引入
• 3.3 App.中引入
• 3.4 pages.json中配置
• 4.簡訊登入介面
• 5.點選獲取驗證碼介面

專案要求增加簡訊登入及人臉識別登入功能，下面我們來實現下簡訊登入功能

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中引入

<style lang="scss">icriH;
	/* 注意要寫在第一行，同時給style標籤加入lang="scss"屬性 */
	@import "uview-ui/index.scss";
</style>

3.4 pages.json中配置

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

注意如果easycom中還有別的配置有可能會導致uView樣式無法載入

4.簡訊登入介面

<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="手機號碼"
                   prop="phone"
                   label-width="150">
        <u-input :border="border"
                 placeholder="請輸入手機號"
                 v-model="model.phone"
                 type="number"></u-input>
  
 
    </u-form-item>
      <u-form-item :label-position="labelPosition"
                   label="驗證碼"
                   prop="code"
                   label-width="150">
        <u-input :border="border"
                 placeholder="請輸入驗證碼"
                 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">登入</button>
      </view>
    </u-form>
    <u-verification-code seconds="60"
                         ref="uCode"
                         @change="codeChange"></u-verification-code>
  </view>
</template>

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}`);
					}
				})
				.www.cppcns.comcatch(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')
	}

點選獲取驗證碼按鈕，呼叫後端介面，後端介面封裝了呼叫阿里雲簡訊的方法，向當前傳入的手機號中傳送固定的模板資訊，驗證碼可由後端隨機生成寫入到模板中。

到此這篇關於微信小程式實現簡訊登入的實戰的文章就介紹到這了,更多相關小程式簡訊登入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！