1.简介
注册,登陆是软件的最常见的页面功能,此章与下一节将围绕着注册登陆功能进行优化。
2.注册
2-1.在app.json
添加注册页面
"pages": [ "pages/zhuce/zhuce", //添加的 "pages/index/index", //自带的 ]
保存,就可以看见pages目录下有zhuce的子目录出现。
2-2.编写zhuce.js
文件
自定义要求如下
账号(4~10位)
手机号(11位)
密码(6~25位)
// pages/zhuce/zhuce.js Page({ data: { name: '', phone: '', password: '' }, //获取用户账号 getName(e) { this.setData({ name: e.detail.value }) }, //回去用户的手机号 getphone(e){ this.setData({ phone: e.detail.value }) }, //获取用户密码 getpassword(e) { this.setData({ password: e.detail.value }) }, //注册功能 zhuce() { //从data中拿取变量 let password = this.data.password let name = this.data.name let phone = this.data.phone //账号的判断(4~10) if (name.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } if (name.length > 10) { wx.showToast({ icon: 'none', title: '账号最多10位', }) return } //判断电话号码(11位) if (phone.length < 11){ wx.showToast({ icon: 'none', title: '电话号码至少11位', }) return } if (phone.length > 11){ wx.showToast({ icon: 'none', title: '电话号码最多11位', }) return } //密码判断(6~25) if (password.length < 6) { wx.showToast({ icon: 'none', title: '密码至少6位', }) return } if (password.length > 25) { wx.showToast({ icon: 'none', title: '密码最多25位', }) return } //实现注册 wx.cloud.database().collection('user').add({ data: { name: name, password: password, phone: phone }, success(res) { console.log('注册成功', res) wx.showToast({ icon: 'success', title: '注册成功', }) }, fail(res) { console.log('注册失败', res) } }) }, })
2-3.编写zhuce.json
文件
{ "usingComponents": {}, "navigationBarTitleText": "注册" }
2-4.编写zhuce.wxml
文件(编写看的见的页面)
<!--pages/zhuce/zhuce.wxml--> 输入账号 <input bindinput="getName"></input> 输入手机号 <input bindinput="getphone"></input> 输入密码 <input bindinput="getpassword"></input> <button bindtap="zhuce" type="default">注册</button>
2-5.编写zhuce.wxss文件(边框等一些样式)
/* pages/zhuce/zhuce.wxss */ input{ border: 1px solid gray; margin: 10rpx; border-radius: 10rpx; )
2-6.效果图
3.登陆
3-1.在app.json
添加登陆页面
"pages": [ "pages/longin/longin", //登陆页面 "pages/zhuce/zhuce", //之前添加
3-2.编写longin.js
文件
自定义要求
账号要在4~6位
用户输入的密码与数据库的密码进行比对
// pages/longin/longin.js Page({ data: { name: '', password: '' }, //获取用户账号 getName(e) { this.setData({ name: e.detail.value }) }, //获取用户密码 getpassword(e) { this.setData({ password: e.detail.value }) }, //登陆 denglu() { let name = this.data.name let password = this.data.password //账号的判断(4~10) if (name.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } if (name.length > 10) { wx.showToast({ icon: 'none', title: '账号最多10位', }) return } wx.cloud.database().collection('user').where({ name: name }) .get({ success(res) { console.log('获取数据成功', res) let user = res.data[0] if (password == user.password) { console.log('登陆成功') wx.showToast({ icon: 'success', title: '登陆成功', }) // //登陆成功后实现跳页 // wx.navigateTo({ // url: '/pages/goods/goods?name=' + user.name, // }) } else { console.log('登陆失败') wx.showToast({ icon: 'none', title: '密码或账号不正确', }) } }, fail(res) { console.log('获取数据失败', res) } }) } })
3-3.编写longin.json
文件
{ "usingComponents": {}, "navigationBarTitleText": "登陆" }
3-4.编写longin.wxml
文件
<!--pages/longin/longin.wxml--> 输入账号 <input bindinput="getName"></input> 输入密码 <input bindinput="getpassword"></input> <button bindtap="denglu" type="default">登陆</button>
3-5.编写longin.wxss
文件
/* pages/longin/longin.wxss */ input{ border: 1px solid gray; margin: 10rpx; border-radius: 10rpx; }
3-6.效果图
4.实现注册完成后,跳转登陆页
主要优化如下
4-1.修改longin.js
文件
// pages/longin/longin.js Page({ data: { name: '', password: '' }, //获取用户账号 getName(e) { this.setData({ name: e.detail.value }) }, //获取用户密码 getpassword(e) { this.setData({ password: e.detail.value }) }, //登陆 denglu() { let name = this.data.name let password = this.data.password //账号的判断(4~10) if (name.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } if (name.length > 10) { wx.showToast({ icon: 'none', title: '账号最多10位', }) return } wx.cloud.database().collection('user').where({ name: name }) .get({ success(res) { console.log('获取数据成功', res) let user = res.data[0] if (password == user.password) { console.log('登陆成功') wx.showToast({ icon: 'success', title: '登陆成功', }) //登陆成功后实现跳转商品详情页 wx.navigateTo({ url: '/pages/goods/goods?name=' + user.name,//携带账号进行跳页 }) } else { console.log('登陆失败') wx.showToast({ icon: 'none', title: '密码或账号不正确', }) } }, fail(res) { console.log('获取数据失败', res) } }) }, //跳转到注册页,进行注册 getlongin(){ wx.navigateTo({ url: '/pages/zhuce/zhuce', //跳转到注册页 }) } })
这里的商品详情页在云开发(微信-小程序)笔记(八)----云存储,你来了(中)里有
4-2.修改longin.wxml
文件
<!--pages/longin/longin.wxml--> 输入账号 <input bindinput="getName"></input> 输入密码 <input bindinput="getpassword"></input> <button bindtap="denglu" type="default">登陆</button> <button bindtap="getlongin" type="default">注册</button>
4-3.修改zhuce.js
文件
// pages/zhuce/zhuce.js Page({ data: { name: '', phone: '', password: '' }, //获取用户账号 getName(e) { this.setData({ name: e.detail.value }) }, //回去用户的手机号 getphone(e){ this.setData({ phone: e.detail.value }) }, //获取用户密码 getpassword(e) { this.setData({ password: e.detail.value }) }, //注册功能 zhuce() { //从data中拿取变量 let password = this.data.password let name = this.data.name let phone = this.data.phone //账号的判断(4~10) if (name.length < 4) { wx.showToast({ icon: 'none', title: '账号至少4位', }) return } if (name.length > 10) { wx.showToast({ icon: 'none', title: '账号最多10位', }) return } //判断电话号码(11位) if (phone.length < 11){ wx.showToast({ icon: 'none', title: '电话号码至少11位', }) return } if (phone.length > 11){ wx.showToast({ icon: 'none', title: '电话号码最多11位', }) return } //密码判断(6~25) if (password.length < 6) { wx.showToast({ icon: 'none', title: '密码至少6位', }) return } if (password.length > 25) { wx.showToast({ icon: 'none', title: '密码最多25位', }) return } //实现注册 wx.cloud.database().collection('user').add({ data: { name: name, password: password, phone: phone }, success(res) { console.log('注册成功', res) wx.showToast({ icon: 'success', title: '注册成功', }) //注册成功后跳转登陆页 wx.navigateTo({ url: '/pages/longin/longin'//跳转登陆页 }) }, fail(res) { console.log('注册失败', res) } }) }, })
5.登陆后携带数据到商品详情页(goods)
商品详情页在云开发(微信-小程序)笔记(八)----云存储,你来了(中)里有,这里有些修改如下
5-1.优化goods.js部分
// pages/goods/goods.js Page({ data:{ name: '' }, //请求商品信息 getList(){ wx.cloud.database().collection('Goods').get() .then(res => { console.log('请求成功!',res) wx.stopPullDownRefresh() //停止刷新动画 this.setData({ list: res.data }) }) .catch(res => { console.log('请求失败!',res) }) }, //请求商品数据 onLoad(options){ //携带的数据 this.setData({ name: options.name }) wx.startPullDownRefresh() //开启刷新动画 this.getList() }, //监听用户下拉动作,并更新商品信息 onPullDownRefresh: function(){ console.log('下拉刷新监听中!') //自动开启刷新动画 this.getList() }, //点击后,跳转页面 go(e){ console.log(e.currentTarget.dataset.id) wx.navigateTo({ url: '/pages/goods-1/goods-1?id=' + e.currentTarget.dataset.id, }) }, })
5-2.优化goods.wxml部分
<!--pages/goods/goods.wxml--> <text>{{name}},欢迎你的到来!</text> <view wx:for="{{list}}"> <view class="it" bindtap="go" data-id="{{item._id}}"> <image src="{{item.img}}" class="img"></image> <text>商品名:{{item.name}},价格:{{item.price}}</text> </view> </view>
6.效果图(视频)
https://live.csdn.net/v/208539
小程序注册登陆效果图
云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)
感谢大家,点赞,收藏,关注,评论!