詩詞歌賦，樣樣精通！詩詞古語小程序帶你領略魅力古風丨實戰

時間 2019-11-30

標籤詩詞歌賦樣樣精通詩詞古語程序領略魅力古風實戰简体版

原文原文鏈接

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記錄的條數限制等），因此，這裏主要採用雲函數來操做數據庫。html

查詢數據、分頁查詢

函數根目錄上右鍵，在右鍵菜單中，選擇建立一個新的 Node.js 雲函數，咱們將該雲函數命名爲 collection_get。git

編輯 index.js：github

// 雲函數入口文件
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:json

// 更新數據 - 根據 _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. 分享或轉發功能

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

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 數據失敗

緣由：請看文檔：developers.weixin.qq.com/miniprogram…

解決：去掉json數據 {}之間的逗號, 若是最外層爲 []，也必須去掉, 最終形如：

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