【2020雲開發+源碼】30分鐘創建並上線微信小程序實戰項目 | 零成本 | 雲數據庫 | 雲函數

點擊觀看視頻課程 ↓↓↓

【2020雲開發+源碼】（上） 30分鐘創建並上線微信小程序實戰項目 | 零成本 | 雲數據庫 | 雲函數

【2020雲開發+源碼】（下）30分鐘創建並上線微信小程序實戰項目 | 零成本 | 雲數據庫 | 雲函數

---

課程文字版 ↓↓↓

大家好，我是寧一，前段時間錄製了微信小程序全棧開發的一個課程，教大家開發了一個叫做【真自律】的小程序。很多同學已經跟着課程將小程序做出來了

但是大部分同學都沒有服務器和域名，做出來的項目只能在自己電腦上面運行。有的同學加我好友說感覺好可惜，好不容易做出來的項目，竟然不能和別人一起分享。

今天就來滿足大家的要求，教大家使用雲開發免費將項目部署上線，不需要服務器和域名就能讓用戶通過微信訪問到你的小程序。

這次我們直接使用小程序自己的語言來開發，因爲這次要做的項目邏輯比較簡單。後面我會再單獨出一期課程教大家使用mpvue框架來進行雲開發

課程分爲6個部分
1、項目介紹
2、創建項目、雲開發初始化、頁面初始化
3、登錄功能（雲函數的創建和調用）
4、點擊按鈕生成記錄數據（雲數據庫的插入）
5、將記錄數據展示到頁面上（雲數據庫的讀取）
6、項目部署上線

現在我們就開始吧~

一、項目介紹

先來看一下最後的效果，有三個頁面：首頁、記錄、我的，

先在我的頁面，點擊登錄按鈕，登錄進來，會展示用戶的微信頭像和微信暱稱

接下來來到首頁，點擊加減按鈕，記錄頁面會同步產生點擊的日誌。我們課程結束後，在手機上面運行的結果就是這樣的

 

二、創建項目、雲開發初始化、頁面初始化

1、創建項目

接下來我們來創建項目，先來看看什麼是雲開發

可以理解爲微信官方給我們的一個免費服務器，並且非常貼心的幫我們部署好了小程序的環境，將服務器的一些功能，比如數據庫的增刪改查都封裝成了接口，我們操作數據庫只需要調用他們封裝好的接口就可以，非常的簡單

創建雲開發項目的話，需要先註冊一個小程序賬號
點擊查看註冊賬號演示

我們登陸到小程序賬號中，拿到小程序的唯一標識AppId，創建雲開發項目必須要有AppID

接下來我們來到微信開發者工具中，創建一個新的小程序項目，不要選擇雲開發選項，會給我們創建許多我們用不到的模板。選擇這個不使用雲開發，然後我們自己去配置雲開發環境

項目創建好了之後，點擊雲開發按鈕，開通一下雲開發功能

開通完成之後，我們會拿到雲開發環境的id，這個id是唯一的，用來標識你的這個開發環境，後面我們會用到id

 

2、雲開發初始化

（1）新建一個雲開發的文件夾cloud

（2）在project.config.json文件中添加代碼，指定雲開發的文件爲我們剛剛創建的cloud文件夾

"cloudfunctionRoot": "cloud/",

（3）再來到app.js文件中用下面的代碼代替原先的代碼

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      //env環境應該替換成自己的環境id
      //traceUser將用戶訪問記錄到用戶管理中，在控制檯中可以看到訪問用戶的信息，我們一般將他設置爲true
      wx.cloud.init({
        env: 'test-59478a',
        traceUser: true
      })
    }
  }
})

保存了之後，這裏cloud雲開發文件後面的就會指定我們現在創建的test雲開發環境，文件夾上面會有一個雲的標誌。

如果你保存文件之後，還是顯示的未指定環境，那麼可以關閉微信開發者工具，重新打開這個項目，應該就正常了
 

3、小程序頁面初始化

（1）先處理pages文件，pages文件夾裏面放這我們小程序的所有頁面，我們需要三個頁面，index首頁、logs記錄頁面，還有me我的頁面，我們創建一個me文件夾
在pages文件夾上面右鍵，選擇新建目錄，再在創建好的me文件夾上面右鍵，新建page

