1 新建uni-app项目——通讯录
在 HBuilder 选择文件，新建（如果提示需要安装插件，按照提示安装即可，稍后会要求登陆，如果没有HBuilder账户，可以根据提示去注册）：
2 创建云服务空间并关联项目
在 uniCloud 目录上单击右键，选择打开 uniCloud Web 控制台，根据提示创建云服务空间：
在 uniCloud 目录上单击右键，选择 关联云服务空间或项目，选择刚刚创建好的云服务空间：
3 创建数据表
在Web控制台的云数据库下点击创建数据表：
点击表结构，编辑 read 属性值为 true：
4 录入数据
点击 添加记录：
添加记录后的数据列表：
5 前端创建组件，读取数据表
在 pages 目录上单击右键，点击新建页面，新建 list 页面：
点击预览，运行当前项目，然后修改 list.vue 如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <template>
<view>
<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
<view v-if="error">{{error.message}}</view>
<view v-else>
{{data}}
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
|
运行出现如下错误：
在 database 目录上单击右键，点击下载所有DB schema及扩展校验函数，刷新后即可看到查询到的数据：
在 DCloud 插件市场中搜索 uni-ui ，点击使用HBuilderX 导入插件：
修改 list.vue 如下，实现通讯录列表：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <template>
<view>
<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
<view v-if="error">{{error.message}}</view>
<view v-else>
<uni-list>
<uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
|
点击预览，出现scss/sass编译插件未安装的错误，按照提示去安装即可：
修改 list.vue 如下，实现长按删除记录：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<view>
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
<view v-if="error">{{error.message}}</view>
<view v-else>
<uni-list>
<uni-list-item v-for="item in data" @longpress.native="rmItem(item._id)" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
rmItem(id) {
this.$refs.udb.remove(id)
}
}
}
</script>
<style>
</style>
|
长按后效果如下：
点击确定会提示权限校验未通过：
可以修改 database/contacts.schema.json 文件的 delete 字段值为 true，然后在 contacts.schema.json 上单击右键，点击上传DB Schema，然后再点击确定就可以删除，删除后如下所示：
在 pages 目录上单击右键，点击新建页面，新建 add 页面，修改 add.vue 如下，实现新增记录功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <template>
<view>
<uni-easyinput v-model="item.name" placeholder="姓名" />
<uni-easyinput v-model="item.phone" placeholder="电话" />
<button type="default" @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
"name":"",
"phone":""
}
}
},
methods: {
submit() {
const db = uniCloud.database();
db.collection('contacts').add(this.item).then(e=>{
console.log(e)
})
}
}
}
</script>
<style>
</style>
|
运行效果如下：
出现权限校验未通过，只需修改 database/contacts.schema.json 文件的 create 字段值为 true，然后在 contacts.schema.json 上单击右键，点击上传DB Schema，然后再点击确定就可以添加，添加后出现错误：数据库验证失败：提交的字段["name","phone"]在本地数据表的schema文件中不存在”。
修改 database/contacts.schema.json 文件如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
"bsonType": "object",
"required": [],
"permission": {
"read": true,
"create": true,
"update": false,
"delete": true
},
"properties": {
"_id": {
"description": "ID，系统自动生成"
},
"name":{},
"phone":{}
}
}
|
然后在 contacts.schema.json 上单击右键，点击上传DB Schema，再次提交后效果如下所示：
回到列表页，发现已经添加成功了：
在 pages 目录上单击右键，点击新建页面，新建 update 页面，修改 update.vue 如下，实现更新记录功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <template>
<view>
<uni-easyinput v-model="item.name" placeholder="姓名" />
<uni-easyinput v-model="item.phone" placeholder="电话" />
<button type="default" @click="submit">更新</button>
</view>
</template>
<script>
export default {
data() {
return {
item:{
"_id":"",
"name":"",
"phone":""
}
}
},
onLoad({item}) {
this.item = JSON.parse(item)
},
methods: {
submit() {
const db = uniCloud.database();
let item = {...this.item}
delete item._id
db.collection('contacts').doc(this.item._id).update(item).then(e=>{
console.log(e)
})
}
}
}
</script>
<style>
</style>
|
修改 list.vue 如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <template>
<view>
<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="contacts">
<view v-if="error">{{error.message}}</view>
<view v-else>
<uni-list>
<uni-list-item v-for="item in data" @click.native="updateFn(item)" @longpress.native="rmItem(item._id)" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
updateFn(item){
uni.navigateTo({
url: '../update/update?item='+JSON.stringify(item),
success: res => {},
fail: () => {},
complete: () => {}
})
},
rmItem(id) {
this.$refs.udb.remove(id)
}
}
}
</script>
<style>
</style>
|
修改 database/contacts.schema.json 文件如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| {
"bsonType": "object",
"required": [],
"permission": {
"read": true,
"create": true,
"update": true,
"delete": true
},
"properties": {
"_id": {
"description": "ID，系统自动生成"
},
"name":{},
"phone":{}
}
}
|
然后在 contacts.schema.json 上单击右键，点击上传DB Schema，预览运行后，在list页面单击联系人即可进入修改页面：
点击更新后，回到list页面刷新后：
