雲開發實戰分享|一天搭建一個社群

騰訊云云開發發表於2019-04-01

原創：龍衣

前言

雖然不會後臺開發，但是也想自己做專案，正好雲開發出現了。開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。社群作為一個交流的平臺，可以通過釋出自己、別人喜歡的文字、圖片的方式進行交流分享。剛學完雲開發，正好可以用社群小程式專案練練手~

【社群小程式】功能實現

首頁【廣場】

●顯示使用者釋出的內容
●管理員釋出的一些教程
複製程式碼

訊息【釋出】

●釋出圖文
●水平圖片的滑動顯示
複製程式碼

個人中心【我的】

●顯示使用者的登入資訊
●使用者的收藏列表
●釋出歷史
●邀請好友
●產品意見
複製程式碼

一、首頁【廣場】

顯示使用者釋出的內容
管理員釋出的一些教程

實現的效果

實現要點

1.WXML 不同類別資料的顯示

通過 if-elif-else 實現，在 wxml檔案中通過 <block></block>渲染，因為它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。也就是說可以通過屬性來控制頁面是否要渲染這部分的內容，可以減少頁面渲染時間。

2.雲開發資料的獲取

先開通雲開發功能，參考官方文件，然後在建立專案的時候勾選上 使用雲開發模板（看個人吧，我直接使用後點選專案中的 login）就可以獲取到使用者的 oppenid，之後就可以使用雲資料庫了。

雲開發登入：

雲資料的獲取：

/**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    console.log('onload');
    this.getData(this.data.page);    
  },
  /**
   * 獲取列表資料
   * 
   */
  getData: function(page) {
    var that = this;
    console.log("page--->" + page);
    const db = wx.cloud.database();
    // 獲取總數
    db.collection('topic').count({
      success: function(res) {
        that.data.totalCount = res.total;
      }
    })
    // 獲取前十條
    try {
      db.collection('topic')
        .where({
          _openid: 'oSly***********vU1KwZE', // 填入當前使用者 openid
        })
        .limit(that.data.pageSize) // 限制返回數量為 10 條
        .orderBy('date', 'desc')
        .get({
          success: function(res) {
            // res.data 是包含以上定義的兩條記錄的陣列
            // console.log(res.data)
            that.data.topics = res.data;
            that.setData({
              topics: that.data.topics,
            })
            wx.hideNavigationBarLoading();//隱藏載入
            wx.stopPullDownRefresh();
            
          },
          fail: function(event) {
            wx.hideNavigationBarLoading();//隱藏載入
            wx.stopPullDownRefresh();
          }
        })
    } catch (e) {
      wx.hideNavigationBarLoading();//隱藏載入
      wx.stopPullDownRefresh();
      console.error(e);
    }
  },
複製程式碼

雲資料的新增：

/**
   * 儲存到釋出集合中
   */
  saveDataToServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    const topic = db.collection('topic')
    db.collection('topic').add({
      // data 欄位表示需新增的 JSON 資料
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一個物件，其中有 _id 欄位標記剛建立的記錄的 id
        // 清空，然後重定向到首頁
        console.log("success---->" + res)
        // 儲存到釋出歷史
        that.saveToHistoryServer();
        // 清空資料
        that.data.content = "";
        that.data.images = [];

        that.setData({
          textContent: '',
          images: [],
        })

        that.showTipAndSwitchTab();

      },
      complete: function(res) {
        console.log("complete---->" + res)
      }
    })
  },
複製程式碼

3.資料列表的分頁

主要就是定義一個臨時陣列存放載入上來的資料，然後通過傳遞給物件，最後傳遞到佈局中去。

