Personal blog applet

---

1. Preface

This article introduces in detail Personal blog applet Cloud development process of , Including blog display page , Add the creation of blog page , And the uploading of cloud functions , Creation and use of database . At the same time, it uses form,text And other components and use Rich text Add a blog .

All data of this program is stored in cloud development , You don't need your own server . Features include ： Cloud database , Cloud functions , Cloud storage, etc , It is a nanny level tutorial for small program project learning ！ Welcome to learn .

2. Homepage blog data display

First , We designed the blog to show Static page . Each blog post contains avatars , nickname , brief introduction , Content , Pictures and other data , We designed it as a square display , And each square uses flex Layout style . The overall layout is divided into two structures , Up and down structure ： The user information is displayed above and the blog is displayed below . Left right structure ： Display user avatar, nickname, etc .

Modify the title of the applet ：

 "navigationBarTitleText": " Personal blog applet ",

Set the blog page structure ：

  <!-- Blog display -->

  <view class="blog-block">
    <view class="blog-card">
      <view class="blog-user">
        <image class="avatar" src="../../images/ Head portrait   The girl .png"></image>
        <view class="username"> The oranges </view>
        <button open-type="share" style="width: 60rpx;">
          <image class="icon-share" src="../../images/ Upload .png"></image>
        </button>
      </view>
      <view class="blog-item">
        <view class="blog-user"> The introduction of the blog is shown here </view>
        <view class="image-block">
          <image src="../../images/1.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>

Set blog page style ：

/** Some style codes are displayed */
.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%;
}

.blog-user{
    
  display: flex;
	flex-direction: row;
  align-items: center;
  justify-content:flex-start;
  width: 95%;
  padding-top: 10rpx;
}
.avatar {
    
	overflow: hidden;
	width: 80rpx;
	height: 80rpx;
	flex-shrink: 0;
	margin-right: 16rpx;
  border-radius: 50%;
}

Effect display ：

3. use data Data rendering blog display in

We have finished the static page above , Next through index.js Medium data To render the display of the page , First define blogs Data structure of , The following fields are included to realize dynamic data binding ：

    blogs:[{
    
      avatar:"../../images/ Head portrait   The girl .png",
      name:" The oranges ",
      brief:" The introduction of the blog is shown here ",
      content:" Blog content ",
      img:"../../images/1.png",
      time:10000
    }
    ]

stay wxml Modify the code in the file to realize dynamic data binding , At the same time, you can use for Loop to render the display of multiple blogs , At this time item refer to blogs Every object in it . The method is as follows ：

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

This realizes the dynamic binding of data , But the data is written dead , Data can only be maintained in the program , So we need to create cloud database , Put the data record on the back-end server of the program .

4. Create a collection using cloud database blogs

The purpose of creating cloud database is to put blog data into the cloud database of cloud development , Convenient maintenance ！ The cloud database is created in the cloud development console ：

We created one here blogs Collections are used to store data , The system will automatically generate a id A primary key . At this time, you can add data records here .

5. Read the data in the database

After creating the cloud database, we need to read the data , There are three steps ：1. Link to the database .2. Find the set of read data . 3. Read the required data .

Initialize database ：

const db =wx.cloud.database() 

Read data and put data Assign a value to blogs：

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

In this way, we can render the cloud database data to the front-end page , However, we still don't provide the function of adding blog in the front end , therefore , Next we will add a page , For users to add blogs ！

6. Create add blog page

Next, we will add a new page for users to add blogs , And set up tabBar. Create method ： Right click Pages Select new folder , Name it blogAdd, Right click the newly created folder and select new file , Name it blogAdd, Note that both names should be the same ！

Next, add tabBar, stay app.json In file tabBar Object's list Attribute ：

 {
    
        "pagePath": "pages/blogAdd/blogAdd",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-active.png",
        "text": " Add a blog "
      }

among iconPath Add tabBar Icon when not selected ,selectedIconPath Add the icon when selected .

After adding a new page , For the convenience of debugging , At this point, you can add a compilation mode , Modify the startup page , The next compilation will directly jump to the modified page instead of the home page .

The next one is about adding blog pages UI Design and function realization ！