🌕文章目錄

• 1.前言
• 2.博客首頁數(shù)據(jù)展示
• 3.使用data中的數(shù)據(jù)渲染博客展示
• 4.使用云數(shù)據(jù)庫創(chuàng)建集合blogs
• 5.讀取數(shù)據(jù)庫中的數(shù)據(jù)
• 6.創(chuàng)建添加博客頁面
• 7.博客添加頁面樣式設(shè)計(jì)
• 8.總結(jié)

---

1.前言

這篇文章詳細(xì)的介紹了個(gè)人博客小程序的云開發(fā)流程，包括博客展示頁面，添加博客頁面的創(chuàng)建，以及云函數(shù)的上傳，數(shù)據(jù)庫的創(chuàng)建和使用。同時(shí)使用到了form，text等組件以及使用富文本添加博客。

本程序所有數(shù)據(jù)都存儲(chǔ)在云開發(fā)里面，不需要開發(fā)者自己的服務(wù)器。功能包括：云數(shù)據(jù)庫，云函數(shù)，云存儲(chǔ)等，是一個(gè)小程序項(xiàng)目學(xué)習(xí)的保姆級(jí)教程！歡迎大家學(xué)習(xí)。

2.博客首頁數(shù)據(jù)展示

首先，我們?cè)O(shè)計(jì)博客展示的靜態(tài)頁面。每篇博客包含頭像，昵稱，簡介，內(nèi)容，圖片等數(shù)據(jù)組成，我們將其設(shè)計(jì)為一個(gè)方塊展示，并且每個(gè)方塊使用flex布局樣式。整體布局分為兩個(gè)結(jié)構(gòu)，上下結(jié)構(gòu)：上面顯示用戶信息下面顯示博客。左右結(jié)構(gòu)：顯示用戶頭像昵稱等。

修改小程序的標(biāo)題：

"navigationBarTitleText": "個(gè)人博客小程序",

設(shè)置博客頁面結(jié)構(gòu)：

<!--博客展示--><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>

設(shè)置博客頁面樣式：

/**部分樣式代碼展示*/ .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中的數(shù)據(jù)渲染博客展示

上面我們已經(jīng)做好了靜態(tài)頁面，接下來通過index.js中的data的數(shù)據(jù)來渲染頁面的顯示，首先來定義blogs的數(shù)據(jù)結(jié)構(gòu)，包含了以下的字段來實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)綁定：

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

在wxml文件中修改代碼實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)綁定，同時(shí)可以使用for循環(huán)來渲染多篇博客的顯示，此時(shí)的item指的是blogs里面的每一個(gè)對(duì)象。方法如下：

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

這樣就實(shí)現(xiàn)了數(shù)據(jù)的動(dòng)態(tài)綁定，但是數(shù)據(jù)是寫死的，只能在程序中維護(hù)數(shù)據(jù)，所以我們就要?jiǎng)?chuàng)建云數(shù)據(jù)庫，把數(shù)據(jù)記錄放在程序后端服務(wù)器。

4.使用云數(shù)據(jù)庫創(chuàng)建集合blogs

創(chuàng)建云數(shù)據(jù)庫的目的是為了將博客的數(shù)據(jù)放到云開發(fā)的云數(shù)據(jù)庫中，方便維護(hù)！云數(shù)據(jù)庫在云開發(fā)控制臺(tái)中創(chuàng)建：

這里創(chuàng)建了一個(gè)blogs集合用于存儲(chǔ)數(shù)據(jù)，系統(tǒng)會(huì)自動(dòng)生成一個(gè)id作為主鍵。這時(shí)可以在這里添加數(shù)據(jù)記錄。

5.讀取數(shù)據(jù)庫中的數(shù)據(jù)

創(chuàng)建好云數(shù)據(jù)庫以后我們就要實(shí)現(xiàn)數(shù)據(jù)的讀取，這里分為三個(gè)步驟：1.和數(shù)據(jù)庫建立鏈接。2. 找到讀取數(shù)據(jù)的集合。 3.讀取所需數(shù)據(jù)。

初始化數(shù)據(jù)庫：

const db =wx.cloud.database()

讀取數(shù)據(jù)并將data賦值給blogs：

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

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

6.創(chuàng)建添加博客頁面

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

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

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

其中iconPath中添加tabBar未選中時(shí)的圖標(biāo)，selectedIconPath中添加選中時(shí)的圖標(biāo)。

添加了新的頁面以后，為了方便調(diào)試，此時(shí)可以添加編譯模式，修改啟動(dòng)頁面，下次編譯就直接跳轉(zhuǎn)到修改的頁面而不是首頁。

7.博客添加頁面樣式設(shè)計(jì)

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

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

<!--頭像(后面設(shè)置為自動(dòng)獲取微信頭像)--><view class="form-group"><label class="form-label">頭像</label><input value="../../images/頭像 女孩.png" name="avatar" class="form-control" placeholder="請(qǐng)輸入頭像" /><button type="primary" bindtap="onGetUserProfile" style="width:100rpx;padding:0rpx;margin:0rpx;">授權(quán)</button></view> <!--內(nèi)容(后面要使用富文本輸入)--><view class="form-group form-column"><label class="form-label">內(nèi)容</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.總結(jié)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。