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

「这是我参与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），包括列表、详情、新建和编辑页面，自动处理校验规则。

操作如下

代码如下

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

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

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

修改个人中心的内容为