最近使用 vue 开发 h5 混合应用一年多了,总结了一套最佳实践模板,欢迎围观,希望能够帮到你

2019-08-24 19:21:23 +08:00
 mcuking
用 vue 写了一年多的混合应用,期间遇到了不少坑和一些收获一直想总结下经验,能够帮助到别人,希望把这个库打造成一个很好用的 h5 写 app 的最佳实践模板,正在不断完善中,不过已经有很多干货了,欢迎围观提些意见😃

https://github.com/mcuking/mobile-web-best-practice

下面是库的内容目录:

组件库
JSBridge
路由堆栈管理(模拟原生 APP 导航)
请求数据缓存
阻止原生返回事件
检测页面环境
样式适配
表单校验
打包策略
微前端应用
领域驱动设计应用
mock 数据
调试控制台
抓包工具
异常监控平台
性能监控平台
常见问题
7451 次点击
所在节点    Vue.js
16 条回复
viiii
2019-08-24 20:06:17 +08:00
已经 star,支持一下
jziwenchen
2019-08-24 20:20:33 +08:00
已 Star 支持分享!
mcuking
2019-08-24 20:24:37 +08:00
感谢各位支持,项目刚刚启动,免不了有些点遗漏或某个点不是最佳方案,毕竟一个人力量有限,也欢迎大家能多提些意见或者更好的方案😂
xiangyuecn
2019-08-24 21:01:31 +08:00
华山论键,不如大宝剑😂

demo 虽然只用到一个 native 调用,并且进行了一次封装,但太简陋了几乎等于没有封装。每次调用都要 platform !== 'browser',真丑。

这些判断完全可以放到对底层进行实际调用的时候进行判断,简化使用者的逻辑。也利于跨平台,和底层接口版本的管理,不管底层是浏览器、ios、Android、还是小程序。

那些兼容性的粗活、丑陋代码都放到 NativeMethods 进行集中,眼不见为净,最终要调用的时候比如那个唯一的 api:AnyMethods.syncCalendar(args, success, fail?, complete?),底层不支持直接走可选的 fail 逻辑
mcuking
2019-08-24 21:10:32 +08:00
哈哈哈,好主意,写的时候也觉得放在业务里有点冗余,感谢建议,明天就加上😘😘😘
fengxianqi
2019-08-24 21:19:26 +08:00
已 star
mcuking
2019-08-24 21:45:58 +08:00
感谢资瓷🥰
henjihenguanjian
2019-08-24 22:50:42 +08:00
感谢分享,已 star
mcuking
2019-08-24 23:10:40 +08:00
哈哈哈,这个库很多都是也是从开源社区学来的,现在算是对社区回馈吧,刚起步还有很多要完善的,多谢资瓷😁
mcuking
2019-08-25 09:33:18 +08:00
@xiangyuecn 根据老哥的建议,我已经把调用 native 接口时检测平台的逻辑移入 NativeMethods 类,通过装饰器注入检测平台逻辑,代码如下😇:

```
class NativeMethods {
// 同步到日历
@p()
public syncCalendar(params: SyncCalendarParams) {
...
}
}

/**
* @param {platforms} - 接口限制的平台
* @return {Function} - 装饰器
*/
function p(platforms = ['android', 'ios']) {
return (target: AnyObject, name: string, descriptor: PropertyDescriptor) => {
if (!platforms.includes(window.$platform)) {
descriptor.value = () => {
return Vue.prototype.$toast(
`当前处在 ${window.$platform} 环境,无法调用接口哦`
);
};
}

return descriptor;
};
}
```
momowei
2019-08-25 09:45:40 +08:00
混合开发用 cordova 也蛮简单和快速,很多原生插件直接用
mcuking
2019-08-25 09:53:16 +08:00
哈哈哈,我们最开始调研时就选择了 cordova,确实不错,不过现在演变成了 react native + h5 混合模式,rn 主要负责即时通讯功能,h5 负责大部分业务,合同报销之类的。

做的产品类似钉钉那种 oa 系统,不过只是我们自己公司用
unicloud
2019-08-25 10:33:41 +08:00
还没有 star
mcuking
2019-08-25 11:59:58 +08:00
@unicloud 相信我,这个库计划后面还会有更多干货的😜
mcuking
2019-08-25 20:01:48 +08:00
顺便在这里问下,关于网页性能监控,特别是针对 webview 加载 h5 的情况,有没有比较好开源免费工具呢?

这方面没什么实战经验,正好公司内也想要监控下 h5 的性能,比如首屏加载时间等等。有这方面的好东东还请留个言哦~
mcuking
2019-08-26 10:55:43 +08:00
没人有这性能监控方面经验吗🥺

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/594800

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX