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} = eventconsole.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 = thisthis.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.datalist.push(...res_data)that.setData({list,page: page + 1, // 頁面加1loading: 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.commandexports.main = async (event, context) => {const { id } = eventconsole.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 = thisthis.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.datalist.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相關的技術故事/技術實戰經驗想要跟大家分享，歡迎留言聯系我們哦~比心！

轉載于:https://www.cnblogs.com/CloudBase/p/11325702.html

總結

以上是生活随笔為你收集整理的诗词歌赋，样样精通！诗词古语小程序带你领略魅力古风丨实战的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。