/**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {
    var that = this;
    var temp = [];
    // 獲取後面十條
    if(this.data.topics.length < this.data.totalCount){
      try {
        const db = wx.cloud.database();
        db.collection('topic')
          .skip(5)
          .limit(that.data.pageSize) // 限制返回數量為 5 條
          .orderBy('date', 'desc')	// 排序
          .get({
            success: function (res) {
              // res.data 是包含以上定義的兩條記錄的陣列
              if (res.data.length > 0) {
                for(var i=0; i < res.data.length; i++){
                  var tempTopic = res.data[i];
                  console.log(tempTopic);
                  temp.push(tempTopic);
                }

                var totalTopic = {};
                totalTopic =  that.data.topics.concat(temp);

                console.log(totalTopic);
                that.setData({
                  topics: totalTopic,
                })
              } else {
                wx.showToast({
                  title: '沒有更多資料了',
                })
              }


            },
            fail: function (event) {
              console.log("======" + event);
            }
          })
      } catch (e) {
        console.error(e);
      }
    }else{
      wx.showToast({
        title: '沒有更多資料了',
      })
    }
    
  },
複製程式碼

二、訊息【釋出】

釋出圖文
水平圖片的滑動顯示（效果不是很好，可以改為九宮格實現）

釋出頁面效果如下：

分析如何實現

導航欄的實現很簡單就不說了，可參考我之前的文章
重點是中間的 ② 是內容區域
區域三是功能操作區

內容區域的實現

第一個是文字區域
第二個是水平的圖片展示區域

在圖片的右上角有關閉按鈕，這裡使用的是 icon元件。

主要的實現程式碼如下：

<view class="content">
  <form bindsubmit="formSubmit">
    <view class="text-content">
      <view class='text-area'>
        <textarea name="input-content" type="text" placeholder="說點什麼吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
      </view>

    </view>
    <scroll-view class="image-group" scroll-x="true">
      <block wx:for='{{images}}' wx:for-index='idx'>
      <view>
        <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
        <icon type='clear' bindtap='removeImg'  data-index="{{idx}}" ></icon>
      </view>
      </block>
      
    </scroll-view>
    <view class='btn-func'>
      <button class="btn-img" bindtap='chooseImage'>選擇圖片</button>
      <button class="btn" formType='submit'  open-type="getUserInfo">釋出圈圈</button>
      <!-- <image hidden=''></image> -->
    </view>
  </form>

</view>
複製程式碼

佈局樣式如下：

.content {
  height: 100%;
  width: 100%;
}

textarea {
  width: 700rpx;
  padding: 25rpx 0;
}

.text-content {
  background-color: #f3efef;
  padding: 0 25rpx;
}

.image-group {
  display: flex;
  white-space: nowrap;
  margin-top: 30px;
}

.image-group view{
  display: inline-block;
  flex-direction: row;
  width: 375rpx;
  height: 375rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  background-color: #cfcccc;
}

.image-group view image{
  width: 100%;
  height: 100%;
  align-items: center;
}

.image-group view icon{
  display: inline-block;
  vertical-align: top;
  position: absolute
}
.btn-func {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  align-items: center;
}

.btn-img {
  width: 220px;
  height: 45px;
  line-height: 45px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(113, 98, 250);
  color: #fff;
  border-radius: 50px;
}

.btn {
  width: 220px;
  height: 45px;
  line-height: 45px;
  background-color: #d50310;
  color: #fff;
  border-radius: 50px;
  margin-bottom: 20px;
}
複製程式碼

頁面佈局之後就該從 js中去處理資料了，在 js中主要實現的功能有：

文字內容的獲取
圖片的選擇
圖片的閱覽
圖片的刪除
將結果釋出到雲資料庫中

1.文字內容的獲取

 /**
   * 獲取填寫的內容
   */
  getTextAreaContent: function(event) {
    this.data.content = event.detail.value;
  },
複製程式碼

2.圖片的選擇

 /**
   * 選擇圖片
   */
  chooseImage: function(event) {
    var that = this;
    wx.chooseImage({
      count: 6,
      success: function(res) {
        // tempFilePath可以作為img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths

        for (var i in tempFilePaths) {
          that.data.images = that.data.images.concat(tempFilePaths[i])
        }
        // 設定圖片
        that.setData({
          images: that.data.images,
        })
      },
    })
  },
複製程式碼

3.圖片的預覽

 // 預覽圖片
  previewImg: function(e) {
    //獲取當前圖片的下標
    var index = e.currentTarget.dataset.index;

    wx.previewImage({
      //當前顯示圖片
      current: this.data.images[index],
      //所有圖片
      urls: this.data.images
    })
  },
