uniappuniclouduni-id-pages 配置邮箱教程安装uni-id-pages插件下载插件并导入HbuilderX修改/uni_modules/uni-id-pages/uniCloud/cloudfunctions/uni-id-co/module/verify/send-email-code.js文件内容,将测试代码注释添加发送邮件代码// -- 测试代码// await require(../../lib/utils/verify-code)// .setEmailVerifyCode.call(this, {// email,// code: 123456,// expiresIn: 180,// scene// })// return {// errCode: uni-id-invalid-mail-template,// errMsg: 已启动测试模式直接使用123456作为邮箱验证码即可。\n如果是正式项目需自行实现发送邮件的相关功能// }// -- 测试代码//发送邮件--需自行实现awaitrequire(../../lib/utils/verify-code).setEmailVerifyCode.call(this,{email,code:,expiresIn:180,scene})return{errCode:0,errMsg:邮箱验证码已经生成}// 发送邮件/uniCloud/cloudfunctions右键该文件添加云对象输入email右键email文件夹在集成终端打来输入npm install nodemailer修改package.json,添加cloudfunction-config: {runtime: Nodejs18}选项目前最高支持nodejs18{name:email,dependencies:{nodemailer:^8.0.0},extensions:{uni-cloud-jql:{}},cloudfunction-config:{runtime:Nodejs18}}/uniCloud/cloudfunctions/email目录下编写index.obj.js代码如下// 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj// jsdoc语法提示教程https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/129// 导入发送邮件的依赖模块constnodemailerrequire(nodemailer);// 谁发送邮件,改为自己的要发送邮件的邮箱constFROM_EMAILyour_email;// 配置发送类型consttransporternodemailer.createTransport({host:smtp.163.com,//邮箱服务器 这里我用的163邮箱 smtp.qq.com smtp.163.comport:465,//邮箱使用端口secure:true,//是否使用默认的465端口auth:{user:FROM_EMAIL,// 自己的授权密钥去自己邮箱获取pass:**********}});// 编写发送邮件的方法functionsendMail(option){returnnewPromise((resolve,reject){nodemailer.createTestAccount((err){if(err)returnreject(创建失败);transporter.sendMail(option,(error){// console.log(失败的原因:,error);if(error)returnreject(发送失败);resolve({code:200,msg:发送成功});});})})}// 获取集合的引用constdbuniCloud.databaseForJQL();constdbCmddb.command// 获取 opendb-verify-codes 集合的引用constverifyCodeCollectiondb.collection(opendb-verify-codes);module.exports{_before:function(){// 通用预处理器// 删除该邮箱的所有验证码记录verifyCodeCollection.where({expired_date:dbCmd.lt(Date.now())}).remove();},/** * sendEmail方法描述 * param {string} email 邮箱号 * returns {object} 返回值描述 */asyncsendEmail(email){// 给谁发送邮件(用户邮箱)constTO_EMAILemail;// 验证码constverifyCodeawaitverifyCodeCollection.where({email,expired_date:dbCmd.gt(Date.now())}).get()// console.warn(verifyCode, verifyCode)if(verifyCode.data.length0){// 以下发送邮件的信息constemail_HTML{title:测试邮箱---邮箱验证码,body:h1您好/h1 p stylefont-size: 18px;color:#000; 您的验证码为 span stylefont-size: 16px;color:#f00;b${verifyCode.data[0].code}/b,/span p您当前正在测试邮箱账号验证码告知他人将会导致数据信息被盗请勿泄露!/p /p p stylefont-size: 1.5rem;color:#999;60秒内有效/p}letoption{from:FROM_EMAIL,// 发件人地址to:TO_EMAIL,// 收件人地址多个收件人可以使用逗号分隔subject:email_HTML.title,// 邮件标题html:email_HTML.body// 邮件内容}// 执行发送邮件的方法returnawaitsendMail(option);}else{returnnewPromise((resolve,reject)reject({code:400,msg:验证码已过期}))}}}调整uni_modules/uni-id-pages/pages/register/register-by-email.vue的代码如下!-- 邮箱验证码注册 -- template view classuni-content match-media :min-width690 view classlogin-logo image :srclogo/image /view !-- 顶部文字 -- text classtitle title-box邮箱验证码注册/text /match-media uni-forms refform :valueformData :rulesrules validate-triggersubmit err-show-typetoast uni-forms-item nameemail required uni-easyinput :inputBorderfalse :focusfocusEmail blurfocusEmail false classinput-box placeholder请输入邮箱 v-modelformData.email trimboth / /uni-forms-item uni-forms-item namenickname uni-easyinput :inputBorderfalse :focusfocusNickname blurfocusNickname false classinput-box placeholder请输入用户昵称 v-modelformData.nickname trimboth / /uni-forms-item uni-forms-item namepassword v-modelformData.password required uni-easyinput :inputBorderfalse :focusfocusPassword blurfocusPassword false classinput-box maxlength20 :placeholder请输入 (config.passwordStrength weak?6:8) -16位密码 typepassword v-modelformData.password trimboth / /uni-forms-item uni-forms-item namepassword2 v-modelformData.password2 required uni-easyinput :inputBorderfalse :focusfocusPassword2 blurfocusPassword2 false classinput-box placeholder再次输入密码 maxlength20 typepassword v-modelformData.password2 trimboth / /uni-forms-item uni-forms-item namecode uni-id-pages-email-form refshortCode :emailformData.email typeregister :focusCaptchaInputtrue v-modelformData.code /uni-id-pages-email-form /uni-forms-item uni-id-pages-agreements scoperegister refagreements /uni-id-pages-agreements button classuni-btn typeprimary clicksubmit注册/button button clicknavigateBack classregister-back返回/button match-media :min-width690 view classlink-box text classlink clicktoLogin已有账号点此登录/text /view /match-media /uni-forms /view /template script import rules from ./validator.js; import mixin from /uni_modules/uni-id-pages/common/login-page.mixin.js; import config from /uni_modules/uni-id-pages/config.js import passwordMod from /uni_modules/uni-id-pages/common/password.js const uniIdCo uniCloud.importObject(uni-id-co) export default { mixins: [mixin], data() { return { formData: { email: , nickname: , password: , password2: , code: }, rules: { email: { rules: [{ required: true, errorMessage: 请输入邮箱, },{ format:email, errorMessage: 邮箱格式不正确, } ] }, nickname: { rules: [{ minLength: 3, maxLength: 32, errorMessage: 昵称长度在 {minLength} 到 {maxLength} 个字符, }, { validateFunction: function(rule, value, data, callback) { // console.log(value); if (/^1\d{10}$/.test(value) || /^(\w-*\.*)(\w-?)(\.\w{2,})$/.test(value)) { callback(昵称不能是手机号或邮箱) }; if (/^\d$/.test(value)) { callback(昵称不能为纯数字) }; if(/[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/.test(value)){ callback(昵称不能包含中文) } return true } } ], label: 昵称 }, ...passwordMod.getPwdRules(), code: { rules: [{ required: true, errorMessage: 请输入邮箱验证码, }, { pattern: /^.{6}$/, errorMessage: 邮箱验证码不正确, } ] } }, focusEmail:false, focusNickname:false, focusPassword:false, focusPassword2:false, logo: /static/logo.png } }, onReady() { this.$refs.form.setRules(this.rules) }, onShow() { // #ifdef H5 document.onkeydown event { var e event || window.event; if (e e.keyCode 13) { //回车键的键值为13 this.submit() } }; // #endif }, methods: { /** * 触发表单提交 */ submit() { this.$refs.form.validate().then((res) { if (this.needAgreements !this.agree) { return this.$refs.agreements.popup((){ this.submitForm(res) }) } this.submitForm(res) }).catch((errors) { let key errors[0].key key key.replace(key[0], key[0].toUpperCase()) // console.log(key); this[focuskey] true }) }, submitForm(params) { uniIdCo.registerUserByEmail(this.formData).then(e { // console.log(e); uni.navigateTo({ url: /uni_modules/uni-id-pages/pages/login/login-withpwd, complete: (e) { // console.log(e); } }) }) .catch(e { // console.log(e); console.log(e.message); }) }, navigateBack() { uni.navigateBack() }, toLogin() { uni.navigateTo({ url: /uni_modules/uni-id-pages/pages/login/login-withpwd }) } } } /script style langscss import /uni_modules/uni-id-pages/common/login-page.scss; media screen and (max-width: 690px) { .uni-content{ margin-top: 15px; } } media screen and (min-width: 690px) { .uni-content{ padding: 30px 40px; max-height: 650px; } .link-box { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: space-between; margin-top: 10px; } .link { font-size: 12px; } } .uni-content ::v-deep .uni-forms-item__label { position: absolute; left: -15px; } button { margin-top: 15px; } /style修改uni_modules/uni-id-pages/components/uni-id-pages-email-form/uni-id-pages-email-form.vue的142行以下的代码constuniIdCouniCloud.importObject(uni-id-co,{customUI:true})// 导出email对象constemailuniCloud.importObject(email)uniIdCo.sendEmailCode({email:this.email,scene:this.type,captcha:this.captcha}).then(result{// 自己修改的代码email.sendEmail(this.email).then(result{uni.showToast({title:邮箱验证码发送成功,icon:none,duration:3000});}).catch(e{uni.showToast({title:邮箱验证码发送失败,icon:none,duration:3000});})// 自己修改的代码this.reverseNumberNumber(this.count);this.getCode();}).catch(e{if(e.codeuni-id-invalid-mail-template){this.modelValue123456uni.showToast({title:已启动测试模式,详情【控制台信息】,icon:none,duration:3000});console.warn(e.message);}else{this.getImageCaptcha()this.captchauni.showToast({title:验证码输入错误,请稍后重试,icon:none,duration:3000});}})},修改登录页uni_modules/uni-id-pages/pages/login/login-withpwd.vue!-- 账号密码登录页 -- template view classuni-content view classlogin-logo image :srclogo/image /view !-- 顶部文字 -- text classtitle title-box邮箱登录/text uni-forms uni-forms-item nameusername uni-easyinput :focusfocusUsername blurfocusUsername false classinput-box :inputBorderfalse v-modelusername placeholder邮箱 trimall / /uni-forms-item uni-forms-item namepassword uni-easyinput :focusfocusPassword blurfocusPassword false classinput-box clearable typepassword :inputBorderfalse v-modelpassword placeholder请输入密码 trimall / /uni-forms-item /uni-forms uni-captcha v-ifneedCaptcha focus refcaptcha scenelogin-by-pwd v-modelcaptcha / !-- 带选择框的隐私政策协议组件 -- uni-id-pages-agreements scopelogin refagreements/uni-id-pages-agreements button classuni-btn typeprimary clickpwdLogin登录/button !-- 忘记密码 -- view classlink-box view v-if!config.isAdmin text classforget忘记了/text text classlink clicktoRetrievePwd找回密码/text /view text classlink clicktoRegister{{config.isAdmin ? 注册管理员账号: 注册账号}}/text !-- text classlink clicktoRegister v-if!config.isAdmin注册账号/text -- /view !-- 悬浮登录方式组件 -- uni-id-pages-fab-login refuniFabLogin/uni-id-pages-fab-login /view /template script import mixin from /uni_modules/uni-id-pages/common/login-page.mixin.js; const uniIdCo uniCloud.importObject(uni-id-co, { errorOptions: { type: toast } }) export default { mixins: [mixin], data() { return { password: , username: , captcha: , needCaptcha: false, focusUsername: false, focusPassword: false, logo: /static/logo.png } }, onShow() { // #ifdef H5 document.onkeydown event { var e event || window.event; if (e e.keyCode 13) { //回车键的键值为13 this.pwdLogin() } }; // #endif }, methods: { // 页面跳转找回密码 toRetrievePwd() { let url /uni_modules/uni-id-pages/pages/retrieve/retrieve-by-email //如果刚好用户名输入框的值为手机号码就把它传到retrieve页面根据该手机号找回密码 if (/^1\d{10}$/.test(this.username)) { url ?phoneNumber${this.username} } uni.navigateTo({ url }) }, /** * 密码登录 */ pwdLogin() { if (!this.password.length) { this.focusPassword true return uni.showToast({ title: 请输入密码, icon: none, duration: 3000 }); } if (!this.username.length) { this.focusUsername true return uni.showToast({ title: 请输入邮箱, icon: none, duration: 3000 }); } if (this.needCaptcha this.captcha.length ! 4) { this.$refs.captcha.getImageCaptcha() return uni.showToast({ title: 请输入验证码, icon: none, duration: 3000 }); } if (this.needAgreements !this.agree) { return this.$refs.agreements.popup(this.pwdLogin) } let data { password: this.password, captcha: this.captcha } if (/^1\d{10}$/.test(this.username)) { data.mobile this.username } else if (//.test(this.username)) { data.email this.username } else { data.username this.username } uniIdCo.login(data).then(e { this.loginSuccess(e) }).catch(e { if (e.errCode uni-id-captcha-required) { this.needCaptcha true } else if (this.needCaptcha) { //登录失败自动重新获取验证码 this.$refs.captcha.getImageCaptcha() } }) }, /* 前往注册 */ toRegister() { uni.navigateTo({ url: this.config.isAdmin ? /uni_modules/uni-id-pages/pages/register/register-admin : /uni_modules/uni-id-pages/pages/register/register-by-email, fail(e) { console.error(e); } }) } } } /script style langscss scoped import /uni_modules/uni-id-pages/common/login-page.scss; media screen and (min-width: 690px) { .uni-content { height: auto; } } .forget { font-size: 12px; color: #8a8f8b; } .link-box { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; justify-content: space-between; margin-top: 20px; } .link { font-size: 12px; } .title{ // 居中 text-align: center; } /style