在公司讲解自己独立搭建的企业级移动端框架

·  阅读 1195
在公司讲解自己独立搭建的企业级移动端框架

前言

自从接到需要开发自己的移动端框架已经过去一段时间,目前已经完成了基本框架,通知我需要给业务部分做一期框架使用培训,听到这个通知的时候,还是满开心和自豪的,可以给同事讲解自己付出许久,终于有些成效的作品。也有些忐忑,因为之前没有机会在公开的场合做演讲,也怕自己不能讲好,总之是开心又夹杂着忧虑的复杂心情。尽管心情起伏,不过事情还是需要推进。对于自己讲解内容,有考虑过ppt形式,不过想着自己对于ppt的制作也不是太擅长,同时也应该使用程序员的记录方式,所以最终采用md的形式记录内容,效果的挺好的,简洁同时表达清晰,以下是移动端框架包含的一些内容,以及自己的讲解内容:

一、移动端框架介绍

mobile-ui 采用uni-app作为框架选型,做了几件事情

  • 集成uView UI
    • 对于uView一些组件做进一步封装和扩展,定制了符合的内置样式和功能;
    • 扩展了自定义组件
  • 集成luch-request的 http 请求插件
    • 做了多实例配置封装,提供了uni.$http 请求方式
    • 提供请求拦截
    • 集成了微信小程序登录方式
    • 集成 auth2 登录方式
  • 对于 uni-app 的路由跳转做了进一步封装
    • 提供了 uni.$route的路由跳转方式
    • 和 vue 一致的路由参数传递
    • 提供路由拦截
  • 集成SQLite,实现离线存储
  • 定制了符合开发规范的样式主题
  • 内置了原子级块级样式类名,减少样式书写
  • 提供组件使用代码,样例模板代码,可以直接复制,快速搭建页面
  • 提供VSCode插件,可以创建模板页面,组件提示
  • 提供完整详细的文档

二、项目创建和开发环境搭建

  • 提供对应脚手架工具,采用脚手架创建项目
  • HBuilderX应该下载最新的稳定版本
  • 如果是使用VS Code 开发, 可以查看这篇文章 vs code 配置uni-app开发环境

三、移动端组件使用

移动端框架目前有基础组件、布局组件、数据组件、导航组件、反馈组件五个分类,有二十个左右的组件,这是一篇文章,就不一一列举所有组件了,提一些我觉得比较好的组件,后续也会有对应组件的文章分析。

image.png

图标组件

我们使用uView2.0,u-icon不提供自定义图标集成了,就算提供了,也需要设置custom-prefix,使用起来比较繁琐,所以采用更简单的方式,实现了自定义组件m-icon,这个组件也对于uView的内置图标做了兼容,组件实现方式之前我也写过一篇文章了,uni-app自定义图标组件

手写签名组件

对于手写签名组件实现是挺简单的,网上也很容易搜到实现代码,但都没有说明其在微信小程序上会遇到什么样的问题,以及对应的解决方式,手写签名一般是采用canvas实现,采用横屏的展现形式,但是微信小程序对于canvas生成图片的旋转是很不友好的,需要另外一个canvas来实现旋转。手写签名转成图片时,需要使用uni.canvasToTempFilePath这个api,但是这个api没有正确使用的话,会导致图片生成很慢,需要好几秒甚至十几秒,这样的转换速度我们是接受不了的,可以通过设置导出图片的宽高destWidthdestHeight,牺牲一些图片分辨力,换取更好的性能,由于篇幅原因,后续会出专门文章,对于做完整分析。

Table 组件

对于移动端,由于宽度有限,没办法展示很多的内容,所以使用表格的场景比较少,但凡事总有例外,有些数据还是需要表格才能更好的展示,所以表格组件一样必不可少。表格的实现有两种方式,一种是外部提供数据,标签全部由组件做遍历渲染,这种数据驱动的方式实现比较简单,对于表格也有更好的控制,但是对于用户的使用不算很友好吧,对于插槽的使用也比较繁琐。一种是采用标签作为数据的载体,由于在小程序不支持table等标签,需要用view标签来实现tabletrthtd,但这是thtd的宽度共享就有些烦琐了,可以借助vuex来实现数据共享,当然也可以实现更简单的方式,采用display: table来模拟表格实现,也是很巧妙的。

实现一个列表页面滚动异步加载

这个部分主要展示规范的重用性,以及组件的灵活,完善特性,可以只写一点样式,甚至不需要任何样式,就可以快速的搭建出一个完整页面,让使用者可以更专注于页面逻辑实现,几分钟就可以实现完成以下页面。

image.png

介绍微信小程序开发及调试

  • 对于微信小程序的预览,真机调试都是需要wxId的,当公司还未申请到微信小程序时,可以自己去微信官方文档申请小程序测试号。
  • 对于小程序主包太大无法预览和发布问题,我们都知道微信小程序预览和发布的主包大小都不能超过 2M,否则无法真机预览和上传发布,我们现在有 uni-app 本身的基础包,uView 组件包,自定义组件包,还有集成路由和 http 包,导致我们的基础包很大,所以建议除 tabbar 的页面,其余页面采用分包的方式,避免主包过大,大于 2 M,导致发布和预览问题。
  • 关于调试时,小程序包过大问题,在调试阶段,为了调试的友好效果和编译速度等,HX 默认是没有对 JS 进行压缩和去除注释,也没有进行组件按需引入的,所以会导致 JS 文件都很大,我们需要在 HBuilder X 进行如下操作,再重新编译即可:
HBuilderX 运行->运行到小程序模拟器->勾选 运行时是否压缩代码
复制代码
  • 发布时主包依然超出2M,您需要从多个方面着手:
    • 小程序分包
    • 将静态资源放到服务器进行引用,例如图片,字体图标
    • 取消"ES6 转 ES5"设置
    • uni.scss由于会编译到每个页面,所以减少里面的代码
  • 可以在微信开发者工具的详情 -> 基本信息 -> 本地代码 -> 代码依赖分析 进行依赖包大小的分析。

image.png

介绍APP开发及调试

  • App真机调试,需要手机开启开发者模式,并且电脑连接手机
  • 可以使用HBuilderX自带的真机调试工具,使用方式
HBuilderX 运行->运行到手机或模拟器->勾选 显示webview调试控制台
复制代码

image.png

  • 可以在chrome输入chrome://inspect,使用chrome的调试工具,推荐使用这种方式,比HBuilderX更高效流畅

image.png

小结

文章到此结束了,如果你也对于移动端框架感兴趣,或者这在开发中,欢迎评论区讨论,共同成长。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改