1. 小程式功能

• 古詩詞大全
• 成語大全
• 成語接龍
• 詩詞飛花令
• 詩詞分享、收藏
• 詩詞接龍
• 唐詩宋詞起名字
• 百家姓
• 猜謎語

2. 小程式預覽：

3. 部分截圖

首頁

列表頁

詳情頁 分享頁

唐詩宋詞

成語接龍

4. 專案結構

.
├── README.md
├── project.config.json                              // 專案配置檔案
├── cloudfunctions | 雲環境                           // 存放雲函式的目錄
│   ├── login                                        // 使用者登入雲函式
│   │   ├── index.js
│   │   └── package.json
│   └── collection_get                               // 資料庫查詢雲函式
│   │   ├── index.js
│   │   └── package.json
│   └── collection_update                               // 資料庫更新雲函式
│       ├── index.js
│       └── package.json
└── miniprogram
    ├── images                                        // 存放小程式圖片
    ├── lib                                           // 配置檔案
    ├── pages                                         // 小程式各種頁面
    |   ├── index                                     // 首頁
    |   └── menu                                      // 分類頁
    |   └── user                                      // 使用者中心
    |   └── search                                    // 搜尋頁
    |   └── list                                      // 列表頁 搜尋結果頁
    |   └── detail                                    // 詳情頁
    |   └── collection                                // 收藏頁
    |   └── find                                      // 發現頁
    |   └── idiom-jielong                             // 成語接龍頁
    |   └── poet                                      // 作者頁
    |   └── baijiaxing                                // 百家姓
    |   └── xiehouyu                                  // 歇後語
    |   └── poet                                      // 作者頁
    |   └── suggest                                   // 建議反饋
    |   └── ...                                       // 其他
    ├── style                                         // 樣式檔案目錄
    ├── app.js                                        // 小程式入口檔案
    ├── app.json                                      // 全域性配置
    └── app.wxss                                      // 全域性樣式
 

5. 封裝雲函式操作資料庫

本專案是使用的小程式雲開發。雲開發提供了一個 JSON 資料庫，使用者可以直接在雲端進行資料庫增刪改查，但是，小程式對使用者操作資料的許可權進行了一定的限制（例如資料update、一次性get記錄的條數限制等），所以，這裡主要採用雲函式來操作資料庫。

查詢資料、分頁查詢

函式根目錄上右鍵，在右鍵選單中，選擇建立一個新的 Node.js 雲函式，我們將該雲函式命名為 collection_get。

編輯 index.js：

// 雲函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init()

const db = cloud.database()

exports.main = async (event, context) => {

  /**
   * page: 第幾頁
   * num: 每頁幾條資料
   * condition： 查詢條件，例如 { name: '李白' }
   */

  const {database, page, num, condition} = event
  console.log(event)

  try {
    return await db.collection(database)
                  .where(condition)
                  .skip(num * (page - 1))
                  .limit(num)
                  .get()
  } catch (err) {
    console.log(err)
  }
}
 

使用 collection_get 雲函式

例如，按照查詢條件{tags: '唐詩三百首'}查詢詩詞列表，每頁num = 10條資料:

let {list, page, num} = this.data
let that = this

this.setData({
    loading: true
})

wx.cloud.callFunction({
    name: 'collection_get',
    data: {
        database: 'gushici',
        page,
        num,
        condition: {
            tags: '唐詩三百首'
        }
    },
    }).then(res => {
        if(!res.result.data.length) { // 沒搜尋到
            that.setData({
                loading: false,
                isOver: true
            })
        } else {
            let res_data = res.result.data
            list.push(...res_data)
            that.setData({
                list,
                page: page + 1, // 頁面加1
                loading: false
            })
        }
    })
    .catch(console.error)
}
 

更新資料

注意，當我們向資料庫中新增記錄時，系統會自動幫我們為每條記錄新增上使用者的 openid 欄位，但如果，資料表是自己用 json/csv 檔案匯入的，就不存在 openid 欄位，此時，當更新這個資料表時，系統會認為你不是建立者，所以也就無法更新。

