鸿蒙项目云捐助第二十三讲云捐助项目云首页导航功能的实现
鸿蒙项目云捐助第二十三讲云捐助项目云首页功能的实现
前面完成过云捐赠项目的登录注册功能，这里通过云数据库登录成功后，就会进入到云首页，这里实现云首页的部分功能。
首先把离线项目中的component文件夹，data文件夹及模拟数据的mockjs文件夹拷贝到云项目中，具体操作如下图所示。
再把离线项目中的index首页及isLandComponent捐款岛这两个组件拷入到云捐助项目中。如下图所示。
这里拷贝到云项目中时，都把他们放在云项目中的ets文件夹中。
一般在云项目中，很多数据都是从云主机上面获取的，本地并没有什么数据，这里可以先从mockjs模拟数据中的导航数据开始。如下图所示的导航数据可以改成云数据。
这个数据可以理解成云函数的数据,这里可以建立导航的云函数,在云项目的cloudfunction文件夹中右健创建一个云函数,如下图所示。
这里创建云函数的名字中不能有下划线“_”, 这里的名称只能使用navdata,有下划线的会报错。
另外,在书写去函数时,返回资源不能包括Resource类型，这里用字符串来代替，把“icon”资源中前面的“$r(”去掉，把后面的“）”也去掉。 最后修整之后云函数的返回数据如下图所示。
云函数模拟底部导航分类数据后，把云函数运行一下，如下图所示。
这里使用“run”运行函数的方法需要登录，如果不登录就会有下图所示的提示。
登录帐户后“run”运行函数没有错误的输出内容如下。
运行云函数正常后，把云函数再部署到云端。如下图所示。
部署成功后，右下角会出现“Deploy successful”的字样，表示部署成功，如下图所示。
接下来我们使用代码加载云端的导航数据，
在加载导航数据时，需要结合同于生命周期，这里的生命周期图如下图所示。
根据组件的生命周期图，在方法build之前执行过aboutToAppear，这里就可以通过aboutToAppear执行云函数加载数据。如下图所示。
这里通过模拟器运行结果，看一下是否可以加载导航数据的云函数，运行时注意编辑器右上角的选项，这里必须是entry，才可以运行，如下图所示。
运行后在日志中查找，没有发现数据，这里只能改变思路，把加载导航数据放在登录页面的login方法中，当login登录成功时使用云函数加载数据，再通过组件传给index首页。首先把加载云函数的代码放在login中，如下图所示。
代码中把加载导航的云函数放在登录逻辑返回用户名列表的结果中，如果result.length>0则加载导航navdata的云函数，加载后再通过路由router跳转到首页，在调用首页跳转地，路由需要携带参数，这里router中的params中加入了navdata的导航数据的参数，在index组件接收时通过router.getParams接收navdata的参数，如下图所示代码。
这里把调用的数据放在导航的customTabs自定义底部导航布局中的文字，代码如下图所示。
然后再对custoTabs中的自底义底部导航布局中的图片，代码如下图所示。
这里也可以通过加载成功的数据控制文字的颜色,如下图所示。
使用了云函数的数据后，原来模拟的数据可以去除了，代码如图所示。
最终使用云函数得到的底部导航效果如下图所示。
