微信小程序云開發(fā)項目實戰(zhàn)進階 - 詩詞大全&成語接龍

Ku_Andrew 發(fā)布于2019-08-23 14:37 / 3640人閱讀

摘要：此時，就需要通過云函數(shù)更新數(shù)據(jù)庫，新建云函數(shù)編輯更新數(shù)據(jù)根據(jù)更新已打開人數(shù)使用云函數(shù)更新某數(shù)據(jù)的打開人數(shù)數(shù)據(jù)庫模糊查詢小程序云開發(fā)可以使用正則表達式進行模糊查詢。

1. 小程序功能

古詩詞大全

成語大全

成語接龍

詩詞飛花令

詩詞分享、收藏

詩詞接龍

唐詩宋詞起名字

百家姓

猜謎語

2. 小程序地址

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

3. 小程序預(yù)覽：

5. 項目結(jié)構(gòu)

.
├── README.md
├── project.config.json                              // 項目配置文件
├── cloudfunctions | 云環(huán)境                           // 存放云函數(shù)的目錄
│   ├── login                                        // 用戶登錄云函數(shù)
│   │   ├── index.js
│   │   └── package.json
│   └── collection_get                               // 數(shù)據(jù)庫查詢云函數(shù)
│   │   ├── index.js
│   │   └── package.json
│   └── collection_update                               // 數(shù)據(jù)庫更新云函數(shù)
│       ├── index.js
│       └── package.json
└── miniprogram
 ?? ├── images                                        // 存放小程序圖片
 ?? ├── lib                                           // 配置文件
 ?? ├── pages                                         // 小程序各種頁面
 ?? |   ├── index                                     // 首頁
 ?? |   └── menu                                      // 分類頁
 ?? |   └── user                                      // 用戶中心
 ?? |   └── search                                    // 搜索頁
 ?? |   └── list                                      // 列表頁 搜索結(jié)果頁
 ?? |   └── detail                                    // 詳情頁
 ?? |   └── collection                                // 收藏頁
 ?? |   └── find                                      // 發(fā)現(xiàn)頁
 ?? |   └── idiom-jielong                             // 成語接龍頁
 ?? |   └── poet                                      // 作者頁
 ?? |   └── baijiaxing                                // 百家姓
 ?? |   └── xiehouyu                                  // 歇后語
 ?? |   └── poet                                      // 作者頁
 ?? |   └── suggest                                   // 建議反饋
 ?? |   └── ...                                       // 其他
 ?? ├── style                                         // 樣式文件目錄
    ├── app.js                                        // 小程序入口文件
    ├── app.json                                      // 全局配置
    └── app.wxss                                      // 全局樣式

6. 封裝云函數(shù)操作數(shù)據(jù)庫

本項目是使用的小程序云開發(fā)。云開發(fā)提供了一個 JSON 數(shù)據(jù)庫，用戶可以直接在云端進行數(shù)據(jù)庫增刪改查，但是，小程序?qū)τ脩舨僮鲾?shù)據(jù)的權(quán)限進行了一定的限制（例如數(shù)據(jù)update、一次性get記錄的條數(shù)限制等），所以，這里主要采用云函數(shù)來操作數(shù)據(jù)庫。

查詢數(shù)據(jù)、分頁查詢

函數(shù)根目錄上右鍵，在右鍵菜單中，選擇創(chuàng)建一個新的 Node.js 云函數(shù)，我們將該云函數(shù)命名為 collection_get。

編輯 index.js：

// 云函數(shù)入口文件
const cloud = require("wx-server-sdk")
cloud.init()

const db = cloud.database()

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

  /**
   * page: 第幾頁
   * num: 每頁幾條數(shù)據(jù)
   * 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 云函數(shù)

例如，按照查詢條件{tags: "唐詩三百首"}查詢詩詞列表，每頁num = 10條數(shù)據(jù):

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)
}

更新數(shù)據(jù)

注意，當(dāng)我們向數(shù)據(jù)庫中添加記錄時，系統(tǒng)會自動幫我們?yōu)槊織l記錄添加上用戶的 openid 字段，但如果，數(shù)據(jù)表是自己用 json/csv 文件導(dǎo)入的，就不存在 openid 字段，此時，當(dāng)更新這個數(shù)據(jù)表時，系統(tǒng)會認(rèn)為你不是創(chuàng)建者，所以也就無法更新。

此時，就需要通過云函數(shù)更新數(shù)據(jù)庫，新建云函數(shù) collection_update, 編輯 index.js:

// 更新數(shù)據(jù) - 根據(jù) _id 更新已打開人數(shù)
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 云函數(shù)

更新某_id數(shù)據(jù)的打開人數(shù)：

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. 數(shù)據(jù)庫模糊查詢

小程序云開發(fā)可以使用正則表達式進行模糊查詢。例如，根據(jù)用戶輸入關(guān)鍵詞，查詢標(biāo)題中存在改關(guān)鍵詞的古詩詞。

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. 分享或轉(zhuǎn)發(fā)功能

小程序中頁面觸發(fā)轉(zhuǎn)發(fā)的方式有兩種：

1.在小程序的右上角選擇轉(zhuǎn)發(fā)，需要定義函數(shù) Page.onShareAppMessage，如果當(dāng)前頁面沒有定義此事件，則點擊后無效果。

2.通過給 button 組件設(shè)置屬性 open-type="share"，可以在用戶點擊按鈕后觸發(fā) Page.onShareAppMessage 事件，如果當(dāng)前頁面沒有定義此事件，則點擊后無效果。

用戶還可以在 Page.onShareAppMessage 事件中自定義轉(zhuǎn)發(fā)后顯示的標(biāo)題、圖片、路徑：

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

注意：轉(zhuǎn)發(fā)成功/失敗的 callback 已經(jīng)被官方廢棄，所以理論上小程序是無法得知用戶是否將頁面分享成功的 10. 用戶授權(quán)

詳情請參考文章：微信小程序之授權(quán)

11. 需要注意的幾個坑 查詢不到數(shù)據(jù)

數(shù)據(jù)表中明明有數(shù)據(jù)，但是 collection.get 到的卻為空。解決：可以在云開發(fā)控制臺中打開數(shù)據(jù)庫權(quán)限設(shè)置，設(shè)置權(quán)限。

更新數(shù)據(jù)失敗

collection.update 函數(shù)調(diào)用成功單返回的卻是0行記錄被更新，因為小程序端不允許更新沒有 openid 字段的數(shù)據(jù)。解決：可以通過云函數(shù)更新數(shù)據(jù)庫。

background 圖片 url 不能為本地圖片

解決：1：將圖片上傳到服務(wù)器，填寫服務(wù)器上的圖片路徑地址。2：將圖片轉(zhuǎn)為 base64 編碼。

往云數(shù)據(jù)庫中批量導(dǎo)入 json 數(shù)據(jù)失敗

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

解決：去掉json數(shù)據(jù) {}之間的逗號, 如果最外層為 []，也必須去掉, 最終形如：

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