「这是我参与11月更文挑战的第14天,活动概况检查:2021最后一次更文挑战」

前语

如何运用uniapp云开发, 几分钟就能开发一个最简略的背单词小程序 和 h5 页面呢, 有很多人入门比较困难,我们记录下过程给我们参考

1,下载uni-starter模版

ext.dcloud.net.cn/plugin?id=5…

2,增加单词数据库表部分

  • 了解 schema 语法 uniapp.dcloud.net.cn/uniCloud/sc… schema 描写数据库和 schema 语法的文档

  • 增加新的schema 文件

DB Schema

DB Schema是根据 JSON 格局定义的数据结构的标准。

它有很多重要的效果:

  • 描绘现有的数据意义。能够一目了然的阅读每个表、每个字段的用处。
  • 设定数据操作权限(permission)。什么样的角色能够读/写哪些数据,都在这儿配置。
  • 设定字段值域能接受的格局(validator),比方不能为空、需契合指定的正则格局。
  • 设定字段之间的束缚联系(fieldRules),比方字段结束时刻需求晚于字段开始时刻。
  • 设置数据的默认值(defaultValue/forceDefaultValue),比方服务器当前时刻、当前用户id等。
  • 设定多个表的字段间映射联系(foreignKey),将多个表按一个虚拟表直接查询,大幅简化联表查询。
  • 根据schema主动生成前端界面(schema2code),包含列表、概况、新建和修正页面,主动处理校验规矩。

操作如下

uniapp 开发开发一个简略的背单词小程序-01

代码如下

{
	"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 文件生成根本页面

uniapp 开发开发一个简略的背单词小程序-01
uniapp 开发开发一个简略的背单词小程序-01

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": "我的"
        }]
    }

到达躲藏下其他页面的目的

uniapp 开发开发一个简略的背单词小程序-01

  • 修正个人中心的内容为

uniapp 开发开发一个简略的背单词小程序-01