uni-app 结合云函数开发小程序博客（二）：云函数实现登录注册

最新推荐文章于 2024-06-22 20:23:37 发布

一只图雀

最新推荐文章于 2024-06-22 20:23:37 发布

阅读量3.1k

点赞数 14

本文链接：https://blog.csdn.net/weixin_46042722/article/details/106111908

版权

本文介绍如何使用uni-app结合云函数开发小程序的登录注册功能。通过HbuilderX创建页面，封装云函数操作，实现前端请求与云数据库交互。详细讲解了登录界面、注册界面的实现，以及云函数的编写和微信openid登录的集成。

摘要由CSDN通过智能技术生成

在这里插入图片描述

我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦

如果你想快速了解如何使用，欢迎阅读我们的教程文档哦

本文由图雀社区认证作者 测不准 使用 Tuture 写作工具写作而成，图雀社区将连载其 uni-app 结合云函数开发小程序博客系列，感谢作者的优质输出，让我们的技术世界变得更加美好😆

不好意思大家，个人原因拖了一周时间才发表第二篇，没想到还有朋友在支持，非常感谢和抱歉。第一篇中已经引入了第三方样式，实现了主题和语言的切换；本篇主要开始页面的搭建和云函数创建，前端代码通过uniCloud.callFunction()方法调用云函数，云函数中可执行js运算、读写云数据库（NoSQL），直接返回json数据，也可以使用npm安装第三方依赖。服务端环境安装配置和安全等方面完全不需要去考虑。

登录界面

我们开发uni-app的工具是HbuilderX，在 pages 文件夹右键新建页面，取名login，这时会生成 /pages/login/login.vue，会自动在 pages.json 文件中添加如下：（新增的文件会放在 pages 数组最后）

// 以下代码在 pages.json 中
{
   
       "path" : "pages/login/login",
       "style" : {
   }
}

定义 page 背景

// 以下代码在 login.vue 中
// 我只在登录和注册界面填充了背景色，其他页面使用默认白色，如果想定义全局的page背景，在全局css文件中定义，再在app.vue文件中引入样式

page {
   
      background: #999;
}

字体大小和边距直接使用 colorui 自带样式，自己的样式可以在 style 中书写

// 以下 字体大小 文件在 colorui main.css 的 3748 行
// 统一一个类名，不需每个vue界面单独定义，解析重复的东西
.text-xs {
   
	font-size: 20upx;
}
.text-sm {
   
	font-size: 24upx;
}
.text-df {
   
	font-size: 28upx;
}
.text-lg {
   
	font-size: 32upx;
}
.text-xl {
   
	font-size: 36upx;
}

// 以下代码在 colorui/main.css 的 2999行 （padding同理）

.margin-0 {
   
	margin: 0;
}
.margin-xs {
   
	margin: 10upx;
}
.margin-sm {
   
	margin: 20upx;
}
.margin {
   
	margin: 30upx;
}

// 由于 使用 flex 布局，可能会使用到 auto 的场景， 自己加了几个样式

.margin-top-auto {
   
	margin-top: auto;
}
.margin-bottom-auto {
   
	margin-bottom: auto;
}
.margin-left-auto {
   
	margin-left: auto;
}
.margin-right-auto {
   
	margin-right: auto;
}

页面代码如下（事件绑定 @tap，移动端点击，后面使用）

<view class="login">
        // lang. 第一节中做的全局混入，国际化
	<view class="login-title text-white text-sl text-center">{
  {lang.login_title}}</view>
	<view class="form-wrapper flex flex-direction margin-0-auto">
		<view class="bg-white radius flex flex-direction align-center">
			<view class="login-form-title text-bold text-xl margin-top-xl margin-bottom-xl">{
  {lang.login_form_title}}</view>
			<view class="login-form-username border-3-ccc margin-top-xs margin-bottom-xl">
				<input v-model='form.username' class="w-100 h-100 text-center text-df" type="text" value="" :placeholder="lang.login_form_username_placeholder" />
			</view>
			<view class="login-form-password border-3-ccc margin-top-xs margin-bottom-xl">
				<input v-model="form.password" class="w-100 h-100 text-center text-df" type="password" value="" :placeholder="lang.login_form_password_placeholder" />
			</view>

			<button type="primary" @tap='login' class="cu-btn login-btn text-xl margin-top-sm" :class="['bg-' + themeColor.name]">{
  {lang.login_submit_btn}}</button>
			<view @tap='loginWithWechat' class="login-with-wechat text-df margin-top-sm text-center text-btn" :class="['text-'+themeColor.name]">
				{
  {lang.login_with_wechat}}
			</view>
		</view>

		<view @tap='register' class="login-with-wechat text-df margin-top-auto text-white text-center text-btn">
			{
  {lang.login_register}}
		</view>
	</view>
	<open-data type="userAvatarUrl"></open-data>
	<open-data type="userNickName"></open-data>
	<button type="default" @getuserinfo="getuserinfo" open-type="getUserInfo">getUserInfo</button>
</view>

