
本章主要介绍如何使用云开发完成用户登录功能。小程序云开发使小程序的开发更加快捷、方便,同时弱化了后端概念,开发者无需搭建服务器即可使用。下面我介绍下小程序登录之云开发如何实现
工具/原料
1.微信开发者工具、appid、vant组件库
方法/步骤
2.首先在微信公众平台下载微信开发者工具:https://mp.weixin.qq.com/,下载过程中直接点下一步即可,完成后添加小程序需要用到的appid,appid可在微信公众平台注册的账号信息内查看,百度上有很多这些教程,这里就不再多说了。然后填入appid,并选择使用云开发。
3.进入后开通云存储,直接点击开通即可。完成后引用vant组件库写一个简单的登录框,vant组件库链接地址:https://youzan.github.io/vant-weapp/,然后按照vant官网说明进行配置即可,配置完成后将代码直接复制到项目中即可,是不是非常简单。
4.这里我简单写了一下前端界面,vant官网中最底部给出了所有关于vant各个组件的api,这里我简要说一下bind:blur及value。bind:blur:输入框失焦时触发;value:当前输入的值。在index.js中配置好data,即页面中经常改动或使用的内容,然后如图写好用户名和密码失焦函数
5.下一步就是重点,即登录按钮点击事件,点击云开发控制台中数据库一项,点击集合名称旁边的“+”,新建数据库,将用户注册的信息存储到数据库中。登录按钮点击事件处理的第一步:查询数据库中的username(账号/用户名)、password(密码),第二部:判断用户名和密码是否存在,如果用户名和密码存在并且匹配,则弹出“登录成功”,进而跳转至登录成功后的页面,弹出框在微信公众平台有详细介绍即“wx.showToast”,跳转功能“wx.navigateTo”,url中填入要跳转的页面。然后在catch中处理账号或密码不匹配或账号不存在的情况。以上就是小程序登录之云开发实现的过程,是不是很简单呢。
注意事项
6.vant组件库简化了前端代码的编写,如果不想使用第三方组件库也可以自己写前端代码开发文档在不断更新、如有变更请按开发文档规则进行编写