複製程式碼

4.圖片的刪除

/**
   * 刪除圖片
   */
  removeImg: function(event) {
    var position = event.currentTarget.dataset.index;
    this.data.images.splice(position, 1);
    // 渲染圖片
    this.setData({
      images: this.data.images,
    })
  },
複製程式碼

5.釋出內容到資料庫中

資料釋出到資料中，需要先開啟雲開發，然後在資料庫中建立集合也就是表之後就是呼叫資料庫的增刪改查API即可。

 /**
   * 新增到釋出集合中
   */
  saveToHistoryServer: function(event) {
    var that = this;
    const db = wx.cloud.database();
    db.collection('history').add({
      // data 欄位表示需新增的 JSON 資料
      data: {
        content: that.data.content,
        date: new Date(),
        images: that.data.images,
        user: that.data.user,
        isLike: that.data.isLike,
      },
      success: function(res) {
        // res 是一個物件，其中有 _id 欄位標記剛建立的記錄的 id
        console.log(res)
      },
      fail: console.error
    })
  },
複製程式碼

三、個人中心【我的】

【顯示使用者的登入資訊】主要就是呼叫小程式介面，獲取使用者的微信公開資訊進行展示
【使用者的收藏列表】獲取資料庫中的收藏列表進行展示
【釋出歷史】在釋出頁面，當釋出成功將資料存到釋出歷史表中，需要的時候獲取該表的資料進行展示
【邀請好友】呼叫小程式的分享介面，直接分享給微信群，或者個人
【產品意見】一個類似於釋出頁的頁面，實現思路和釋出頁實現是一樣的。

實現的效果

實現分析

1.要實現的效果

在使用者進入個人中心，直接彈出獲取使用者資訊彈窗
顯示圓形的使用者頭像

2.授權彈窗

官方獲取使用者資訊文件調整

為優化使用者體驗，使用 wx.getUserInfo 介面直接彈出授權框的開發方式將逐步不再支援。從2018年4月30日開始，小程式與小遊戲的體驗版、開發版呼叫 wx.getUserInfo 介面，將無法彈出授權詢問框，預設呼叫失敗。正式版暫不受影響。

也就是以前的 wx.getUserInfo不直接彈出授權視窗了，而且在新版中呼叫會直接返回fail，現在的做法呢就是通過點選一個button 去實現使用者授權功能。

文件中說明了有兩種方式能夠獲取使用者資訊。

一個是利用 <open-data>獲取公開的使用者資訊：

<open-data type="userNickName" lang="zh_CN"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
複製程式碼

另一個是利用button 元件將 open-type 指定為 getUserInfo型別：

  <!-- 需要使用 button 來授權登入 -->
  <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登入</button>
  <view wx:else>請升級微信版本</view>

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 檢視是否授權
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
  // 獲取到使用者資訊
    console.log(e.detail.userInfo)
  }
})
複製程式碼

3.中實現圓形頭像

<view class='amountBg'>
  <view class='img'>
    <open-data type="userAvatarUrl"></open-data>
  </view>
  <view class='account'>
    <view class='nick-name'>
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view class='address'>
      <open-data type="userCountry" lang="zh_CN"></open-data>·
      <open-data type="userProvince" lang="zh_CN"></open-data>·
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
  </view>
</view>
複製程式碼

css 樣式如下：

.amountBg {
  display: flex;
  flex-direction: row;
  height: 100px;
  background-color: #5495e6;
  align-items: center;
}

.img {
  overflow: hidden;
  display: block;
  margin-left: 20px;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
  align-items: center;
}

.nick-name{
  font-family: 'Mcrosoft Yahei';
  font-size: 16px;
}

.address{
  font-size: 13px;
}
.nav {
  width: 15px;
  color: #fff;
}
複製程式碼

可能存在的一些問題

其他使用者釋出的內容，有時候顯示不出來？將資料庫的許可權設定為全部人可見。
釋出內容之後返回首頁沒有自動重新整理？在廣場首頁 onShow 的時候獲取資料庫的資料進行展示。
clone 原始碼後執行不起來？需要在自己的雲資料庫中建立對應的表。