// 如果没安装 scss 插件， 点击菜单中的设置 安装插件
// (小编自己小改了下样式， 官方推荐使用 rpx 单位，设计稿为 750px，单位长度自适应。手机端，或者平板直接兼容)
.login {
	.login-title {
		padding: 212rpx 0 50rpx 0;
	}

	.form-wrapper {
		width: 580rpx;
		height: 808rpx;

		.bg-white {
			height: 660rpx;

			.login-form-username {
				width: 400rpx;
				height: 88rpx;
				border-radius: 44rpx;
				overflow: hidden;
			}

			.login-form-password {
				@extend .login-form-username;
			}

			.login-btn {
				width: 400rpx;
				height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
}

简单封装操作

根目录下新建/utils/plugins.js，在main.js中引入 require('./utils/plugins.js')
放入 vuex

// 以下内容在 /utils/plugins.js 中
import Vue from 'vue'
import store from '../store';
// uni中的store不需要注册到main.js的 new Vue 中
Vue.prototype.$store = store;

封装 toast 提示框

// 以下内容在 /utils/plugins.js 中
Vue.prototype.$toast = (title, duration = 1500) => uni.showToast({
   
	icon: 'none',
	title,
	duration
})

封装路由跳转 navigateTo， switchTab，reLaunch

Vue.prototype.$router = (url) => uni.navigateTo({
   
	url: '/pages' + url,
	animationType:"slide-in-left", // 跳转动画
	animationDuration: 800
})
// 跳转底部 tabbar 对应的页面
Vue.prototype.$switchTab = (url) => uni.switchTab({
   
	url: '/pages' + url
})
// 关闭其它页面，跳转
Vue.prototype.$relaunch = (url) => uni.reLaunch({
   
	url: '/pages' + url
})

封装云函数请求文档

Vue.prototype.$uniCloud = async (name, data) => {
   
	uni.showLoading()
	try{
   
		let res = await uniCloud.callFunction({
   
			name, // 云函数名字
			data // 传输数据
		})
		return res
	} catch(e) {
   
		return e
	} finally{
   
		uni.hideLoading()
	}
}

请求云函数

我们的根目录下有个 cloudfunctions-aliyun 文件夹，右键创建云函数，取名为 user，目录下会生成 user/index.js ，这个user 就是上文封装的云函数的名字。index.js 内容如下：

'use strict';
// 对云数据库的操作一定要是等待读取的， async await
exports.main = async (event, context) => {
   
  //event为客户端上传的参数  对应上传的 data 数据 {}
  console.log('event : ' + event)
  //返回数据给客户端
  return event
};

我们有了去操作云数据库的函数，也得有云数据库，初始化我们的云数据库，在 cloudfunctions-aliyun 文件夹下创建 db_init.json 文件（参考），json格式，因为我们做的是登录注册，所以创建 user 表（集合）

// user表
"user": {
   
	    "data": [ // 数据, 有两个字段，
			{
   
				"username": "admin",
				"password": "admin"
			}
	    ],
	    "index": [{
    // 索引
	        "IndexName": "username", // 索引名称
	        "MgoKeySchema": {
    // 索引规则
	            "MgoIndexKeys": [{
   
	                "Name": "username", // 索引字段
	                "Direction": "1" // 索引方向，1：ASC-升序，-1：DESC-降序
	            }],
	            "MgoIsUnique": true// 索引是否唯一
	        }
	    }]
	}
}

我们云数据库有了，操作函数也有了，需要有个地方存储 ---- 服务空间（请参考官网基本概念理解）

右键cloudfunctions-aliyun 文件夹，创建云服务空间，浏览器会自动打开web控制台，服务空间有个唯一标识id，修改好识别的服务空间名字。

右键cloudfunctions-aliyun 文件夹选择你创建的云服务空间，在user云函数上右键上传并运行；一方面可以上传，一方面可以检测函数中是否有错误。刷新web控制台，可以发现上传成功：

// 检验云函数是否正确  以下代码在  login.vue中
async onLoad() {
   
  await this.$uniCloud('user', {
   name: 'uncertainty'})
}
// 还记得我们的云函数吧，发送什么返回什么

右键db_init.json 文件，初始化云数据库，同样刷新web控制台，发现初始化成功，当然在编译器的控制台也有相关输出（云数据库的操作都可以web 端操作，创建，删除，新增等）

前端请求

// 以下代码在 login.vue 中
async login() {
   
	if (!this.form.openid) {
   
     // 不是微信登录，判断输入是否正确
		if (!this.form.username || !this.form.password) {
   
			this.$toast('请填写正确信息')
			return
		}
	} else {
   
		this.form.username = ''
		this.form.password =

最低0.47元/天解锁文章

一只图雀

关注

14
点赞
踩
53

收藏

觉得还不错? 一键收藏
0
评论
uni-app 结合云函数开发小程序博客（二）：云函数实现登录注册

我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦如果你想快速了解如何使用，欢迎阅读我们的教程文档哦本文由图雀社区认证作者测不准使用 Tuture 写作工具写作而成，图雀社区将连载其 uni-app 结合云函数开发小程序博客系列，感谢作者的优质输出，让我们的技术世界变得更加美好????不好意思大家，个人原因拖了一周时间才发表第二篇，没想到还有朋友在支持，非常感谢和抱歉。第一篇中已经引入了第三方样式，实现了主题和
复制链接

扫一扫