（2）再創建一個images目錄，將準備好的圖片粘貼進來，選中之後的圖片以及未選中的圖片

（3）接下來我們來到app.json文件中，先修改window對象中的導航欄顏色和導航欄標題

"navigationBarBackgroundColor": "#EA5149",
"navigationBarTitleText": "貓寧一",

再來加上tab欄

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/binggan.png",
        "selectedIconPath": "image/binggan-active.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "image/danhuang.png",
        "selectedIconPath": "image/danhuang-active.png",
        "text": "日誌"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "image/huasheng.png",
        "selectedIconPath": "image/huasheng-active.png",
        "text": "我的"
      }
    ]
  },

現在頁面基本上搭建完成了，來看一下效果

三、登錄功能

1、在pages/me/me.wxml文件中添加登錄按鈕

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登錄</button>

2、在me.js文件中添加onGotUserInfo方法和userInfo變量

Page({
  data: {
    userInfo:{}
  },
  onGotUserInfo: function (e) {
    this.setData({
      userInfo: e.detail.userInfo
    })
    console.log("userInfo", this.data.userInfo)
  },
})

點擊登錄按鈕，在控制檯會打印出用戶的信息，如下

但是現在獲取到的信息中沒有openid這個字段，openid是每個微信號的唯一標識，微信暱稱，頭像、地址這些都可能會改變，但是openId不會改變，我們要實現登錄功能並識別客戶，必須要獲取到這個openid字段。

openid字段屬於比較敏感的信息，我們需要從微信服務器中獲取，這個就要用到我們的雲函數了，在我們創建的cloud文件夾中創建一個雲函數，右鍵–新建Node.js雲函數，命名爲login

可以看到他會默認幫我們創建兩個文件，index.js和package.json配置文件，package.json文件一般不做操作，主要操作的就是index.js文件

打開index.js文件，默認幫我們寫了一些代碼，前面兩行代碼是每個雲函數文件中必有的SDK插件是http請求處理插件，然後再init初始化

我們將不需要的代碼刪除一下，可以看到下面已經幫我們獲取到了openid，我們將其他的刪掉，只留下openid。最後login/index.js文件中的代碼如下

const cloud = require('wx-server-sdk')
cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    openid: wxContext.OPENID,
  }
}

重要！！！雲函數修改好了之後，一定要右鍵點擊雲函數，選擇創建並部署（或者上傳並部署）出現部署成功的彈窗，修改纔會生效
很多人會忘記，只要修改了就有重新上傳部署，才能看到修改後的效果

 

3、接下來來到pages/me/me.js文件，調用雲函數，還是在onGotUserInfo方法中使用wx.cloud.callFunction調用login雲函數

Page({
  data: {
    userInfo:{},
    //新加一個openid變量，保存獲取到的openid字段
    openid:""
  },
  onGotUserInfo: function(e){
    //將this對象保存到that中
    const that = this
    wx.cloud.callFunction({
      name: 'login',
      success: res => {
        console.log('雲函數調用成功')
        that.setData({
          openid: res.result.openid,
          userInfo: e.detail.userInfo
        })
        console.log("userInfo", this.data.userInfo)
        console.log("openid", this.data.openid)
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
      }
    })
  }
})

這樣就獲取到了用戶信息還有openid，接下來，我們來將獲取到的用戶信息展示出來，並隱藏登錄按鈕

<!-- 通過openid來判斷用戶是否登錄
如果openid字段爲空，說明沒有登錄，顯示登錄按鈕 -->
<view wx:if="{{!openid}}">
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">登錄</button>
</view>

<!-- 如果openid不爲空，就說明用戶登錄了
讀取用戶暱稱和用戶頭像顯示到頁面上 -->
<view class="uploader-container" wx:if="{{openid}}">
  <image class="image" src="{{userInfo.avatarUrl}}"></image>
  <view class='name'>{{userInfo.nickName}}</view>
</view>

再來到me.wxss文件中加個樣式

.image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: block;
  padding-top:20px;
}
.name {
  text-align: center;
  padding-top:10px;
}
button{
  background: #EA5149;
  width: 60%;
  margin-top: 100px;
  color: #ffffff;
}

登錄之後頁面的顯示如下：

 

4、保持用戶的登錄狀態