此時，就需要通過雲函式更新資料庫，新建雲函式 collection_update, 編輯 index.js:

// 更新資料 - 根據 _id 更新已開啟人數
const cloud = require('wx-server-sdk')
cloud.init()

const db = cloud.database()
const _ = db.command

exports.main = async (event, context) => {

  const { id } = event
  console.log(event)

  try {
    return await db.collection('gushici').doc(id)
      .update({
        data: {
          opened: _.inc(1)
        },
      })
  } catch (e) {
    console.error(e)
  }
}

使用 collection_update 雲函式

更新某_id資料的開啟人數：

let _id = e.currentTarget.dataset.id
wx.cloud.callFunction({
    name: 'collection_update',
    data: {
        id: _id
    },
}).then(res => {
    console.log(res.data)
})
.catch(console.error)

6. 資料庫模糊查詢

小程式雲開發可以使用正則表示式進行模糊查詢。例如， 根據使用者輸入關鍵詞，查詢標題中存在改關鍵詞的古詩詞。

let database = 'gushici'
let condition =  {
    name: {
        $regex:'.*'+ inputValue,
        $options: 'i'
    }
}

let { list, page, num } = this.data
let that = this

this.setData({
    loading: true
})

// 模糊查詢
wx.cloud.callFunction({
    name: 'collection_get',
    data: {
        database,
        page,
        num,
        condition
    },
}).then(res => {
    if (!res.result.data.length) { // 沒搜尋到
        that.setData({
            loading: false,
            isOver: true
        })
    } else {
        let res_data = res.result.data
        list.push(...res_data)
        that.setData({
            list,
            loading: false
        })
    }
})
.catch(console.error)

7. 分享或轉發功能

小程式中頁面觸發轉發的方式有兩種：

• 1.在小程式的右上角選擇轉發，需要定義函式 Page.onShareAppMessage，如果當前頁面沒有定義此事件，則點選後無效果。
• 2.通過給 button 元件設定屬性 open-type="share"，可以在使用者點選按鈕後觸發 Page.onShareAppMessage 事件，如果當前頁面沒有定義此事件，則點選後無效果。

使用者還可以在 Page.onShareAppMessage 事件中自定義轉發後顯示的標題、圖片、路徑：

onShareAppMessage(res) {
    let id = wx.getStorageSync('shareId')
    if (res.from === 'button') {
        // 來自頁面內轉發按鈕
        console.log(res.target)
    }
    return {
        title: `跟我一起挑戰最長的成語接龍吧！`,
        path: `pages/find/find`,
        imageUrl: '/images/img.jpg',
    }
},

注意：轉發成功/失敗的 callback 已經被官方廢棄，所以理論上小程式是無法得知使用者是否將頁面分享成功的

8. 使用者授權

詳情請參考文章：微信小程式之授權

9. 需要注意的幾個坑

查詢不到資料

資料表中明明有資料，但是 collection.get 到的卻為空。解決：可以在雲開發控制檯中開啟資料庫許可權設定，設定許可權。

更新資料失敗

collection.update 函式呼叫成功單返回的卻是0行記錄被更新，因為小程式端不允許更新沒有 openid 欄位的資料。解決：可以通過雲函式更新資料庫。

background 圖片 url 不能為本地圖片

解決：1：將圖片上傳到伺服器，填寫伺服器上的圖片路徑地址。2：將圖片轉為 base64 編碼。

往雲資料庫中批量匯入 json 資料失敗

原因：請看文件：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html

解決：去掉json資料 {}之間的逗號, 如果最外層為 []，也必須去掉, 最終形如：

{
    "index": "作者_1",
    "type": "作者",
    "poet": "李白",
    "abstract": "李白（701年－762年），字太白，號青蓮居士，唐朝浪漫主義詩人，被後人譽為“詩仙”..."
}
{
    "index": "作者_2",
    "type": "作者",
    "poet": "白居易",
    "abstract": "白居易（772年－846年），字樂天，號香山居士..."
}

原始碼連結

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

---

如果你有關於使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯絡我們哦~比心！

相關推薦