SpringCloud微服务实战——搭建企业级开发框架（四十八）：【移动开发】整

程序员 · 2024-9-27 08:51:28

uni-app默认使用uni-ui全端兼容的、高性能UI框架，在我们开发过程中可以满足大部门的需求了，而且如果是为了兼容性，还是猛烈发起使用uni-ui作为UI框架使用。
如果作为初创公司，自身又不想费太多精力去自己计划一套UI框架，那么DCloud插件市场提供了很多精良的UI框架，最紧张的是有些UI框架可以大概提供一整套行业的页面模板，好比，前几年电商项目比力火，Vant、ColorUI等提供了一整套电商模板方案，界面计划非常风雅。
项目之前使用过ColorUI，惋惜的是ColorUI已经很久没更新了，后续是否可以大概继承更新还是个未知数，迩来刚好要做一个雷同于论坛圈子的移动应用，在DCloud插件市场找到了界面计划雅观、底子组件丰富的图鸟UI和图鸟模板-圈子，接下来以图鸟UI为例介绍怎样在uni-app项目中集成第三方UI并实现登录注册功能。
一、导入图鸟UI库并设置收效

以下部门内容参考图鸟UI官方摆设文档
1、起首从DCloud插件市场下载ZIP包大概直接使用HBuilderX导入插件

官方插件搜索下载,我这里是直接使用HBuilderX导入插件，可以方便预览插件，复制文件操作也可以在HBuilderX中举行，相比力下载ZIP会方便一点。

2、整合第三方UI的store文件

在gitegg-uni-app-v2的/store/modules文件夹下新建tuniao.js ,复制图鸟UI项目下 /store/index.js内容到tuniao.js中，将const store = new Vuex.Store修改为const tuniao = new Vuex.Store ，将export default store修改为export default tuniao
修改gitegg-uni-app-v2的/store/index.js，引入tuniao.js
tuniao.js

......const store = new Vuex.Store({......})......export default storeindex.js
......import tuniao from './modules/tuniao'...... modules: { user, tuniao },......3、将第三方UI复制必须的库文件到我们新建的uni-app项目中

将图鸟UI项目根目次下的tuniao-ui目次复制到gitegg-uni-app-v2根目次下
将图鸟UI项目根目次下的static/css目次复制到gitegg-uni-app-v2的static/css目次
将图鸟UI项目根目次下的libs目次复制到gitegg-uni-app-v2根目次下

4、在项目中引入TuniaoUI主JS库

在gitegg-uni-app-v2项目根目次中的main.js中，引入并使用TuniaoUI的JS库，注意这两行设置代码要放在import Vue之后。
// 引入全局TuniaoUI主JS库import TuniaoUI from 'tuniao-ui'Vue.use(TuniaoUI)5、引入TuniaoUI的全局SCSS主题文件

在gitegg-uni-app-v2项目根目次的uni.scss中引入tuniao-ui/theme.scss文件。
@import 'tuniao-ui/theme.scss';6、设置easycom组件模式

修改page.json文件，增长easycom组件设置，确保pages.json中只有一个easycom字段。
easycom组件模式：传统vue组件，须要安装、引用、注册，三个步调后才华使用组件。easycom将其精简为一步。只要组件安装在项目的components目次下，并符合components/组件名称/组件名称.vue目次结构。就可以不消引用、注册，直接在页面中使用。
// pages.json{ "easycom": { "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue" }, "pages": [ //pages数组中第一项体现应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { // ...... } ] // ......}二、复制模板页面文件并预览

上面的操作将图鸟UI底子库的内容复制集成到了我们的uni-app项目中，我们在实际开发过程中大概并不须要全部的页面模板文件，否则会使步伐多了很多无用代码。
1、复制图鸟UI根目次下/templatePage/login/demo1/demo1.vue文件，替换我们gitegg-uni-app-v2目次下的login.vue内容

2、启动手机模仿器 > 双击桌面的nox_adb快捷方式(如果已启动，可以忽略此步调)

3、在HBuilder X中依次点击运行 -> 运行得手机或模仿器 -> 运行到Android App基座

4、弹出框会体现我们已毗连的模仿器，点击运行，HBuilderX就可以自动打包app发布到模仿器中运行，并可以在HBuilderX控制台查察运行日志

5、第三方UI的登录页面预览

第三方UI框架集成之后，就可以直接使用此中已经计划完满好的组件了。在业务的开发过程中，每个行业都有自己特需的组件，使用这些计划好的组件，可以节省时间，快速完成业务需求。
GitEgg-Cloud是一款基于SpringCloud整合搭建的企业级微服务应用开发框架，开源项目地点:

Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg
欢迎感爱好的小搭档Star支持一下。

SpringCloud微服务实战——搭建企业级开发框架（四十八）：【移动开发】整

所属分类: 问答交流

新帖推荐: 30日

推荐作品