微信小程序云开发 之 登录注册界面 详细教程
文章目录
- 前言
- 一、前期的准备（很重要）
- 1.程序的需求
- 2.微信开发者文档
- 3.数据库的设计
- 二、小程序设计阶段
- 1.选择开发方式
- 2.云开发
- 第一步：注册微信小程序，获取小程序的 AppID
- 第二步、创建小程序项目
- 第三、登录界面的设计
- 1.登录
- 2.注册
- 3.优化
- 附源码
前言
好久没更新博客了 ，最近做了一个云开发的小程序。过程之中遇到了很多问题，毕竟自己是学后端的。今天也参加了网易实习生的笔试题，感觉平时过于懒散 ，因为以后每天一更，牛客网每日一练，加油！接下来我将给大家分享自己制作小程序的步骤，避免大家踩坑。
源码附在最后
一、前期的准备（很重要）
1.程序的需求
一定要明白程序的需求是什么 ，需要做哪些方面的功能。
2.微信开发者文档
一定要学会看文档，当你是独自完成开发，看官方文档尤其重要，他会帮助你解决你所遇到的80%的问题。附官方文档连接：https://developers.weixin.qq.com/miniprogram/dev/framework/
3.数据库的设计
- 需求分析
- 概念结构设计
- 逻辑结构设计
- 数据库物理设计
- 数据库的实施
- 数据库运行与维护
一个完整的数据库需要完成这几步，这确实很重要，我当时在做程序时，更新了三次数据库结构，就是因为一开始没有把全部的需求理清楚，所以只能一改在改。
在线画图的工具
ProcessOn画图工具： https://www.processon.com
对于css样式
可以参考菜鸟教程：https://www.runoob.com
JavaScrip
可以参考Bootstrap中文文档JavaScript :https://v3.bootcss.com/javascript
颜色参数：
可以参考中国色： http://zhongguose.com
这些在制作小程序时都会有所帮助。
好了前几准备已经完毕，那么接下来打开你的微信开发者工具。
二、小程序设计阶段
1.选择开发方式
如果你是前端人员，你可以使用云开发，这里比较方便，没有太多的后端设计部分，如果你是后端开发人员建议不使用云开发，这样比较锻炼自己，我是出于需求，要快速上线，所以选择了云开发。
2.云开发
第一步：注册微信小程序，获取小程序的 AppID
进入注册界面：https://mp.weixin.qq.com
选择右下方的小程序 --> 前往注册
这里需要准备一个邮箱，一个邮箱只能申请一个小程序AppID，填写相关信息之后，进入个人页面
在完善小程序信息后，选择开发者设置，这里可以看到你的AppID,在项目中需要配置。
接下俩向下找到–>域名服务–>开通云开发–>同意相关文件–>之后你就可以看你的云开发环境ID，也需要在项目中配置。在获取小程序AppID以及云开发环境ID之后。打开微信开发者工具。
第二步、创建小程序项目
- 打开微信开发者工具，新建小程序，将获取的AppID填入。
- 创建完之后，在点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境 ID。
并且在开发者工具中打开源代码文件夹 miniprogram 里的 app.js，找到如下代码：
wx.cloud.init({// 在env中此填入云开发环境 ID, 环境 ID 可打开云控制台查看env: '',traceUser: true,})
```javascript
- 下载 Nodejs
这里官方文档给的比教详细：https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d
跟着官方文档把云函数部署完成后，就可以开始页面的编写了
第三、登录界面的设计
1.登录
登录：在js逻辑层，就需要我们对输入框中的信息和云数据库中 的信息进行匹配，匹配通过才可以进行下一个界面。那么在前端，我们需要用户输入已经存入数据的正确信息。 那么获取前端的输入框的数据，将其传递给js层在前端，我们需要绑定数据，使用bindinput绑定js层函数，输入时触发前端界面代码块：
<view class="inpname"><text>姓名：</text><input type="text" maxlength="8" cursor-spacing="180px" placeholder="输入姓名" model:value="{{name}}" bindinput="inpname" /></view><view class="inpnumber"><text>学号：</text><input type="number" maxlength="8" cursor-spacing="180px" placeholder="输入学号" model:value="{{number}}"bindinput="inpnumber"/></view>
js层代码块：
将前端获取输入信息传递给js层的data里面
data:{name:'',number:''
}inpname:function(event){this.setData({name:event.detail.value,})},inpnumber:function(event){this.setData({number:event.detail.value,})},然后将调用云数据，将输入的信息this.data.name与数据库的信息循环遍历进行匹配，当匹配成功时，进行下一页面。
注意： 很多同学，可能直接使用event.detail.value将其直接赋值给数据库的字段，这样绕开js层时不可取的。可以去看下框架内容。
2.注册
注册是往数据库里面添加一个新的用户信息，此时，我们不仅需要对输入的信息与数据库信息进行对比，看是否已经存在，当不存在时，直接向数据库添加数据，如果存在，则进行提示已被注册，注册失败。
const db = wx.cloud.database()const _ = db.command //获取数据库查询及更新指令db.collection("云数据库名").where({//_openid: app.globalData.openid }).field({ //查询后需要显示的字段信息uName:true,uNumber:true,create:true}) .get() //返回查询到的字段信息.then(res => { //与返回的信息进行匹配if(res.data.uName == this.data.name){console.log('注册失败')}else if(res.data.uName == this.data.number){console.log('注册失败')}else{ //当信息未必注册时，我们在将前端页面获取的信息加入数据库中db.collection("云数据库名").add({data:{ uName:this.data.name, //将获取的数据存入相应字段中uNumber:this.data.number,create:1}, success: (res) => {console.log('注册失败')},fail: (res) => {console.log('注册失败')}}) } }).catch(err => {console.log('注册失败')})}}
3.优化
在登录和注册界面需要右提示，且当用户某一项信息未填时，我们需要提示用户填写相应信息：
为此，我们需要在js层定义一个变量；
当获取的姓名为空时，将”姓名为空“赋值给变量，并在前端页面进行显示；
同理，当学号为空，注册成功，注册失败，登录失败等提示信息在不同的条件下赋值给该变量，使其在不同的条件下，在前端显示相应的信息。
代码如下：
定义变量 在data 中定义prompt
前端页面:
<view ><text>{{prompt}}</text></view>
js页面：
if (this.data.name== '') {this.setData({prompt: '姓名不能为空'})}else if (this.data.number == '') {this.setData({prompt: '学号不能为空'})}else {this.setData({prompt: ''})
这样对于信息的提方面就比较完善了。
附源码
大家可以自己去尝试，如果有问题欢迎和我交流！
<view class="frame"><view class="inpname"><text>姓名：</text><input type="text" maxlength="8" cursor-spacing="180px" placeholder="输入姓名" model:value="{{name}}" bindinput="inpname" /></view><view class="inpnumber"><text>学号：</text><input type="number" maxlength="8" cursor-spacing="180px" placeholder="输入学号" model:value="{{number}}"bindinput="inpnumber"/></view></view><view class="error"><text>{{prompt}}</text></view>
js页面：
const app = getApp()Page({data:{name:'',number:'',prompt: '',avatarUrl: './user-unlogin.png',userInfo: {},hasUserInfo: false,logged: false,takeSession: false,requestResult: '',canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') // 如需尝试获取用户信息可改},//页面初始化onLoad:function(openid){this.setData({prompt: ''})wx.login({success (res) {if (res.code) {//发起网络请求wx.request({url: 'https://test.com/onLogin',data: {code: res.code}})} else {console.log('登录失败！' + res.errMsg)}}})},inpname:function(event){this.setData({name:event.detail.value,})},inpnumber:function(event){this.setData({number:event.detail.value,})},//登录login:function(){this.setData({prompt: ''})let i=0if (this.data.name== '') {this.setData({prompt: '姓名不能为空'})}else if (this.data.number == '') {this.setData({prompt: '学号不能为空'})}else {this.setData({prompt: ''})const db = wx.cloud.database()const _ = db.command //获取数据库查询及更新指令db.collection("云函数名").where({}).field({uName:true,uNumber:true,create:true}).get() .then(res => {for(i=0;i<res.data.length;i++){if(this.data.name == res.data[i].uName){if(this.data.number == res.data[i].uNumber){if(res.data[i].create == 1){this.setData({prompt: ''})wx.navigateTo({ url: '../ /' //页面跳转})}else {this.setData({prompt: ''})wx.switchTab({url: '../ /'//跳转到主界面})} }else{this.setData({prompt: '姓名或学号输入错误1'})}}else{this.setData({prompt: '姓名或学号输入错误'})}}}).catch(err => {this.setData({prompt:''})})}},// 注册
enroll:function(){this.setData({prompt: ''})if (this.data.name == '') {this.setData({prompt: '姓名不能为空'})}else if (this.data.number == '') {this.setData({prompt: '学号不能为空'})}else {const db = wx.cloud.database()const _ = db.command //获取数据库查询及更新指令db.collection("云函数名").where({//_openid: app.globalData.openid }).field({uName:true,uNumber:true,create:true}).get() .then(res => { if(res.data.uName == this.data.name){this.setData({prompt:'姓名已被注册！'})}else if(res.data.uName == this.data.number){this.setData({prompt:'学号已被注册！'})}else{this.setData({prompt:''})db.collection("云函数名").add({data:{uName:this.data.name,uNumber:this.data.number,create:1}, success: (res) => {this.setData({prompt: '注册成功，请登录！'})},fail: (res) => {this.setData({prompt: '注册失败！'})}}) } }).catch(err => {this.setData({prompt:'注册失败，姓名或学号已被注册3'})})}}
})后续界面持续更新中，毕竟我是后端开发的，哪里写的不对欢迎评论区指点！
微信小程序云开发 之 登录注册界面 详细教程相关推荐
- 微信小程序 云开发 欢迎登录注册
提示:此文章相关代码在新版小程序上或许已经不可用!该小程序片段需要使用云函数,云函数具体内容参考github.需要使用云开发提供的数据库,相关的具体使用方法还请参考小程序云开发的相关最新文档.该部分代 ...
- 微信小程序云开发实例 源码 部署详细流程[自带管理后台]
项目介绍 小贝校招 项目是集校招资讯.内推.刷题.简历模板下载等功能于一体的小程序,基于微信原生+微信云开发+vant+colorui以及相关技术栈开发,自带图像云开发后台,不需要自己建网站. 源代码 ...
- 微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号 在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...
- 微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
- 微信小程序-云开发下的用户注册及用户登录逻辑
文章目录 一.前言 二.思路分析 三.这样做的好处 1.安全性 2.便捷性 3.健壮性 四.实现代码 1.创建集合.配置权限 2.实现代码(app.js) 五.一些疑惑 六.结语 一.前言 基于微信小 ...
- 小程序云开发实现登录与注册（附源码）
小程序云开发实现登录与注册(附源码) 1. 看效果 2.wxss <view class="v1"><!-- v2父容器 子view使用绝对布局 -->&l ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- 微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台 小秃僧 新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
- 微信小程序云开发项目——多肉植物销售小程序
前言 此项目为本人在大学的毕业设计作品,基于微信小程序云开发技术进行开发,暂未商用和托管.编写文章意在为求职做准备,亦乐于与大家进行经验交流分享,欢迎进行评论咨询哦. 简介 用户角色分为:一般顾客.商 ...
最新文章
- 【VS开发】【智能语音处理】Windows下麦克风语音采集
- Qt学习笔记，Qt国际化
- js实现一键复制到剪切板上_js实现各种复制到剪贴板的方法
- 在VS2012中实现ExtJS的智能提示
- Java 设计模式之 Observer 模式
- 《openstack-nova》use-novaclient 创建虚拟机（createvms.py）
- 6.企业应用架构模式 --- 会话状态
- lnmp团队开发环境docker环境搭建PHP7.2 mac系统为例
- 关于suitescript 无法读取Item Number Field
- Nginx教程(三) Nginx日志管理 （转）
- 基于python中selenium模块完成百度文库pdf文档下载
- 微信小程序分享给朋友和分享到朋友圈
- 开源CRM系统国内有哪些品牌做的好？
- 服务器打开网页图片显示红x,cacti无法显示图片，图片显红叉
- RxSwift 系列(八) -- Error Handing Operators
- Arturia黑五促销，仅剩一天
- HTML吸引人眼球的网页,超吸引眼球的优秀网站设计欣赏
- 计算机快捷键40个,如何快速记住计算机快捷键
- Python-打印乘法口诀表
- 4 NLP之数据平滑技术