🌕文章目錄

• 1.前言
• 2.博客首頁數據展示
• 3.使用data中的數據渲染博客展示
• 4.使用云數據庫創建集合blogs
• 5.讀取數據庫中的數據
• 6.創建添加博客頁面
• 7.博客添加頁面樣式設計
• 8.總結

---

1.前言

這篇文章詳細的介紹了個人博客小程序的云開發流程，包括博客展示頁面，添加博客頁面的創建，以及云函數的上傳，數據庫的創建和使用。同時使用到了form，text等組件以及使用富文本添加博客。

本程序所有數據都存儲在云開發里面，不需要開發者自己的服務器。功能包括：云數據庫，云函數，云存儲等，是一個小程序項目學習的保姆級教程！歡迎大家學習。

2.博客首頁數據展示

首先，我們設計博客展示的靜態頁面。每篇博客包含頭像，昵稱，簡介，內容，圖片等數據組成，我們將其設計為一個方塊展示，并且每個方塊使用flex布局樣式。整體布局分為兩個結構，上下結構：上面顯示用戶信息下面顯示博客。左右結構：顯示用戶頭像昵稱等。

修改小程序的標題：

"navigationBarTitleText": "個人博客小程序",

設置博客頁面結構：

<!--博客展示--><view class="blog-block"><view class="blog-card"><view class="blog-user"><image class="avatar" src="../../images/頭像 女孩.png"></image><view class="username">橙子</view><button open-type="share" style="width: 60rpx;"><image class="icon-share" src="../../images/上傳.png"></image></button></view><view class="blog-item"><view class="blog-user">這里顯示博客的簡介</view><view class="image-block"><image src="../../images/1.png" mode="widthFix"></image></view></view></view></view>

設置博客頁面樣式：

/**部分樣式代碼展示*/ .blog-block{margin-bottom: 30rpx;padding: 20rpx; }.blog-card {margin-top: 30rpx;padding-bottom: 30rpx;width: 100%;display: flex;flex-direction: column;align-items: center;background-color: #fff;border-radius: 6rpx; }.blog-item {width: 95%; }

效果展示：

3.使用data中的數據渲染博客展示

上面我們已經做好了靜態頁面，接下來通過index.js中的data的數據來渲染頁面的顯示，首先來定義blogs的數據結構，包含了以下的字段來實現數據動態綁定：

blogs:[{avatar:"../../images/頭像 女孩.png",name:"橙子",brief:"這里顯示博客的簡介",content:"博客的內容",img:"../../images/1.png",time:10000}]

在wxml文件中修改代碼實現數據動態綁定，同時可以使用for循環來渲染多篇博客的顯示，此時的item指的是blogs里面的每一個對象。方法如下：

<image src="{{item.img}}" mode="widthFix"></image>

這樣就實現了數據的動態綁定，但是數據是寫死的，只能在程序中維護數據，所以我們就要創建云數據庫，把數據記錄放在程序后端服務器。

4.使用云數據庫創建集合blogs

創建云數據庫的目的是為了將博客的數據放到云開發的云數據庫中，方便維護！云數據庫在云開發控制臺中創建：

這里創建了一個blogs集合用于存儲數據，系統會自動生成一個id作為主鍵。這時可以在這里添加數據記錄。

5.讀取數據庫中的數據

創建好云數據庫以后我們就要實現數據的讀取，這里分為三個步驟：1.和數據庫建立鏈接。2. 找到讀取數據的集合。 3.讀取所需數據。

初始化數據庫：

const db =wx.cloud.database()

讀取數據并將data賦值給blogs：

db.collection("blogs").get({success:res=>{this.setData({blogs:res.data})}})

這樣我們就實現了將云數據庫的數據渲染到前端頁面，但是這樣我們還是沒有提供前端添加博客的功能，于是，下一步我們要添加一個頁面，用于用戶添加博客！

6.創建添加博客頁面

下一步我們將添加一個新的頁面用于用戶添加博客，并且設置tabBar。創建方法：右擊Pages選擇新建文件夾，命名為blogAdd，右擊新創建的文件夾選擇新建文件，命名為blogAdd，注意兩者名字要相同！

下一步添加tabBar，在app.json文件中tabBar對象的list屬性中添加：

{"pagePath": "pages/blogAdd/blogAdd","iconPath": "images/user.png","selectedIconPath": "images/user-active.png","text": "添加博客"}

其中iconPath中添加tabBar未選中時的圖標，selectedIconPath中添加選中時的圖標。

添加了新的頁面以后，為了方便調試，此時可以添加編譯模式，修改啟動頁面，下次編譯就直接跳轉到修改的頁面而不是首頁。

7.博客添加頁面樣式設計

接下來要完成的是該頁面的布局樣式和功能實現。主要使用到了form組件，input組件，textarea組件以及rich-text組件等。

先來做博客添加的靜態頁面，給頁面添加label組件，input組件，button組件，textarea組件等：

<!--頭像(后面設置為自動獲取微信頭像)--><view class="form-group"><label class="form-label">頭像</label><input value="../../images/頭像 女孩.png" name="avatar" class="form-control" placeholder="請輸入頭像" /><button type="primary" bindtap="onGetUserProfile" style="width:100rpx;padding:0rpx;margin:0rpx;">授權</button></view> <!--內容(后面要使用富文本輸入)--><view class="form-group form-column"><label class="form-label">內容</label><editor class="form-editor"></editor></view> <!--按鈕提交--><view style="margin-top:30rpx;margin-bottom:60rpx;"><button type="primary" form-type="submit">保存</button></view>

該頁面部分樣式展示：

.form-group {padding: 20rpx 10rpx;display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx solid #dfdfdf; }.form-label {color: #191919;width: 150rpx;padding-left: 15rpx;height: 60rpx;line-height: 60rpx;letter-spacing: 1rpx; }.form-title{font-size: 32rpx;color: #7f7f7f;width: 100%; }

效果展示：

8.總結

現在已經實現了博客展示頁面，博客添加頁面的樣式布局，主要用到一些微信小程序云開發的基礎知識，下一篇文章我們要實現form表單提交數據，小程序中富文本編輯器的使用，本地圖片的預覽和選擇以及云函數的一些相關操作。

總結

以上是生活随笔為你收集整理的微信小程序云开发|个人博客小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。