前言
自从接到需要开发自己的移动端框架已经过去一段时间，目前已经完成了基本框架，通知我需要给业务部分做一期框架使用培训，听到这个通知的时候，还是满开心和自豪的，可以给同事讲解自己付出许久，终于有些成效的作品。也有些忐忑，因为之前没有机会在公开的场合做演讲，也怕自己不能讲好，总之是开心又夹杂着忧虑的复杂心情。尽管心情起伏，不过事情还是需要推进。对于自己讲解内容，有考虑过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开发环境
三、移动端组件使用
移动端框架目前有基础组件、布局组件、数据组件、导航组件、反馈组件五个分类，有二十个左右的组件，这是一篇文章，就不一一列举所有组件了，提一些我觉得比较好的组件，后续也会有对应组件的文章分析。
图标组件
我们使用uView2.0，u-icon不提供自定义图标集成了，就算提供了，也需要设置custom-prefix，使用起来比较繁琐，所以采用更简单的方式，实现了自定义组件m-icon，这个组件也对于uView的内置图标做了兼容，组件实现方式之前我也写过一篇文章了，uni-app自定义图标组件
手写签名组件
对于手写签名组件实现是挺简单的，网上也很容易搜到实现代码，但都没有说明其在微信小程序上会遇到什么样的问题，以及对应的解决方式，手写签名一般是采用canvas实现，采用横屏的展现形式，但是微信小程序对于canvas生成图片的旋转是很不友好的，需要另外一个canvas来实现旋转。手写签名转成图片时，需要使用uni.canvasToTempFilePath这个api，但是这个api没有正确使用的话，会导致图片生成很慢，需要好几秒甚至十几秒，这样的转换速度我们是接受不了的，可以通过设置导出图片的宽高destWidth、destHeight，牺牲一些图片分辨力，换取更好的性能，由于篇幅原因，后续会出专门文章，对于做完整分析。
Table 组件
对于移动端，由于宽度有限，没办法展示很多的内容，所以使用表格的场景比较少，但凡事总有例外，有些数据还是需要表格才能更好的展示，所以表格组件一样必不可少。表格的实现有两种方式，一种是外部提供数据，标签全部由组件做遍历渲染，这种数据驱动的方式实现比较简单，对于表格也有更好的控制，但是对于用户的使用不算很友好吧，对于插槽的使用也比较繁琐。一种是采用标签作为数据的载体，由于在小程序不支持table等标签，需要用view标签来实现table、tr、th、td，但这是th、td的宽度共享就有些烦琐了，可以借助vuex来实现数据共享，当然也可以实现更简单的方式，采用display: table来模拟表格实现，也是很巧妙的。
实现一个列表页面滚动异步加载
这个部分主要展示规范的重用性，以及组件的灵活，完善特性，可以只写一点样式，甚至不需要任何样式，就可以快速的搭建出一个完整页面，让使用者可以更专注于页面逻辑实现，几分钟就可以实现完成以下页面。
介绍微信小程序开发及调试
- 对于微信小程序的预览，真机调试都是需要wxId的，当公司还未申请到微信小程序时，可以自己去微信官方文档申请小程序测试号。
- 对于小程序主包太大无法预览和发布问题，我们都知道微信小程序预览和发布的主包大小都不能超过 2M，否则无法真机预览和上传发布，我们现在有 uni-app 本身的基础包，uView 组件包，自定义组件包，还有集成路由和 http 包，导致我们的基础包很大，所以建议除 tabbar 的页面，其余页面采用分包的方式，避免主包过大，大于 2 M，导致发布和预览问题。
- 关于调试时，小程序包过大问题，在调试阶段，为了调试的友好效果和编译速度等，HX 默认是没有对 JS 进行压缩和去除注释，也没有进行组件按需引入的，所以会导致 JS 文件都很大，我们需要在 HBuilder X 进行如下操作，再重新编译即可：
HBuilderX 运行->运行到小程序模拟器->勾选 运行时是否压缩代码
复制代码- 发布时主包依然超出2M，您需要从多个方面着手：
- 小程序分包
- 将静态资源放到服务器进行引用，例如图片，字体图标
- 取消"ES6 转 ES5"设置
- uni.scss由于会编译到每个页面，所以减少里面的代码
- 可以在微信开发者工具的详情 -> 基本信息 -> 本地代码 -> 代码依赖分析 进行依赖包大小的分析。
介绍APP开发及调试
- App真机调试，需要手机开启开发者模式，并且电脑连接手机
- 可以使用HBuilderX自带的真机调试工具，使用方式
HBuilderX 运行->运行到手机或模拟器->勾选 显示webview调试控制台
复制代码- 可以在chrome输入
chrome://inspect，使用chrome的调试工具，推荐使用这种方式，比HBuilderX更高效流畅
小结
文章到此结束了，如果你也对于移动端框架感兴趣，或者这在开发中，欢迎评论区讨论，共同成长。
