微信小程序云开发

微信小程序云开发（数据库）

置顶 2018年09月21日 15:29:21 一个减肥的小胖子 阅读数：9296

 

 版权声明： https://blog.csdn.net/qq_40999496/article/details/82773484

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

目前提供三大基础能力支持：

           1、云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码

           2、数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库

           3、存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理

具体的可以去小程序文档上查看，下面用一个登录注册的案例来演示小程序云开发数据库的运用

注册

在创建的时候，要在点下一步的时候，调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库，然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。

1.  
   var app = getApp();
2.  
   Page({
3.  
   data: {
4.  
   userName: '',
5.  
   userPassword: '',
6.  
   userPasswordAgain: '',
7.  
   checkbox: false,
8.  
   repetition: false
9.  
   },
10.  
    // 返回主页面
11.  
    backHomeTap: function() {
12.  
    wx.switchTab({
13.  
    url: '../index/index',
14.  
    })
15.  
    },
16.  
    // 绑定
17.  
    bindingTap: function () {
18.  
    wx.redirectTo({
19.  
    url: '../login/login',
20.  
    })
21.  
    },
22.  
    // 用户名
23.  
    userNameInput: function(e) {
24.  
    this.setData({
25.  
    userName: e.detail.value
26.  
    });
27.  
    },
28.  
    // 密码
29.  
    userPasswordInput: function(e) {
30.  
    this.setData({
31.  
    userPassword: e.detail.value
32.  
    });
33.  
    },
34.  
    // 再次输入密码
35.  
    userPasswordAgainInput: function(e) {
36.  
    this.setData({
37.  
    userPasswordAgain: e.detail.value
38.  
    });
39.  
    },
40.  
    // 同意
41.  
    checkboxChange: function() {
42.  
    if (this.data.checkbox === false) {
43.  
    this.setData({
44.  
    checkbox: true
45.  
    })
46.  
    } else {
47.  
    this.setData({
48.  
    checkbox: false
49.  
    })
50.  
    }
51.  
    var that = this;
52.  
    var userName = this.data.userName;
53.  
    // 初始化云
54.  
    wx.cloud.init({
55.  
    env: 'wubaib-9543f7',
56.  
    traceUser: true
57.  
    });
58.  
    // 初始化数据库
59.  
    const db = wx.cloud.database();
60.  
    const _ = db.command;
61.  
    db.collection('userInformation').where({
62.  
    userName: _.eq(userName)
63.  
    }).get({
64.  
    success: function (res) {
65.  
    if (res.data.length === 1) {
66.  
    that.setData({
67.  
    repetition: true
68.  
    })
69.  
    }
70.  
    }
71.  
    })
72.  
    },
73.  
    // 下一步，完善个人信息
74.  
    perfectInforTap: function() {
75.  
    var userName = this.data.userName;
76.  
    var userPassword = this.data.userPassword;
77.  
    var checkbox = this.data.checkbox;
78.  
    var userPasswordAgain = this.data.userPasswordAgain;
79.  
    var name = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
80.  
    var repetition = this.data.repetition;
81.  
    if (userName === '') {
82.  
    wx.showToast({
83.  
    title: '请输入用户名',
84.  
    icon: 'none',
85.  
    duration: 2000,
86.  
    mask: true
87.  
    })
88.  
    } else if (!name.test(userName)) {
89.  
    wx.showToast({
90.  
    title: '用户名格式不正确',
91.  
    icon: 'none',
92.  
    duration: 2000,
93.  
    mask: true
94.  
    })
95.  
    } else if (repetition === true) {
96.  
    wx.showToast({
97.  
    title: '用户名已存在',
98.  
    icon: 'none',
99.  
    duration: 2000,
100.  
     mask: true
101.  
     })
102.  
     } else if (userPassword === '') {
103.  
     wx.showToast({
104.  
     title: '请输入密码',
105.  
     icon: 'none',
106.  
     duration: 2000,
107.  
     mask: true
108.  
     })
109.  
     } else if (userPassword.length < 6) {
110.  
     wx.showToast({
111.  
     title: '密码最少6位',
112.  
     icon: 'none',
113.  
     duration: 2000,
114.  
     mask: true
115.  
     })
116.  
     } else if (userPassword !== userPasswordAgain) {
117.  
     wx.showToast({
118.  
     title: '两次密码输入不一致',
119.  
     icon: 'none',
120.  
     duration: 2000,
121.  
     mask: true
122.  
     })
123.  
     } else if (checkbox === false) {
124.  
     wx.showToast({
125.  
     title: '请选中已阅读',
126.  
     icon: 'none',
127.  
     duration: 2000,
128.  
     mask: true
129.  
     })
130.  
     } else {
131.  
     wx.redirectTo({
132.  
     url: 'perfectInfor/perfectInfor',
133.  
     })
134.  
     // 保存用户名和密码
135.  
     app.appData.account = {
136.  
     userName: userName,
137.  
     userPassword: userPassword
138.  
     }
139.  
     }
140.  
     }
141.  
     })

