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

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

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

---

前言

---

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

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

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

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

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

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

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

一、打开项目文件

1.在pages里新建注册页面然后ctrl+s保存

    "pages/sign/sign",
1

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

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

="container">

"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">



"login_box">

"section">

  "请输入用户名" placeholder-class="color" bindblur='username' />
 


"section">

  'number' maxlength='11' placeholder="请输入手机号" placeholder-class="color" bindblur='mobile' />

  "">



"section">

  "true" placeholder="请输入密码" placeholder-class="color" bindblur='pass1' />

  "">



"section">

  "true" placeholder="确认密码" placeholder-class="color" bindblur='pass2' />

  "">


"login1" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">用户注册
"register" type="warn" open-type="getUserInfo" bindgetuserinfo="okzhuche">已有账号/登录

       
       "shen_title">
            "about" src="" />使用申明
      
      "des">1. 在未经您同意及确认之前，本程序不会将您的注册信息用于任何其它商业目的。
      "des">2. 本程序将对您的信息进行严格的保护
      "des">3. 请您放心使用！





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

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

涉及知识点：

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

下面我们一个一个来：

4.1 js函数使用

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

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

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

 onReady(a) {
  //函数体
  },
1
2
3

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

页面的全局变量定义在data中，当需要获取data中的数据时，通常写法如下：

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

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

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

  username(e) {

    this.setData({

      username: e.detail.value

    })

  },
1
2
3
4
5
6
7
8
9

通过 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/"
  },
1
2
3
4

在定义一个时间生成函数

  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;
  },
1
2
3
4
5
6
7
8
9
10
11

整体代码编写为：

// 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
      },
    })
  },

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

---

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

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

var app = getApp();
1

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() {

 

  }

})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433

4.6. 运行

1.打开改属性设置，原因是域名接口不是小程序授权接口
2.输入注册信息

3.确认注册


4.重新注册使用同账号或者同电话号码会被拦截

总结

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