混合式移动开发
⺩王超
技术经理@尚度元科技
⺩王磊
CTO@尚度元科技
前TW⾸首席咨询师
• 介绍混合式应⽤用开发
• 使⽤用Cordova和React构建混合式应⽤用
• 总结
混合式应⽤用是什么
Native的壳+Web的核
为什么⽤用混合式应⽤用
• 原⽣生应⽤用开发成本太⾼高
• ⼈人⼒力成本
• 时间成本
• 需要⽀支持多平台
• 开发速度要快
混合式应⽤用的优势
• 使⽤用Web技术栈
• 开发速度快
• ⽀支持多平台
• 动态性好
• 兼容性好
Web技术栈
Chrome开发⼯工具 + 热重载
代码热重载
Chrome开发⼯工具
多平台⽀支持
• iOS
• Android
• 微信
实时更新App
• 不受App Store审核时间
的限制
⾮非Native开发的解决⽅方案
⽀支持平台 语⾔言 UI 开源
Cordova
iOS, Android,
Windows Phone
及其他
HTML, JS &
CSS HTML + CSS 是
Xamarin iOS, Android & Windows Phone C# 原⽣生组件 否
React Native iOS, Android JS 原⽣生组件 是
Cordova + H5
• 学习成本低
• 团队⼈人员技能
• 多平台⽀支持
最终的App状态
• 多平台⽀支持：iOS, Android和微信App
• 类似原⽣生应⽤用的体验
• App实时在线更新，回避App Store的审核期
• 推送消息，微信⽀支付，⽀支付宝⽀支付等。
Android iOS 微信
多平台⽀支持
App Store Review
微信⽀支付
⽀支付宝⽀支付
地图定位
推送消息
社交分享
其他设备API WebView
• iOS: UIWebView
• Android: Crosswalk
• 微信：X5(Blink)
WeChat
选择Native外壳
• ⽣生态环境⽐比较好，有⼤大量插件
• 已经发布了
⽤用React开发单⻚页⾯面应⽤用
• ⾼高效的进⾏行DOM更新——Virtual DOM
• 社区⾮非常活跃
• react-router：管理路由
• redux：管理前端状态
• 对开发⼈人员友好的语⾔言
• 结合webpack可以轻易打包出针对不同环境的包
发布的过程
• gulp+webpack按不同平台打包
• ⽣生成manifest，⽤用于实时更新
• 发布到qiniu
Hybrid App不是银弹
• 性能问题
• ⼤大数据量的列表（可以通过动态render来解决）
• ⽤用户体验
• 动画效果
Hybrid App不是银弹
• ⼯工程问题
• 代码中会存在越来越多的平台相关的判断语句
• 仍然需要懂原⽣生应⽤用开发的⼈人
Hybrid App不是银弹
解决⽅方案
• 使⽤用Native语⾔言重写？
• 使⽤用原⽣生语⾔言重写Android和iOS
• 将现有的App作为H5版本在微信和⼿手机浏览器中
使⽤用
• 使⽤用React Native替换现有的App
使⽤用React Native
• 使⽤用React构建原⽣生应⽤用
• 可以复⽤用现有的业务逻辑
React Native介绍
搭建积⽊木的脚本
• 优点
• UI使⽤用原⽣生组件，体验会⽐比较好
• JS运⾏行在后台进程中，所以性能会⽐比较好
• 动画
和Cordova App的⽐比较
• 缺点
• React Native没办法在微信中使⽤用
• 使⽤用阉割版本的Flex Box和CSS
• 只能使⽤用暴露出来的Native API
• 还没有发布版本
和Cordova App的⽐比较
