【微信小程序开发】宠物预约医疗项目实战-注册实现

【微信小程序开发】宠物预约医疗项目实战-注册实现

第二章 宠物预约医疗项目实战-注册实现

文章目录

  • 【微信小程序开发】宠物预约医疗项目实战-注册实现
  • 前言
  • 一、打开项目文件
  • 二、编写wxss代码
    • 2.1 什么是wxss
    • 2.2 配置主程序全局样式
  • 三. 在sign文件下的wxml文件中编写如下代码并保存
  • 四 .sign.js文件代码编写如下
    • 4.1 js函数使用
    • 4.2 全局变量与局部变量使用
    • 4.3 request方法请求接口的使用
    • 4.4 在sign.ts中引入全局配置
    • 4.5. 代码编写
    • 4.6. 运行
  • 总结


前言


注册是指向某个平台、网站或应用程序提供您的个人信息以获取账户的过程。注册对于现代社会的人们来说非常重要,以下是几个原因:

方便性:注册后,您可以随时登录到您的账户,使您能够方便地管理和使用平台的服务和功能。

个性化服务:许多网站和应用程序需要您提供个人信息以提供个性化的服务,例如推荐商品或根据您的兴趣推送内容。

安全性:通过注册,您可以创建一个账户和密码,使您的个人信息更安全。此外,许多网站和应用程序要求您使用多种安全措施,例如启用两步验证(2FA)等。

沟通:注册后,您可以参与交流、评论或定期接收电子邮件通知,这有助于您跟进相关信息和最新动态。

授权:某些平台需要您注册才能提供访问内容或服务的授权,例如社交媒体平台或在线购物网站。

