微信小程序雲開發

微信小程序雲開發（數據庫）

置頂 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>