在完善信息的时候获取所有的变量（用户名和密码也在内），然后在点击下一步完成按钮将数据上传到数据库。

1.  
   ​
2.  
   var app = getApp();
3.  
   Page({
4.  
   data: {
5.  
   userName: '',
6.  
   userPassword: '',
7.  
   phone: '',
8.  
   realName: '',
9.  
   card: '',
10.  
    email: '',
11.  
    },
12.  
    // 返回主界面
13.  
    backHomeTap: function() {
14.  
    wx.switchTab({
15.  
    url: '../../index/index',
16.  
    })
17.  
    },
18.  
    // 手机号
19.  
    phoneInput: function(e) {
20.  
    this.setData({
21.  
    phone: e.detail.value
22.  
    });
23.  
    },
24.  
    // 真实姓名
25.  
    nameInput: function(e) {
26.  
    this.setData({
27.  
    realName: e.detail.value
28.  
    });
29.  
    },
30.  
    // 身份证
31.  
    cardInput: function(e) {
32.  
    this.setData({
33.  
    card: e.detail.value
34.  
    })
35.  
    },
36.  
    // email
37.  
    emailInput: function(e) {
38.  
    this.setData({
39.  
    email: e.detail.value
40.  
    })
41.  
    },
42.  
    // 下一步完成
43.  
    registerSuccessTap: function() {
44.  
    var phone = this.data.phone;
45.  
    var realName = this.data.realName;
46.  
    var card = this.data.card;
47.  
    var email = this.data.email;
48.  
    var userName = this.data.userName;
49.  
    var userPassword = this.data.userPassword;
50.  
    var phonereg = /^1[345789]\d{9}$/;
51.  
    var namereg = /^[\u4E00-\u9FA5]+$/;
52.  
    var cardreg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
53.  
    var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
54.  
    var that = this;
55.  
    if (phone === '') {
56.  
    wx.showToast({
57.  
    title: '请输入手机号',
58.  
    icon: 'none',
59.  
    duration: 2000,
60.  
    mask: true
61.  
    });
62.  
    } else if (!phonereg.test(phone)) {
63.  
    wx.showToast({
64.  
    title: '请输入正确的手机号',
65.  
    icon: 'none',
66.  
    duration: 2000,
67.  
    mask: true
68.  
    })
69.  
    } else if (!namereg.test(realName)) {
70.  
    wx.showToast({
71.  
    title: '请输入正确的名字',
72.  
    icon: 'none',
73.  
    duration: 2000,
74.  
    mask: true
75.  
    })
76.  
    } else if (card === '') {
77.  
    wx.showToast({
78.  
    title: '请输入身份证',
79.  
    icon: 'none',
80.  
    duration: 2000,
81.  
    mask: true
82.  
    })
83.  
    } else if (!cardreg.test(card)) {
84.  
    wx.showToast({
85.  
    title: '请输入正确的身份证',
86.  
    icon: 'none',
87.  
    duration: 2000,
88.  
    mask: true
89.  
    })
90.  
    } else if (email === '') {
91.  
    wx.showToast({
92.  
    title: '请输入邮箱',
93.  
    icon: 'none',
94.  
    duration: 2000,
95.  
    mask: true
96.  
    })
97.  
    } else if (!emailreg.test(email)) {
98.  
    wx.showToast({
99.  
    title: '请输入正确的邮箱',
100.  
     icon: 'none',
101.  
     duration: 2000,
102.  
     mask: true
103.  
     })
104.  
     } else {
105.  
     // 初始化云
106.  
     wx.cloud.init({
107.  
     env: 'wubaib-9543f7',
108.  
     traceUser: true
109.  
     });
110.  
     // 初始化数据库
111.  
     const db = wx.cloud.database();
112.  
     db.collection('userInformation').add({
113.  
     // data 字段表示需新增的 JSON 数据
114.  
     data: {
115.  
     realName: realName,
116.  
     userName: userName,
117.  
     userPassword: userPassword,
118.  
     phone: phone,
119.  
     email: email,
120.  
     card: card
121.  
     },
122.  
     success: function(res) {
123.  
     // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
124.  
     console.log(res);
125.  
     console.log(res.errMsg);
126.  
     }
127.  
     })
128.  
     }
129.  
     },
130.  
      
131.  
     /**
132.  
     * 生命周期函数--监听页面显示
133.  
     */
134.  
     onShow: function() {
135.  
     this.setData({
136.  
     userName: app.appData.account.userName,
137.  
     userPassword: app.appData.account.userPassword
138.  
     })
139.  
     },
140.  
     })
