本文是《uniCloud项目中树形分类页面的快速开发》的第四部分。介绍分类管理移动端页面的快速开发。利用插件市场的移动端模版，通过改写几行代码与管理端无缝衔接，实现云端一体的分类页面展示功能。
一、开发思路
uniCloud提供了云端一体的数据请求机制，不再通过API接口请求数据，给前端的开发带来了极大的方便，省去了前后端联调的大量工作。
本例中，为体现快速开发之快，我们不再自己动手写移动端的页面，而是在uniCloud的插件市场找到相应的插件，移植到项目中，稍加修改即可实现项目需求。
- 在uniCloud插件市场寻找合适的移动端模版页面。
- 将模版页面移植到移动端项目
uni-taxonomy中。 - 修改页面数据请求的js代码，直接请求云端数据。
- 将请求到的数据渲染到移植的页面上。
二、实现过程
1、在uniCloud的插件市场找到mix-mall 电商项目模版。
2、点击插件页面右上角使用HbuilderX导入插件按钮。
3、创建一个新的项目
4、运行新创建的项目，看到下面的页面说明项目运行正常。
5、示例中会用到模版的分类页面。
6、克隆模版项目的分类页面代码到uni-taxonomy中。
- 在右侧预览窗口，地址栏显示页面路径为
/pages/category/category,我们在mix-mall 电商项目模版项目文件列表中找到这个vue文件并复制。
- 在
uni-taxonomy项目名称上右击创建一个新的页面，页面名称为category。
- 将刚刚在
mix-mall 电商项目模版复制的category.vue文件粘贴在uni-taxonomy项目的pages/category目录下。
- 替换空页面，页面会显示一堆错误提示信息，不用担心，是因为请求到数据的代码还没有修改，暂时请求不到数据。
7、添加样式表。
uni-taxonomy项目是通过uni-starter模版建立的。我们既要保留uni-starter模版的样式表，又要兼顾使用移植项目mix-mall 电商项目模版的样式表。这样原来的页面和移植的页面才能正常显示。必须选择追加合并的方式。
-
将
mix-mall 电商项目模版项目的App.vue页面代码中的样式表<style lang='scss'> ....</style>的内容复制到uni-taxonomy项目App.vue页面代码对应位置。 -
将
mix-mall 电商项目模版项目的uni-scss文件中的内容复制，追加粘贴在uin-taxonomy项目uni-scss文件内容的尾部。
8、修改代码，请求数据。
mix-mall 电商项目模版的页面代码拿来就可以用，但也需要稍作修改才能完全融合。一是要将显示字段的名称与云端数据库定义的字段进行衔接，二是要将原来数据请求的代码改成向云端直接请求。
- 确保管理端
uni-taxonomy-admin项目正常运行中。在分类管理中，添加相应的模拟数据。
-
在移动端
uni-taxonomy预览窗口中用test账号登录（管理端已经创建该用户）。 -
在编辑器中修改
uni-taxonomy项目的pages/category/category.vue的代码，将显示字段的名称与云端数据库定义的字段进行衔接。-
根据分类管理字段设置的schema，将代码中所有的
.id改为._id,pid改为parent_id。 -
将图片链接地址
:src="titem.picture"改为:src="titem.imagefile.path"
-
-
对
methods中的代码块进行修改，将原来数据请求的代码改成向云端直接请求。
改成：
经过上述简单的复制粘贴和代码修改，移动端的页面就可以完美地展示出来了。
三、总结
至此，《uniCloud项目中树形分类页面的快速开发》的全部内容都分享完毕了。天下武功，唯快不破。uniCloud云端一体平台给我们的开发工作带来了极大的方便，大大减轻了开发的工作量。前端变全栈成为了可能。
由于本人才疏学浅，文中错误之处难免，欢迎批评指正。文中示例还有一些bug需要调试纠正，只能起一个抛砖引玉的作用。后期我会将文中的内容制作成视频发布，期望对初学者有所帮助。
