广告位联系
返回顶部
分享到

微信小程序实现短信登录的方法

微信小程序 来源:转载 作者:秩名 发布时间:2021-10-17 23:07:06 人浏览
摘要

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

1.界面效果预览



2.uView安装

uView官网:
以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">
    /* 注意要写在第一行,同时给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}`);
                    }
                })
                .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')
    }

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/qq_16497617/article/details/120781899
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计