141.  
      
142.  
     ​

登录

在登录页面，先获取用户输入的用户名和密码。在点击登录的时候，先根据userName调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。

1.  
   ​
2.  
   var app = getApp();
3.  
   Page({
4.  
   data: {
5.  
   bindName: '',
6.  
   bindPassword: '',
7.  
   isChecked: false,
8.  
   userName: '',
9.  
   phone: '',
10.  
    realName: '',
11.  
    card: '',
12.  
    email: '',
13.  
    userId: ''
14.  
    },
15.  
    // 点击注册账号
16.  
    registerTap: function() {
17.  
    wx.redirectTo({
18.  
    url: '../register/register'
19.  
    })
20.  
    },
21.  
    // 获取用户名
22.  
    bindNameInput: function(e) {
23.  
    this.setData({
24.  
    bindName: e.detail.value
25.  
    })
26.  
    var that = this;
27.  
    if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
28.  
    this.setData({
29.  
    isChecked: true
30.  
    })
31.  
    } else if (that.data.bindName.length === 0) {
32.  
    this.setData({
33.  
    isChecked: false
34.  
    })
35.  
    }
36.  
    },
37.  
    // 获取密码
38.  
    bindPasswordInput: function(e) {
39.  
    this.setData({
40.  
    bindPassword: e.detail.value
41.  
    })
42.  
    var that = this;
43.  
    if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
44.  
    this.setData({
45.  
    isChecked: true
46.  
    })
47.  
    } else if (that.data.bindPassword.length === 0) {
48.  
    this.setData({
49.  
    isChecked: false
50.  
    })
51.  
    }
52.  
    },
53.  
    // 点击登录
