uniapp 開發開發一個簡單的背單詞小程式-01

語言: CN / TW / HK
時間 2022-10-31 04:15:05

「這是我參與11月更文挑戰的第14天，活動詳情檢視：2021最後一次更文挑戰」

前言

如何使用uniapp雲開發， 幾分鐘就能開發一個最簡單的背單詞小程式 和 h5 頁面呢， 有很多人入門比較困難，我們記錄下過程給大家參考

1，下載uni-starter模版

https://ext.dcloud.net.cn/plugin?id=5057

2，新增單詞資料庫表部分

  • 熟悉 schema 語法 https://uniapp.dcloud.net.cn/uniCloud/schema schema 描寫資料庫和 schema 語法的文件

  • 新增新的schema 檔案

DB Schema

DB Schema是基於 JSON 格式定義的資料結構的規範。

它有很多重要的作用：

  • 描述現有的資料含義。可以一目瞭然的閱讀每個表、每個欄位的用途。
  • 設定資料操作許可權(permission)。什麼樣的角色可以讀/寫哪些資料，都在這裡配置。
  • 設定欄位值域能接受的格式(validator)，比如不能為空、需符合指定的正則格式。
  • 設定欄位之間的約束關係(fieldRules)，比如欄位結束時間需要晚於欄位開始時間。
  • 設定資料的預設值(defaultValue/forceDefaultValue)，比如伺服器當前時間、當前使用者id等。
  • 設定多個表的欄位間對映關係(foreignKey)，將多個表按一個虛擬表直接查詢，大幅簡化聯表查詢。
  • 根據schema自動生成前端介面（schema2code），包括列表、詳情、新建和編輯頁面，自動處理校驗規則。

操作如下

image.png

程式碼如下

``` { "bsonType": "object", "description":"單詞表", "required": [], "permission": { "read": true, "create": true, "update": true, "delete": true }, "properties": { "_id": { "description": "ID，系統自動生成" }, "user_id": { "bsonType": "string", "description": "建立者", "forceDefaultValue": { "$env": "uid" }, "foreignKey": "uni-id-users._id" }, "en_title": { "bsonType": "string", "description": "英文單詞", "maxLength": 20, "title": "英文單詞", "required":true, "trim": "both" }, "ch_title": { "bsonType": "string", "description": "中文單詞", "maxLength": 20, "title": "中文單詞", "required":true, "trim": "both" }, "description": { "bsonType": "string", "description": "描述", "maxLength": 500, "title": "描述", "required":true, "trim": "both" }, "example": { "bsonType": "string", "description": "例句", "maxLength": 20, "title": "例句", "required":true, "trim": "both" } } }

``` 其中。permission 允許前端操作資料庫，properties 欄位中的 reuired 代表是否必填

3，生成頁面

  • 上傳shhema檔案
  • 使用shema 檔案生成基本頁面

image.png image.png

4，適當的修改

  • 修改page.json檔案的tabBar 為 "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [{ "pagePath": "pages/word/list", "iconPath": "static/tabbar/grid.png", "selectedIconPath": "static/tabbar/grid_active.png", "text": "我的單詞表" }, { "pagePath": "pages/ucenter/ucenter", "iconPath": "static/tabbar/me.png", "selectedIconPath": "static/tabbar/me_active.png", "text": "我的" }] } 達到隱藏下其他頁面的目的

image.png

  • 修改個人中心的內容為

image.png

「」
「」