- 借助云开发实现小程序的登陆注册功能
我们在开发小程序时,难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。 老规矩,先看效果图 [图片] 通过上图可以看到我们主要实现了以下功能 1,账号密码登陆 2,账号密码注册 3,退出登陆 下面我们就来看下具体实现 一,原理讲解 因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验。所以我们必须要有数据库。如果用传统的数据库来做,比较麻烦,所以我们今天就借助小程序云开发数据库来做。 二,编写一个云开发的小程序 云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》 编写云开发的时候有几点注意的事项给大家说下 1,要先注册小程序获取appid,因为只有appid你才可以使用云开发 2,记得在app.js里初始化云开发环境id,如下图 [图片] 三,设置用户存储用户的数据库(集合) 在云开发管理后台,点击数据库,然后点击 + 号,添加user集合(数据表),如下图 [图片] 四,编写注册代码 代码其实很简单,我这里把对应的代码给大家贴出来。 1,注册页面的wxml文件 [图片] 2,注册页面的js文件 [代码]Page({ data: { name: '', zhanghao: '', mima: '' }, //获取用户名 getName(event) { console.log('获取输入的用户名', event.detail.value) this.setData({ name: event.detail.value }) }, //获取用户账号 getZhangHao(event) { console.log('获取输入的账号', event.detail.value) this.setData({ zhanghao: event.detail.value }) }, // 获取密码 getMiMa(event) { console.log('获取输入的密码', event.detail.value) this.setData({ mima: event.detail.value }) }, //注册 zhuce() { let name = this.data.name let zhanghao = this.data.zhanghao let mima = this.data.mima console.log("点击了注册") console.log("name", name) console.log("zhanghao", zhanghao) console.log("mima", mima) //校验用户名 if (name.length < 2) { wx.showToast({ icon: 'none', title: '用户名至少2位', }) return } if (name.length > 10) { wx.showToast({ icon: 'none', title: '用户名最多10位', }) return } //校验账号 if (zhanghao.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } //校验密码 if (mima.length < 4) { wx.showToast({ icon: 'none', title: '密码至少4位', }) return } //注册功能的实现 wx.cloud.database().collection('user').add({ data: { name: name, zhanghao: zhanghao, mima: mima }, success(res) { console.log('注册成功', res) wx.showToast({ title: '注册成功', }) wx.navigateTo({ url: '../login/login', }) }, fail(res) { console.log('注册失败', res) } }) } }) [代码] 3,注册页面的wxss(样式)页面很简单 [图片] 我这只做下简单的样式美化,主要还是来实现功能的。 五,编写登陆页面的代码 1,登陆页面的wxml文件 [图片] 2,登陆页的js(逻辑编写)页 [代码]Page({ data: { zhanghao: '', mima: '' }, //获取输入的账号 getZhanghao(event) { //console.log('账号', event.detail.value) this.setData({ zhanghao: event.detail.value }) }, //获取输入的密码 getMima(event) { // console.log('密码', event.detail.value) this.setData({ mima: event.detail.value }) }, //点击登陆 login() { let zhanghao = this.data.zhanghao let mima = this.data.mima console.log('账号', zhanghao, '密码', mima) if (zhanghao.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } if (mima.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } //登陆 wx.cloud.database().collection('user').where({ zhanghao: zhanghao }).get({ success(res) { console.log("获取数据成功", res) let user = res.data[0] console.log("user", user) if (mima == user.mima) { console.log('登陆成功') wx.showToast({ title: '登陆成功', }) // wx.navigateTo({ // url: '../home/home?name=' + user.name, // }) wx.navigateTo({ url: '/pages/me/me', }) //保存用户登陆状态 wx.setStorageSync('user', user) } else { console.log('登陆失败') wx.showToast({ icon: 'none', title: '账号或密码不正确', }) } }, fail(res) { console.log("获取数据失败", res) } }) } }) [代码] 3,样式比较简单 [图片] 六,编写个人中心登陆和未登陆状态的展示,含退出登陆功能 1,wxml文件如下 [图片] 2,js文件如下,退出登陆和保存登陆状态也在里面 [代码]Page({ data: { loginOK: false }, //去登陆页 denglu() { wx.navigateTo({ url: '/pages/login/login', }) }, //去注册页 zhuce() { wx.navigateTo({ url: '/pages/index/index', }) }, onShow() { let user = wx.getStorageSync('user') if (user && user.name) { this.setData({ loginOK: true, name: user.name }) } else { this.setData({ loginOK: false }) } }, //退出登陆 tuichu() { wx.setStorageSync('user', null) let user = wx.getStorageSync('user') if (user && user.name) { this.setData({ loginOK: true, name: user.name }) } else { this.setData({ loginOK: false }) } } }) [代码] 3,个人中心登陆成功的状态如下 [图片] 到这里我们就完整的实现了小程序的登陆注册功能了,虽然比较简单,没有做密码加密等一些复杂的操作,但是我们基本的登陆注册原理就是这样实现的,你只有先把最基础的登陆注册功能实现,学习后面复杂的登陆注册,验证码登陆等一系列知识,才会游刃有余。 我把这节登陆注册功能的实现录制了一套课程出来,感兴趣的同学可以去看下,支持下石头哥。 https://edu.csdn.net/course/play/26948/348188
2019-12-09 - 【分享】小程序全景图片展示的几个方案
概述 以下方案均需要有全景照片后方可实现(自己拍的 or 网上下载)。 一、方案一:自建网页 自建网页,自己有服务器,可以用全景图转换器(如pano2vr)直接生成html代码,然后通过 webview 嵌入到小程序访问。 建议:图片可以放在七牛云或其他地方,CDN 能有效优化网页中全景图的打开速度(一般全景图片体积都是较大的)。 体验效果: [图片] 二、方案二:720yun 使用 720云,这也是大部分全景摄影社或爱好者最习惯用的平台了。他们也提供了小程序打开全景图的方案。但核心还是使用 webview,并且需要开通会员,具体参考: 建议:经费足的可以考虑一下这个方案,毕竟720云的操作和体验是真的是十分优秀的! 参考:小程序校验指南 | 720yun https://bbs2.720yun.com/article?id=687 [图片] 三、方案三:小程序插件 以上两种方案都是借助webview来实现,也就是说必须要企业或其他单位的主体才能使用。个人的小程序如果要实现全景,建议使用这位大佬写的小程序插件——wxPano。项目一直在不断更新中,而且还免费,很值得期待! 建议:①该插件限制全景图片分辨率需在2048*1024及以下,因此无法打开画质很高清的全景图片。②插件代码包超过1MB,对小程序打开速度有微小的影响。 链接:https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx386c038238531f87 [图片] 结语 以上来自我自己开发时的一些经验,欢迎前辈老师们补充。 也欢迎社区三连——点赞收藏关注!!
2019-10-24