总之,注册是连接您和平台、网站和应用程序的重要步骤,可以为您提供许多方便、个性化的服务,并加强您的个人安全。`

一、打开项目文件

在这里插入图片描述
1.在pages里新建注册页面然后ctrl+s保存

    "pages/sign/sign",

在这里插入图片描述
2.确认登录页面被新建出来
在这里插入图片描述

二、编写wxss代码

2.1 什么是wxss

wxss文件是微信小程序中的样式文件,用于定义小程序页面的样式和布局。与CSS类似,wXss文件支持选择器、属性和值等基本语法,但是它有着自己的特点和限制。例如,wXss不支持外部链接和@import语句,需要直接在文件中定义所有样式。此外,wXss还支持一些微信小程序特有的样式属性,例如rpx(响应式像素)用于适配不同屏幕大小的移动设备。 大家可以理解为是css

2.2 配置主程序全局样式

  1. 点击进入app.wxss文件
    在这里插入图片描述
  2. 编写下面罗列的代码后保存运行
/**app.wxss**/
.container {display: flex;flex-direction: column;align-items: center;box-sizing: border-box;
} button {background: initial;
}button:focus{outline: 0;
}button::after{border: none;
}page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: flex-start;
}.userinfo, .uploader, .tunnel {margin-top: 40rpx;height: 140rpx;width: 100%;background: #fff;border: 1px solid rgba(0, 0, 0, 0.1);border-left: none;border-right: none;display: flex;flex-direction: row;align-items: center;transition: all 300ms ease;
}.userinfo-avatar {width: 100rpx;height: 100rpx;margin: 20rpx;border-radius: 50%;background-size: cover;background-color: white;
}.userinfo-avatar:after {border: none;
}.userinfo-nickname {font-size: 32rpx;color: #007aff;background-color: white;background-size: cover;
}.userinfo-nickname::after {border: none;
}.uploader, .tunnel {height: auto;padding: 0 0 0 40rpx;flex-direction: column;align-items: flex-start;box-sizing: border-box;
}.uploader-text, .tunnel-text {width: 100%;line-height: 52px;font-size: 34rpx;color: #007aff;
}.uploader-container {width: 100%;height: 400rpx;padding: 20rpx 20rpx 20rpx 0;display: flex;align-content: center;justify-content: center;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.uploader-image {width: 100%;height: 360rpx;
}.tunnel {padding: 0 0 0 40rpx;
}.tunnel-text {position: relative;color: #222;display: flex;flex-direction: row;align-content: center;justify-content: space-between;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1);
}.tunnel-text:first-child {border-top: none;
}.tunnel-switch {position: absolute;right: 20rpx;top: -2rpx;
}.disable {color: #888;
}.service {position: fixed;right: 40rpx;bottom: 40rpx;width: 140rpx;height: 140rpx;border-radius: 50%;background: linear-gradient(#007aff, #0063ce);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);display: flex;align-content: center;justify-content: center;transition: all 300ms ease;
}.service-button {position: absolute;top: 40rpx;
}.service:active {box-shadow: none;
}.request-text {padding: 20rpx 0;font-size: 24rpx;line-height: 36rpx;word-break: break-all;
}

三. 在sign文件下的wxml文件中编写如下代码并保存

在这里插入图片描述

=<view class="container"><image   src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F24%2F20150224235124_vda4m.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677326688&t=b461a24be6ba1e8736e3bb9c525f925f"></image></view><view class="login_box"><view class="section"><input placeholder="请输入用户名" placeholder-class="color" bindblur='username' /></view><view class="section"><input type='number' maxlength='11' placeholder="请输入手机号" placeholder-class="color" bindblur='mobile' /><image src=""></image></view><view class="section"><input password="true" placeholder="请输入密码" placeholder-class="color" bindblur='pass1' /><image src=""></image></view><view class="section"><input password="true" placeholder="确认密码" placeholder-class="color" bindblur='pass2' /><image src=""></image></view>
<button class="login1" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">用户注册</button>
<button class="register" type="warn" open-type="getUserInfo" bindgetuserinfo="okzhuche">已有账号/登录</button><!--底部确认--><view class="shen_title"><image class="about" src="" />使用申明</view><view class="des">1. 在未经您同意及确认之前,本程序不会将您的注册信息用于任何其它商业目的。</view><view class="des">2. 本程序将对您的信息进行严格的保护</view><view class="des">3. 请您放心使用!</view>
</view>

此时保存后编译,你可以看见展示的效果,但是注册点击时没有效果的。原因在于,没有编写sign.js文件接入数据

四 .sign.js文件代码编写如下

涉及知识点:

  1. js函数调用使用
  2. 全局变量与局部变量使用
  3. request方法请求接口的使用

下面我们一个一个来:

4.1 js函数使用

函数的定义与java不同:
函数名称+函数输入参数+花括号
比如下段:

 onReady: function(a) {//函数体},

其中onReady为函数名称,function(a)为函数定义参数。多个参数通过,区分,如function(a,b)
代码亦可以简化为:

 onReady(a) {//函数体},

4.2 全局变量与局部变量使用

在这里插入图片描述
页面的全局变量定义在data中,当需要获取data中的数据时,通常写法如下:

 onReady: function(a) {//函数体var a = this.data.username;},

我们将data中的username的值传给了var a局部变量

设置全局变量data的写法如下:

  username(e) {this.setData({username: e.detail.value})},

通过 this.setData({ ---- })的方式将传入函数中的值赋值给data中的username


4.3 request方法请求接口的使用

注册的接口见先导篇中我提供的接口文档,下面带大家使用使用
1.登录接口文档地址:
点击进入文档地址
在这里插入图片描述
2. 找到用户增加接口
在这里插入图片描述
3.在app.ts和index.d.ts中引入域名接口并保存
在这里插入图片描述
在这里插入图片描述

  mydata: {// ip:"http://127.0.0.1:9004/",ip:"http://122.51.174.157:9004/"},

在定义一个时间生成函数

  time() {var date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;const day = date.getDate();const hour = date.getHours();const minute = date.getMinutes();const second = date.getSeconds();var time = year + '-' + month + '-' + day + ' ' + hour + '时' + minute +'分'+ second+'秒';return time;},

整体代码编写为:

// app.ts
App({globalData: {},mydata: {// ip:"http://127.0.0.1:9004/",ip:"http://122.51.174.157:9004/"},time() {var date = new Date();const year = date.getFullYear();const month = date.getMonth() + 1;const day = date.getDate();const hour = date.getHours();const minute = date.getMinutes();const second = date.getSeconds();var time = year + '-' + month + '-' + day + ' ' + hour + '时' + minute +'分'+ second+'秒';return time;},onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {console.log(res.code)// 发送 res.code 到后台换取 openId, sessionKey, unionId},})},})

4.4 在sign.ts中引入全局配置


在这里插入图片描述

// 获取应用实例
const app = getApp<IAppOption>()

如果你版本较低,文件为sign.js则引入

var app = getApp();

4.5. 代码编写


// 获取应用实例
const app = getApp<IAppOption>()
Page({/*** 页面的初始数据*/data: {username: '', //用户名mobile: '', //手机号pass1: '', //密码pass2: '', //确认密码},// 用户名失去焦点username(e) {this.setData({username: e.detail.value})},// 手机号失去焦点mobile(e) {this.setData({mobile: e.detail.value})},// 密码失去焦点pass1(e) {var pattern = /^[\w_]{0,6}$/; //密码正则if (!pattern.test(e.detail.value)) {this.setData({pass1: ''})wx.showToast({title: '密码长度必须为0-6位,并且由字母,数字或下划线组成',icon: 'none',duration: 3000})} else {this.setData({pass1: e.detail.value})}},// 确认密码失去焦点pass2(e) {this.setData({pass2: e.detail.value})},// 接种用户点击注册按钮bindGetUserInfo: function(e){if (e.detail.userInfo) {//用户按了允许授权按钮wx.showLoading({title: '正在注册...',})if (this.data.username == '') {wx.showToast({title: '用户名不能为空',icon: 'none',duration: 2000})} else if (this.data.mobile == '') {wx.showToast({title: '手机号不能为空',icon: 'none',duration: 2000})} else if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {wx.showToast({title: '手机号码格式有误,请重新输入!',icon: 'none',duration: 2000})} else if (this.data.pass1 == '') {wx.showToast({title: '密码不能为空',icon: 'none',duration: 2000})} else if (this.data.pass2 == '') {wx.showToast({title: '请再次输入密码',icon: 'none',duration: 2000})} else if (this.data.pass1 != this.data.pass2) {wx.showToast({title: '两次密码输入不一致,请重新输入!',icon: 'none',duration: 2000})} else {var that = this// 注册这个账户之前,我们首先要做的就是查询一下这个集合表中是否已经存在过这个用户了wx.request({url: app.mydata.ip+'api/user/checkname',data: {username:this.data.username,},header: {// 'content-type': 'application/json''content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function(res) {console.log(res)if (res.data=='no') { //判断用户名是否被注册过,等于空说明没被查询到,就是没有注册过,
//我写的数用户名和手机号都可以登录,所以同一个手机号和用户名只能算一个账号,也要验证一下手机号是否被注册过wx.request({url: app.mydata.ip+'api/user/checkphone',data: {phone:that.data.mobile,},header: {// 'content-type': 'application/json''content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function(res) {if (res.data == 'no') { //判断手机号是否被注册过,等于空说明没被查询到,就是没有注册过,wx.request({url: app.mydata.ip+'api/user/register',data: {id:1,   username:that.data.username,password:that.data.pass2,phone:that.data.mobile,root:1,sex:"男",birthTime:app.time()},header: {'content-type': 'application/json'},method: 'GET',success: function(res) {if (res.data.code == 1) { //接口调取成功,也就是注册成功// 这里面你可以加一下注册成功之后的逻辑,是直接登录也好,或者是跳到登录页面页面wx.hideLoading();wx.showToast({title: '注册成功',icon: 'none'})setTimeout(function() {wx.showLoading({title: '正在跳转',})setTimeout(function() {wx.hideLoading();wx.navigateTo({url: '../login/login',})}, 300)}, 100)}}})} else {wx.showToast({title: '此手机号已被别人注册,换一个试试!',icon: 'none',duration: 2000})}}})} else {wx.showToast({title: '此用户名已被别人注册,换一个试试!',icon: 'none',duration: 2000})}}})}} else {//用户按了拒绝按钮wx.showModal({title: '警告',content: '您点击了拒绝授权,将无法进行账号注册,请授权之后再注册!!!',showCancel: false,confirmText: '返回授权',success: function(res) {}})}},okzhuche: function() {setTimeout(function() {wx.showLoading({title: '正在跳转',})setTimeout(function() {wx.hideLoading();app.globalData.register=true;}, 300)}, 100)wx.navigateTo({url: "../login/login"}) },/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}})

4.6. 运行

在这里插入图片描述
1.打开改属性设置,原因是域名接口不是小程序授权接口
2.输入注册信息
在这里插入图片描述
3.确认注册
在这里插入图片描述
在这里插入图片描述
4.重新注册使用同账号或者同电话号码会被拦截
在这里插入图片描述

总结

学习如逆水行舟,不进则退。视频教程于周内于哔哩哔哩更新,同学需提前熟悉代码与操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/140850.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Codeforces Round #898 (Div. 4)

首先庆祝自己上了绿名&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384;&#x1f384; 1873A - Short Sort 1873B - Good Kid c…

python模拟斐波那契数列输出

用户输入指定的数列范围&#xff0c;正确输出结果。 源代码&#xff1a; def fiebo(n): a 1 b 1 for i in range(n): if i 0: print(a, end" ") elif i 1: print(b, end" ") else: …

腾讯云16核CPU服务器配置大全,CVM和轻量服务器

腾讯云16核CPU服务器有哪些配置可以选择&#xff1f;可以选择标准型S6、标准型SA3、计算型C6或标准型S5等&#xff0c;目前标准型S5云服务器有优惠活动&#xff0c;性价比高&#xff0c;计算型C6云服务器16核性能更高&#xff0c;轻量16核32G28M带宽优惠价3468元15个月&#xf…

Java基础(四)

前言&#xff1a;本博客主要涉及java编程中的线程、多线程、生成者消费者模型、死锁。 目录 线程多线程 线程同步 synchronized Lock锁 线程通信 生产者消费者模型 线程池 使用线程池处理Runnable任务 使用线程池处理Callable任务 Excutors 悲观锁 乐观锁 并发VS并…

React 全栈体系(十三)

第七章 redux 五、redux 异步编程 1. 理解 redux 默认是不能进行异步处理的,某些时候应用中需要在 redux 中执行异步任务(ajax, 定时器) 2. 使用异步中间件 npm install --save redux-thunk 3. 代码 - 异步 action 版 3.1 store /* src/redux/store.js */ /*** 该文件专…

【Spatial-Temporal Action Localization(七)】论文阅读2022年

文章目录 1. TubeR: Tubelet Transformer for Video Action Detection摘要和结论引言&#xff1a;针对痛点和贡献模型框架TubeR Encoder&#xff1a;TubeR Decoder&#xff1a;Task-Specific Heads&#xff1a; 2. Holistic Interaction Transformer Network for Action Detect…

前端项目练习(练习-001-纯原生)

先创建一个空文件夹&#xff0c;名字为web-001,然后用idea开发工具打开&#xff0c;如图&#xff1a; 可以看到&#xff0c;这是个彻底的空项目&#xff0c;创建 index.html index.js index.css三个文件&#xff0c;如图&#xff1a; 其中&#xff0c;html文件内容如下&am…

Qt Charts简介

文章目录 一.图标类型Charts分类1.折线图和样条曲线图2.面积图和散点图3.条形图4.饼图5.误差棒图6.烛台图7.极坐标图 二.坐标轴Axes类型分类三.图例四.图表的互动五.图表样式主题 一.图标类型Charts分类 图表是通过使用系列类的实例并将其添加到QChart或ChartView实例来创建的…

RT-Thread(学习)

RT-Thread是一款完全由国内团队开发维护的嵌入式实时操作系统&#xff08;RTOS&#xff09;&#xff0c;具有完全的自主知识产权。经过16个年头的沉淀&#xff0c;伴随着物联网的兴起&#xff0c;它正演变成一个功能强大、组件丰富的物联网操作系统。 RT-Thread概述 RT-Threa…

基于 SpringBoot+Vue的电影影城管理系统,附源码,数据库

文章目录 第一章 简介第二章 技术栈第三章 功能分析第四章 系统设计第5章 系统详细设计六 源码咨询 第一章 简介 本影城管理系统&#xff0c;是基于 Java SpringBoot 开发的。主要包括二大功能模块&#xff0c;即用户功能模块和管理员功能模块。 &#xff08;1&#xff09;管…

渗透测试信息收集方法和工具分享

文章目录 一、域名收集1.OneForAll2.子域名挖掘机3.subdomainsBurte4.ssl证书查询 二、获取真实ip1.17CE2.站长之家ping检测3.如何寻找真实IP4.纯真ip数据库工具5.c段&#xff0c;旁站查询 三、端口扫描1.端口扫描站长工具2.masscan(全端口扫描)nmap扫描3.scanport4.端口表5.利…

【力扣每日一题】2023.9.23 树上的操作

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 这是一道程序设计类的题目&#xff0c;题目比较长&#xff0c;我稍微概括一下。 构造函数中给我们一个数组&#xff0c;第i个元素表示第…

最新Python大数据之Excel进阶

文章目录 Excel图表类型了解有哪些图表类型 Excel图表使用图表的创建方式利用固定数据区域创建图表编辑数据系列添加数据标签格式化图表 Excel数据透视表数据透视表对原始数据的要求创建数据透视表数据透视表字段布局将数据透视图变成普通图表 Excel图表类型 为了揭示数据规律…

如何模拟自然界生态系统中的食物链

本人最近在研究一款针对青少年儿童的教育游戏&#xff0c;希望从培养孩子各方面的综合素质出发&#xff0c;引导孩子掌握多方面的软知识&#xff0c;软技能。其中有一个比较新颖的游戏玩法------打猎。该玩法创新点在于&#xff0c;引入了食物链的概念。过去一般的游戏里&#…

时间复杂度、空间复杂度

一、时间复杂度 1、概念 时间复杂度&#xff1a;计算的是当一个问题量级增加的时间&#xff0c;时间增长的趋势&#xff1b; O&#xff08;大O表示法&#xff09;&#xff1a;渐进的时间复杂度 2、举例 ① 以下 for 循环的时间复杂度&#xff1a;O(1 3n) O(n) 去掉常数…

查看吾托帮88.47的docker里的tomcat日志

步骤如下 &#xff08;1&#xff09;ssh &#xff08;2&#xff09;ssh root192.168.88.47 等待输入密码&#xff1a;fytest &#xff08;3&#xff09;pwd #注释&#xff1a;输出/root &#xff08;4&#xff09;docker exec -it wetoband_deploy /bin/bash #注释&#xff1…

nginx实现反向代理实例

1 前言 1.1 演示内容 在服务器上访问nginx端口然后跳转到tomcat服务器 1.2 前提条件 前提条件&#xff1a;利用docker安装好nginx、tomcat、jdk8&#xff08;tomcat运行需要jdk环境&#xff09; 只演示docker安装tomcat&#xff1a; 默认拉取最新版tomcat docker pull t…

【vue2第二十章】vuex使用 (state,mutations,actions,getters)

vuex是什么&#xff1f; Vuex是一个用于Vue.js应用程序的状态管理模式。它允许您在应用程序中管理共享状态&#xff0c;并以可预测的方式进行状态更新。Vuex集成了Vue的响应式系统&#xff0c;使得状态的变化能够自动地更新视图。使用Vuex&#xff0c;您可以将应用程序的状态集…

【论文阅读 07】Anomaly region detection and localization in metal surface inspection

比较老的一篇论文&#xff0c;金属表面检测中的异常区域检测与定位 总结&#xff1a;提出了一个找模板图的方法&#xff0c;使用SIFT做特征提取&#xff0c;姿态估计看差异有哪些&#xff0c;Hough聚类做描述符筛选&#xff0c;仿射变换可视化匹配图之间的关系&#xf…

如何使用ArcGIS Pro自动矢量化道路

对于已经制作好的电子地图&#xff0c;我们可以通过像素识别的方式将其中的要素提取出来&#xff0c;比如本教程要讲到的道路数据&#xff0c;这里为大家介绍一下在ArcGIS Pro中如何自动矢量化道路&#xff0c;希望能对你有所帮助。 栅格计算 在工具箱中点击“Spatial Analys…