獨立開發者從0到1釋出一個微信小程式的採坑過程——使用幫助頁面

摘要： 需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。 實現的效果如下： 使用幫助頁.png 使用幫助頁入口.png 分析實現過程: 這個過程實現的不難，這裡之所以再介...

需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。

實現的效果如下：

分析實現過程:

這個過程實現的不難，這裡之所以再介紹是因為這裡的實現是通過微信的雲資料庫實現資料的動態填充。

這裡的動態填充是指：我們在沒有伺服器的情況下，如何再不更新版本的情況下更新資料呢？這就用到了小程式的雲資料庫。

實現過程如下：

• 在確保開啟雲資料開發，然後在資料庫中建立一張表格（集合）,用於存放我們動態顯示的資料。

  

  雲資料庫操作.png

• 在本地 js 中呼叫資料庫的連結，取到資料後填充到頁面上即可

  主要程式碼就下面這幾行：

// 初始化資料庫
const db = wx.cloud.database();
// 獲取環境
const testDB = wx.cloud.database({
env: '你的資料庫環境名稱'
});
// 表名
const table_name = 'guide_info';
Page({

/**
* 頁面的初始資料
*/
data: {
guide_infos:{}
},

/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
var that = this;
db.collection(table_name).get({
success: function (res) {
// 從資料庫獲取描述資料
that.setData({
guide_infos: res.data
})

}
})
},

const testDB = wx.cloud.database({ env: '你的資料庫名稱' }); 這裡填寫你資料庫的環境名稱，雲資料庫中允許一個賬號能建立兩個環境，一個用於測試環境，一個用於生產環境。

const table_name = 'guide_info'; 這裡是定義的表名

wxml 頁面的顯示就是一個 for 迴圈顯示兩行 text 元件就行了。

這裡也貼一下程式碼吧：

<view class='view-container'>
<block wx:for='{{guide_infos}}' wx-item='item'>
<view class='view-item'>
<text class='text-title'>{{item.title}}</text>
<text class='text-content'>{{item.content}}</text>
<view class='view-divider'></view>
</view>
</block>
</view>

使用幫助頁面實現的介紹就到這裡了，有問題的歡迎一起交流。

歡迎老鐵掃碼體驗一波（目前掃碼出現可能是查快遞頁面，這是個人開發者繞過上線提交的頁面，12月份會改為查開獎頁面）