一天開發一個播放器Demo：PLDroidPlayer實戰
2017-12-11
播放器
實戰：雲開發·實現奶茶店小程式（一）
2021-09-09
Opencl從零實戰（一）--windows搭建開發環境
2024-09-05
Windows開發環境
Taro + 小程式雲開發實戰
2018-10-30
小程式·雲開發實戰 - 迷你微博
2019-07-24
小程式雲開發專案實戰
2018-11-17
雲原生微信小程式開發實戰
2021-01-02
微信小程式
分享一個最最基本實用的開發流程
2020-07-25
藉助雲開發搭建專屬技術部落格小程式丨實戰
2019-12-26
實戰|如何使用雲開發實現照片附件上傳開發
2021-12-01
實戰·使用taro+雲開發快速開發小程式
2019-02-21
智慧平安社群管理系統搭建，智慧社群一體化綜合服務平臺開發
2021-02-24
Taro + 雲開發實戰|日語用例助手
2019-03-26
第一天來圖靈社群
2019-03-22
圖靈
分享一個用 go 開發的一款跨雲 vpc 通訊專案
2021-08-08
Go
分享一門go最強實戰課程《全流程開發 GO實戰電商網站高併發秒殺系統》——推薦分享
2019-08-20
Go網站
雲開發—掃碼點餐系統實戰
2022-11-24
雲棲社群發福利啦！每日一分享，50份好禮送不停
2016-08-05
React 開發實戰（一）- Repeat 元件
2017-09-29
React元件
【Android 開發 VR 實戰】三. 開發一個尋寶類 VR 遊戲 TreasureHunt
2019-02-28
AndroidVR遊戲
一人一天，如何開發一個抖音級的短視訊？
2018-09-17
SpringCloud Alibaba實戰（4：基本開發框架搭建）
2021-06-10
SpringGCCloud框架
智慧社群綜合管理系統開發，智慧化平安社群管理平臺搭建
2021-03-17
混合開發實戰：App里拉起一個小程式（IOS篇）
2022-04-27
APPiOS
三、產品實戰：如何在一天內交付一個招聘評估系統
2024-05-20
從零開始react實戰:雲書籤-1 react環境搭建
2019-07-31
React
分享一個用於前端開發的實時更新工具 - iweb
2015-10-18
前端Web
實戰分享｜雲信IM SDK介面設計實踐
2020-07-02
雲伺服器搭建 Prometheus 與實戰（上）
2019-01-15
伺服器Prometheus
在滴滴雲 DC2 雲伺服器上搭建 ZooKeeper 叢集實戰(一)
2019-01-04
伺服器
Cordova - 使用Cordova開發iOS應用實戰1（配置、開發第一個應用）
2016-07-29
iOS
敏捷開發的6個實戰經驗
2013-12-06
敏捷
爬蟲實戰開發學習（一）
2021-07-06
爬蟲
GO 語言 Web 開發實戰一
2023-01-20
GoWeb
分享一個高顏值的技術社群 HackerTalk黑客說
2022-05-18
黑客
來到圖靈社群的第一天
2020-05-19
圖靈
Flutter實戰 | 從 0 搭建「網易雲音樂」APP（六、歌詞（一））
2019-10-29
FlutterAPP
智慧社群系統開發解決方案，平安智慧社群綜合管理平臺搭建
2021-04-12

雲開發實戰分享|一天搭建一個社群

前言

【社群小程式】功能實現

一、首頁【廣場】

實現的效果

實現要點

1.WXML 不同類別資料的顯示

2.雲開發資料的獲取

3.資料列表的分頁

二、訊息【釋出】

釋出頁面效果如下：

分析如何實現

內容區域的實現

1.文字內容的獲取

2.圖片的選擇

3.圖片的預覽

4.圖片的刪除

5.釋出內容到資料庫中

三、個人中心【我的】

實現的效果

實現分析

1.要實現的效果

2.授權彈窗

3.中實現圓形頭像

可能存在的一些問題

相關文章