【小程序雲開發完整流程+源碼】建立並上線小程序實戰項目 | 數據庫 | 雲函數 | 登陸

時間 2020-04-15

標籤小程序雲開發完整流程+源碼建立上線程序實戰項目數據庫函數登陸欄目 SQL 简体版

原文原文鏈接

你們好，我是寧一，前段時間錄製了微信小程序全棧開發的一個課程，教你們開發了一個叫作【真自律】的小程序。不少同窗已經跟着課程將小程序作出來了css

可是大部分同窗都沒有服務器和域名，作出來的項目只能在本身電腦上面運行。有的同窗加我好友說感受好惋惜，好不容易作出來的項目，居然不能和別人一塊兒分享。html

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

此次咱們直接使用小程序本身的語言來開發，由於此次要作的項目邏輯比較簡單。後面我會再單獨出一期課程教你們使用mpvue框架來進行雲開發vue

**課程分爲6個部分
一、項目介紹
二、建立項目、雲開發初始化、頁面初始化
三、登陸功能（雲函數的建立和調用）
四、點擊按鈕生成記錄數據（雲數據庫的插入）
五、將記錄數據展現到頁面上（雲數據庫的讀取）
六、項目部署上線**數據庫

如今咱們就開始吧~json

1、項目介紹

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

先在個人頁面，點擊登陸按鈕，登陸進來，會展現用戶的微信頭像和微信暱稱後端

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

2、建立項目、雲開發初始化、頁面初始化

一、建立項目

接下來咱們來建立項目，先來看看什麼是雲開發緩存

能夠理解爲微信官方給咱們的一個免費服務器，而且很是貼心的幫咱們部署好了小程序的環境，將服務器的一些功能，好比數據庫的增刪改查都封裝成了接口，咱們操做數據庫只須要調用他們封裝好的接口就能夠，很是的簡單

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

咱們登錄到小程序帳號中，拿到小程序的惟一標識AppId，建立雲開發項目必需要有AppID

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

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

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

二、雲開發初始化

（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雲開發環境，文件夾上面會有一個雲的標誌。

若是你保存文件以後，仍是顯示的未指定環境，那麼能夠關閉微信開發者工具，從新打開這個項目，應該就正常了

三、小程序頁面初始化

（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": "個人"
      }
    ]
  },

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

3、登陸功能

一、在pages/me/me.wxml文件中添加登陸按鈕

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

二、在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,
  }
}

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

三、接下來來到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;
}

登陸以後頁面的顯示以下：

四、保持用戶的登陸狀態

如今每次刷新，獲取到的用戶信息就又沒有了，咱們想要保持用戶的登陸狀態，就須要獲取到用戶信息後，將用戶信息保存到緩存當中，這樣刷新頁面以後直接檢查緩存中是否有用戶信息就能夠判斷是否登陸過，而不是一次次的請求後端從新獲取用戶信息

來到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
  })
}

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

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

一、完善首頁樣式

首頁主要就是建立兩個按鈕，並顯示當前的加減的數值，將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;這個樣式去掉，再保存樣式就正常了

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

在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的數字，接下來咱們將這個數據插入到數據庫中

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

點擊微信開發者工具中上面的雲開發按鈕，來到雲開發後臺，須要建立數據庫集合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日誌頁面中

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

主要編輯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;
}

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

6、部署上線

咱們最後經過真機調試在手機上面測試一遍

若是手機上面測試有問題，可是在電腦微信開發者工具中測試沒有問題，通常是兩種狀況：

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

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

填寫好版本和備註，點擊上傳以後，就能夠在小程序後臺帳號--管理--版本管理中看到了，咱們點擊體驗版作最後的測試，沒有問題的話，點擊提交審覈就能夠了

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