微信小程序雲開發項目實戰進階 - 詩詞大全、成語大全、成語接龍、百家姓

1. 小程序功能

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

2. 小程序地址

https://github.com/caochangkui/miniprogram-project

3. 小程序預覽：

4. 部分截圖

首頁

列表頁

詳情頁 分享頁

唐詩宋詞

成語接龍

5. 項目結構

.
├── 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                                      // 全局樣式

6. 封裝雲函數操作數據庫

本項目是使用的小程序雲開發。雲開發提供了一個 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)

7. 數據庫模糊查詢

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

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)

8. 使用 async/await 處理異步

參考文章：微信小程序中使用Async/await方法處理異步請求

9. 分享或轉發功能

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

• 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 已經被官方廢棄，所以理論上小程序是無法得知用戶是否將頁面分享成功的

10. 用戶授權

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

11. 需要注意的幾個坑

查詢不到數據

數據表中明明有數據，但是 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年），字樂天，號香山居士..."
}