54.  
    bindingSuccess: function() {
55.  
    var that = this;
56.  
    var bindName = that.data.bindName;
57.  
    var bindPassword = that.data.bindPassword;
58.  
    if (bindName.length !== 0 && bindPassword.length !== 0) {
59.  
    // 初始化云
60.  
    wx.cloud.init({
61.  
    env: 'wubaib-9543f7',
62.  
    traceUser: true
63.  
    });
64.  
    // 初始化数据库
65.  
    const db = wx.cloud.database();
66.  
    db.collection('userInformation').where({
67.  
    userName: bindName
68.  
    }).get().then(res => {
69.  
    console.log(res.data);
70.  
    if (res.data[0].userPassword === bindPassword) {
71.  
    console.log("登录成功");
72.  
    // 保存手机号，真实姓名，身份证号，邮箱 保存用户名
73.  
    that.setData({
74.  
    userName: res.data[0].userName,
75.  
    phone: res.data[0].phone,
76.  
    realName: res.data[0].realName,
77.  
    card: res.data[0].card,
78.  
    email: res.data[0].email,
79.  
    userId: res.data[0]._id
80.  
    })
81.  
    app.appData.userinfo = {
82.  
    phone: that.data.phone,
83.  
    realName: that.data.realName,
84.  
    card: that.data.card,
85.  
    email: that.data.email
86.  
    }
87.  
    app.appData.account = {
88.  
    userName: that.data.userName
89.  
    }
90.  
    app.appData.userId = {
91.  
    userId: that.data.userId
92.  
    }
93.  
    wx.switchTab({
94.  
    url: '../personalCenter/personalCenter',
95.  
    })
96.  
    } else {
97.  
    wx.showToast({
98.  
    title: '用户名或密码错误',
99.  
    icon: 'none',
100.  
     duration: 2000
101.  
     })
102.  
     }
103.  
     })
104.  
     }
105.  
     },
106.  
     })
107.  
      
108.  
     ​

登录WXML

1.  
   <view class='phoneNumberContainer'>
2.  
   <input placeholder='用户名' maxlength='11' bindinput="bindNameInput"></input>
3.  
   </view>
4.  
   <view class='passwordContainer'>
5.  
   <input placeholder='密码' password="true" bindinput="bindPasswordInput"></input>
6.  
   </view>
7.  
   <view class="{{isChecked?'bindingChecked':'bindingNormal'}}" bindtap='bindingSuccess'>立即登录</view>
8.  
   <view class='registerContainer' bindtap='registerTap'>注册账号</view>

注册第一步的WXML

1.  
   <!--返回主页 -->
2.  
   <view class='backHome' bindtap='backHomeTap'>
3.  
   <image src='/images/homeIcon.png' class='backHomeImg'></image>
4.  
   </view>
5.  
   <!--头部 -->
6.  
   <view class='headerContainer'>
7.  
   <!--创建账户 -->
8.  
   <view class='headerListContainer headerListActive'>
9.  
   <view class='headerListView'>1</view>
10.  
    <text class='headerListText'>创建账户</text>
11.  
    </view>
12.  
    <!--完善个人信息 -->
13.  
    <view class='headerListContainer'>
14.  
    <view class='headerListView'>2</view>
15.  
    <text class='headerListText'>完善个人信息</text>
16.  
    </view>
17.  
    <!--注册成功 -->
18.  
    <view class='headerListContainer'>
19.  
    <view class='headerListView'>3</view>
20.  
    <text class='headerListText'>注册成功</text>
21.  
    </view>
22.  
    <view class='transverseLineLeft'></view>
23.  
    <view class='transverseLineright'></view>
24.  
    </view>
25.  
    <view class='mainContainer'>
26.  
    <!--用户名 -->
27.  
    <view class='mainListContainer'>
28.  
    <view class='mainListText'>用户名</view>
29.  
    <input class='mainListInput' placeholder='请输入数字,字母或中文' maxlength='25' bindinput='userNameInput'></input>
30.  
    </view>
31.  
    <!--密码 -->
32.  
    <view class='mainListContainer'>
33.  
    <view class='mainListText'>密码</view>
34.  
    <input class='mainListInput' placeholder='长度6~14位' password='true' maxlength='14' bindinput='userPasswordInput'></input>
