基于 Vue和 TS的Web移动端项目实战心得(点击这里查看原文)

 mcuking   2019-12-06 09:40   333 人阅读  0 条评论
在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile[1] 的基础上修改的(mattermost 是一个开源的即时通讯方案)。

因为公司在这方面没有太多技术沉淀,所以在开发期间遇到了很多坑,经过一年多的技术攻克积累,最终形成了这套比较完善的解决方案,总结出来希望能够帮助到大家,尤其是对一些中小公司这方面经验不足的(PS: 大公司估计有他们自己的一套方案了)。

好了废话不多说,先亮下这个库的 GitHub 地址,后面还会不断完善,欢迎 star:

mobile-web-best-practice[2]

移动端 web 最佳实践,基于 vue-cli3[3] 搭建的 typescript[4] 项目,可以用于 hybrid 应用或者纯 webapp 开发。以下大部分内容同样适用于 react[5] 等前端框架。

其中有三个点尚在完善中:领域驱动设计(DDD)应用、微前端、性能监控,后续完成后会以单独的文章发出来。其中性能监控还没有太好的选择,类似错误监控 sentry 那种开源免费而且功能强大的工具,如果有人知道的麻烦告知下。文中难免有些错误或者更好的方案,也欢迎不吝赐教。

目录

  • 组件库[6]
  • JSBridge[7]
  • 路由堆栈管理(模拟原生 APP 导航)[8]
  • 请求数据缓存[9]
  • 构建时预渲染[10]
  • Webpack 策略[11]
    • 基础库抽离[12]
  • 手势库[13]
  • 样式适配[14]
  • 表单校验[15]
  • 阻止原生返回事件[16]
  • 通过 UA 获取设备信息[17]
  • mock 数据[18]
  • 调试控制台[19]
  • 抓包工具[20]
  • 异常监控平台[21]
  • 常见问题[22]

组件库

vant[23]

vux[24]

mint-ui[25]

cube-ui[26]

vue 移动端组件库目前主要就是上面罗列的这几个库,本项目使用的是有赞前端团队开源的 vant。

vant 官方目前已经支持自定义样式主题,基本原理就是在 less-loader[27] 编译 less[28] 文件到 css 文件过程中,利用 less 提供的 modifyVars[29] 对 less 变量进行修改,本项目也采用了该方式,具体配置请查看相关文档:

定制主题[30]

推荐一篇介绍各个组件库特点的文章:

Vue 常用组件库的比较分析(移动端)[31]

JSBridge

DSBridge-IOS[32]

DSBridge-Android[33]

WebViewJavascriptBridge[34]

混合应用中一般都是通过 webview 加载网页,而当网页要获取设备能力(例如调用摄像头、本地日历等)或者 native 需要调用网页里的方法,就需要通过 JSBridge 进行通信。

开源社区中有很多功能强大的 JSBridge,例如上面列举的库。本项目基于保持 iOS android 平台接口统一原因,采用了 DSBridge,各位可以选择适合自己项目的工具。

本项目以 h5 调用 native 提供的同步日历接口为例,演示如何在 dsbridge 基础上进行两端通信的。下面是两端的关键代码摘要:

安卓端同步日历核心代码,具体代码请查看与本项目配套的安卓项目 mobile-web-best-practice-container[35]

阅读全文

 发表评论


表情