現在每次刷新，獲取到的用戶信息就又沒有了，我們想要保持用戶的登錄狀態，就需要獲取到用戶信息後，將用戶信息保存到緩存當中，這樣刷新頁面之後直接檢查緩存中是否有用戶信息就可以判斷是否登錄過，而不是一次次的請求後端重新獲取用戶信息

來到me.js文件中，修改onGotUserInfo方法，在success中添加代碼

success: res => {
  console.log('雲函數獲取成功', res.result.openid)
  that.setData({
    openid: res.result.openid,
    userInfo: e.detail.userInfo
  })

  //需要添加的代碼
  //將openid字段加入到userInfo變量中
  this.data.userInfo.openid = this.data.openid
  //打印一下當前userInfo的信息，檢查是否有openid字段
  console.log("userInfo", this.data.userInfo)
  //將userinfo信息保存到緩存中
   wx.setStorageSync('ui', this.data.userInfo)

然後再添加onLoad小程序生命週期函數，獲取緩存中的用戶信息，頁面加載時觸發。一個頁面只會調用一次

onLoad: function (options) {
  const ui = wx.getStorageSync('ui')
  this.setData({
    userInfo: ui,
    openid:ui.openid
  })
}

這樣我們再刷新頁面，會自動獲取用戶信息，不需要重複登錄了

 

四、點擊按鈕生成記錄數據（雲數據庫的插入和查詢）

1、完善首頁樣式

首頁主要就是創建兩個按鈕，並顯示當前的加減的數值，將pages/index/index.wxml文件中的代碼清空，加上+1和-1兩個按鈕

<view class="container">
  <view class="right button">+ 1</view>
  <view class="left button">- 1</view>
</view>

再來將pages/index/index.wxss文件的代碼清空，粘貼上下面的代碼

.button{
  width: 70px;
  height: 70px;
  line-height:70px;
  border-radius: 20%;
  border: none;
  text-align:center;
  font-size: 25px;
  color:#FFFFFF;
  font-weight:bold;
  margin-top:50px;
}

.right{
  background:#EA5149;
  float: right;
}
.left{
  background:#feb600;
}

現在保存文件看一下效果，可以看到上面有一個空白的間隔，
我們來到app.wxss文件中，將padding: 200rpx 0;這個樣式去掉，再保存樣式就正常了

 

2、實現點擊首頁的加減按鈕，在控制檯中打印出加減的信息

在pages/index/index.wxml文件中的兩個按鈕上面添加data-add=“1” bindtap=“addLog” 方法

<view class="right button" data-add="1" bindtap="addLog">+ 1</view>
<view class="left button" data-add="-1" bindtap='addLog'>- 1</view>

在兩個按鈕，這個要注意addLog傳參不能這樣寫addLog(1)，參數需要寫在前面data-add中，其中add是我們自己定義的，換成別的單詞也可以

再來到pages/index/index.js文件中，清空原先的代碼，並創建addLog方法

Page({
  //event就是我們通過data-add傳遞的參數對象
  addLog(event){
    //傳遞的參數event.currentTarget.dataset.add這樣來獲取
    const add = event.currentTarget.dataset.add
    console.log("add", add)
  }
})

現在點擊加減按鈕，在控制檯中已經可以打印出add的數字， 接下來我們將這個數據插入到數據庫中
 

3、向數據庫中添加加減記錄數據

點擊微信開發者工具中上面的雲開發按鈕，來到雲開發後臺，需要創建數據庫集合logs
集合創建完成之後，點擊權限設置，將數據記錄的權限更改爲【所有用戶可讀，僅創建者可讀寫】

再來到cloud雲開發文件中創建一個雲函數createlog，在cloud/createlog/index.js文件中，實現往logs數據表中插入一條記錄的功能

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

// 雲函數入口函數
exports.main = async (event, context) => {
  try {
    return await db.collection('logs').add({
      //event是從前端傳遞過來的參數對象，我們後面會在pages/index/index.js文件中的addLog方法中調用雲函數createlog時，傳遞add、date、openid這些參數
      data: {
        add: event.add,
        date:event.date,
        openid:event.openid
      }
    })
  }catch(e){
    //插入數據錯誤
    console.log(e)
  }
}

修改完成雲函數createlog之後，不要忘記部署函數，右鍵點擊這個雲函數，選擇【創建並部署：雲端安裝依賴】選項

接下來編輯pages/index/index.js文件的addlog方法，調用雲函數createlog，並傳遞add、date、openid這三個參數

  addLog(event){
    const add = event.currentTarget.dataset.add
    console.log("add", add)
    
    //需要添加的部分
    const that = this
    const ui = wx.getStorageSync('ui')
    
    //如果緩存中沒有用戶信息，就跳轉到我的頁面
    if (!ui.openid){
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      //調用雲函數createlog
      wx.cloud.callFunction({
        name: "createlog",
        data: {
          add: add,
          date: Date.now(),
          openid: ui.openid
        },
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }
  },

來測試一下，在首頁點擊加減按鈕，就會在數據庫中插入數據

這樣首頁功能就完成了，接下來我們來將插入的這些數據讀取出來，展示在logs日誌頁面中
 

五、將記錄數據展示到頁面上（雲數據庫的讀取）

主要編輯pages/logs文件夾
先來創建一個雲函數getlogs，並在cloud/getlogs/index.js文件中添加代碼

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

// 雲函數入口函數
exports.main = async (event, context) => {
  try {
    //需要從前端傳過openid數據，通過openid字段來獲取日誌信息
    return await db.collection('logs').where({
     openid: event.openid
    }).get()
  } catch (e) {
    //插入數據錯誤
    console.log(e)
  }
}

再來到pages/logs/logs.js文件中創建getlogs方法調用getlogs雲函數，並向雲函數傳遞openid這個參數

//加載util.js文件，用來格式化日期
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  getlogs:function(){
    //從緩存中獲取用戶信息
    const ui = wx.getStorageSync('ui')
    //如果緩存中沒有用戶信息，就跳轉到我的頁面
    if (!ui.openid) {
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      const that = this
      wx.cloud.callFunction({
        name: "getlogs",
        data: {
          openid: ui.openid
        },
        success: function (res) {
          console.log("ni", res)
          that.setData({
            logs: res.result.data.map(log => {
              var date = util.formatTime(new Date(log.date))
              log.date = date
              return log
            })
          })
          console.log("logs", that.data.logs)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }
  },
  //通過onShow生命週期函數，調用getlogs方法
  //這樣每次切換到日誌頁面，都會調用getlogs方法
  //在首頁點擊加減按鈕後，切換到日誌頁面，新增的日誌記錄就會自動更新，提高用戶體驗
  onShow:function(){
    this.getlogs()
  }
})

最後來到pages/logs/logs.wxml文件中添加代碼遍歷顯示日誌數據

<block wx:for="{{logs}}" wx:key="key">
  <view class="log-item">
    日期：{{item.date}} 分數：{{item.add}}
  </view>
</block>

在pages/logslogs.wxss文件中添加樣式

.log-item {
  text-align: left;
  padding: 10px 10px 0 0;
}

最後看一下記錄頁面的效果

 

六、部署上線

我們最後通過真機調試在手機上面測試一遍

如果手機上面測試有問題，但是在電腦微信開發者工具中測試沒有問題，一般是兩種情況：

• 雲函數沒有正確的部署，再重新右鍵選擇雲函數上傳一下，再重新測試
• 數據庫裏面有錯誤數據，根據真機調試返回的錯誤信息修改

手機測試沒有問題了，我們就要開始部署了在微信開發者工具中，點擊右上角的上傳按鈕

填寫好版本和備註，點擊上傳之後，就可以在小程序後臺賬號–管理–版本管理中看到了，我們點擊體驗版做最後的測試，沒有問題的話，點擊提交審覈就可以了

提交審覈之後，就是漫長的等待了，一般審覈時間在1-2天，長一點的要一週，多關注一下自己微信的消息，審覈通過之後會收到這樣的消息

再來到小程序後臺，點擊提交發布就可以將小程序發佈到線上，1-2小時左右，所有用戶都可以微信搜索到你的小程序了

當然更多的還是審覈未通過的消息

如果審覈未通過，登錄小程序後臺，在通知中心中可以查看具體原因，根據提示修改後再重新提交。個人小程序審覈比較嚴格，大家做好長期作戰的準備~~

 
 

源碼獲取：

在【貓寧一】公衆號中回覆【課件】獲取項目源碼以及課程ppt