35.  
    </view>
36.  
    <!--确认密码 -->
37.  
    <view class='mainListContainer'>
38.  
    <view class='mainListText'>确认密码</view>
39.  
    <input class='mainListInput' placeholder='请再次输入密码' password='true' maxlength='14' bindinput='userPasswordAgainInput'></input>
40.  
    </view>
41.  
    </view>
42.  
    <!--agree -->
43.  
    <view class='agreeContainer'>
44.  
    <checkbox class='agreeCheckbox' checked="{{check}}" bindtap="checkboxChange"/>
45.  
    <text>我已阅读并接受</text>
46.  
    <text class='clause'>《用户注册条款》</text>
47.  
    </view>
48.  
    <!--nextButton -->
49.  
    <view class='nextButton' bindtap='perfectInforTap'>下一步，完善个人信息</view>
50.  
    <!--binding -->
51.  
    <view class='bindingContainer'>
52.  
    <text>已有账号</text>
53.  
    <text class='binding' bindtap='bindingTap'>请绑定</text>
54.  
    </view>

注册第二步WXML

1.  
   <!--返回主页 -->
2.  
   <view class='backHome' bindtap='backHomeTap'>
3.  
   <image src='/images/homeIcon.png' class='backHomeImg'></image>
4.  
   </view>
5.  
   <!--头部 -->
6.  
   <view class='headerContainer'>
7.  
   <!--创建账户 -->
8.  
   <view class='headerListContainer headerListOldActive'>
9.  
   <view class='headerListView'>1</view>
10.  
    <text class='headerListText'>创建账户</text>
11.  
    </view>
12.  
    <!--完善个人信息 -->
13.  
    <view class='headerListContainer headerListActive'>
14.  
    <view class='headerListView'>2</view>
15.  
    <text class='headerListText'>完善个人信息</text>
16.  
    </view>
17.  
    <!--注册成功 -->
18.  
    <view class='headerListContainer'>
19.  
    <view class='headerListView'>3</view>
20.  
    <text class='headerListText'>注册成功</text>
21.  
    </view>
22.  
    <view class='transverseLineLeft'></view>
23.  
    <view class='transverseLineright'></view>
24.  
    </view>
25.  
    <!--main -->
26.  
    <view class='mainContainer'>
27.  
    <!--手机 -->
28.  
    <view class='mainListContainer'>
29.  
    <view class='mainListText'>手机</view>
30.  
    <input class='mainListInput' placeholder='请输入手机号码' maxlength="11" bindinput='phoneInput'></input>
31.  
    </view>
32.  
    <!--真实姓名 -->
33.  
    <view class='mainListContainer'>
34.  
    <view class='mainListText'>真实姓名</view>
35.  
    <input class='mainListInput' placeholder='请输入真实姓名' maxlength='25' bindinput='nameInput'></input>
36.  
    </view>
37.  
    <!--证件类型 -->
38.  
    <view class='mainListContainer'>
39.  
    <view class='mainListText'>证件类型</view>
40.  
    <view class='cardText'>中华人民共和国居民身份证</view>
41.  
    </view>
42.  
    <!--证件号码 -->
43.  
    <view class='mainListContainer'>
44.  
    <view class='mainListText'>证件号码</view>
45.  
    <input class='mainListInput' type='idcard' placeholder='请输入身份证号码' maxlength="18" bindinput='cardInput'></input>
46.  
    </view>
47.  
    <!--邮箱 -->
48.  
    <view class='mainListContainer'>
49.  
    <view class='mainListText'>邮箱</view>
50.  
    <input class='mainListInput' placeholder='请输入常用的邮箱地址' bindinput='emailInput'></input>
51.  
    </view>
52.  
    </view>
53.  
    <!--nextButton -->
54.  
    <view class='nextButton' bindtap='registerSuccessTap'>下一步，完成</view>