image.png
因为项目要使用uniCloud做后台，所以这里勾选上。
image.png
image.png
右键—->创建云服务空间
image.png
空间名字和项目名称一致就可以了。
image.png
创建完成后 ，这些都是空的
image.png

数据库添加基础数据

image.png
3.0的版本
image.png
HBuilderX 3.0版本在database上右键去创建db_init.json文件
image.png

复制选中的这个地址
image.png

开这个链接
image.png

复制
image.png
HBuilder3.0以下的版本

  1. {
  2.   "collection_test": { // 集合（表名）
  3.     "data": [ // 数据
  4.       {
  5.         "_id": "da51bd8c5e37ac14099ea43a2505a1a5", // 一般不带_id字段，防止导入时数据冲突。
  6.         "name": "tom"
  7.       }
  8.     ],
  9.     "index": [{ // 索引
  10.       "IndexName": "index_a", // 索引名称
  11.       "MgoKeySchema": { // 索引规则
  12.         "MgoIndexKeys": [{
  13.           "Name": "index", // 索引字段
  14.           "Direction": "1" // 索引方向，1：ASC-升序，-1：DESC-降序，2dsphere：地理位置
  15.         }],
  16.         "MgoIsUnique": false, // 索引是否唯一
  17.         "MgoIsSparse": false // 是否为稀疏索引，请参考 https://uniapp.dcloud.net.cn/uniCloud/db-index.md?id=sparse
  18.       }
  19.     }],
  20.     "schema": { // HBuilderX 3.0.0以上版本schema不在此处，而是放在database目录下单独的`表名.schema.json`文件内
  21.       "bsonType": "object",
  22.       "permission": {
  23.         ".read": true,
  24.         ".create": false,
  25.         ".update": false,
  26.         ".delete": false
  27.       },
  28.       "required": [
  29.         "image_url"
  30.       ],
  31.       "properties": {
  32.         "_id": {
  33.           "description": "ID，系统自动生成"
  34.         },
  35.         "image_url": {
  36.           "bsonType": "string",
  37.           "description": "可以是在线地址，也支持本地地址",
  38.           "label": "图片url"
  39.         }
  40.       }
  41.     }
  42.   }
  43. }

复制到我们的项目中
image.png
这里我们生成两条记录
image.png
索引是让我们在查询的时候，速度更快。这里暂时不需要，删除即可。
image.png
只保留了数据
image.png
集合的名字我们改成list
image.png
这样就是我们的一个基础db初始化文件。
image.png

  1. {
  2.   "list": { // 集合（表名）
  3.     "data": [ // 数据
  4.       {
  5.         "name":"tom"        
  6.       },
  7.       {
  8.           "name":"LIMING"
  9.       }
  10.     ]
  11.   }
  12. }

鼠标右键这个文件。选择初始化云数据库
image.png

image.png
选择云服务空间
image.png
右键再次初始化数据库
image.png
image.png
云服务控制台 ，刷新就看到两条数据
image.png
id是自动生成的
image.png

这是准备好的文件
image.png
拖拽到HX里面打开，然后全选，复制全部
image.png
复制到我们的项目里面。
image.png
新建一个文件
image.png
image.png
然后在项目里面右键，初始化云数据库
image.png
list是测试用的，这里可以先删掉。
image.png
article存放文章相关的字段。
image.png

image.png

label标签分类
image.png
用户表
image.png

导入项目中使用的图片

图片可以从源码这里直接复制
D:\wjw\学习中\uni-app入门到实战 以项目为导向 掌握完整开发流程-wjw\0资料\imooc-news-master\imooc-news\static

image.png
选中图片直接拖过来
image.png
底部的tabBar用到的6张图片
image.png

实现tabBar

创建目录
image.png
把index托到tabBar目录下
image.png
路径修改下。
image.png

  1. "path": "pages/tabbar/index/index",

新建页面，关注的页面。
image.png
创建我的，个人中心的页面
image.png

页面关联到tabBar

在最下面增加tabBar的节点。声明颜色和选中的颜色。
image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#f07373"
  4.     }

设置背景色为白色。然后声明数组list，里面是每一个页面。
image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#f07373",
  4.         "backgroundColor":"#fff",
  5.         "list":[{
  7.         }]
  8.     }

页面路径和图标，第一个是首页。
image.png
选中的图标和标题。
image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#f07373",
  4.         "backgroundColor":"#fff",
  5.         "list":[{
  6.             "pagePath":"pages/tabbar/index/index",
  7.             "iconPath":"static/home.png",
  8.             "selectedIconPath":"static/home-active.png",
  9.             "text":"首页"
  10.         }]
  11.     }

另外两个页面。
image.png

  1. "list":[{
  2.             "pagePath":"pages/tabbar/index/index",
  3.             "iconPath":"static/home.png",
  4.             "selectedIconPath":"static/home-active.png",
  5.             "text":"首页"
  6.         },{
  7.             "pagePath":"pages/tabbar/follow/follow",
  8.             "iconPath":"static/follow.png",
  9.             "selectedIconPath":"static/follow-active.png",
  10.             "text":"关注"
  11.         },{
  12.             "pagePath":"pages/tabbar/my/my",
  13.             "iconPath":"static/my.png",
  14.             "selectedIconPath":"static/my-active.png",
  15.             "text":"我的"
  16.         }]

页面上加商店文字，看看效果。
image.png
image.png

image.png
chrome的手机模式下看效果。
image.png

image.png

以上就是项目的初始化

image.png

结束