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

[mcuking]

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

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

下面是库的内容目录：

组件库
JSBridge
路由堆栈管理(模拟原生 APP 导航)
请求数据缓存
阻止原生返回事件
检测页面环境
样式适配
表单校验
打包策略
微前端应用
领域驱动设计应用
mock 数据
调试控制台
抓包工具
异常监控平台
性能监控平台
常见问题

[viiii]

已经 star,支持一下

[jziwenchen]

已 Star 支持分享!

[mcuking]

感谢各位支持，项目刚刚启动，免不了有些点遗漏或某个点不是最佳方案，毕竟一个人力量有限，也欢迎大家能多提些意见或者更好的方案😂

[xiangyuecn]

华山论键，不如大宝剑😂

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

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

那些兼容性的粗活、丑陋代码都放到 NativeMethods 进行集中，眼不见为净，最终要调用的时候比如那个唯一的 api:AnyMethods.syncCalendar(args, success, fail?, complete?)，底层不支持直接走可选的 fail 逻辑

[mcuking]

哈哈哈，好主意，写的时候也觉得放在业务里有点冗余，感谢建议，明天就加上😘😘😘

[fengxianqi]

已 star

[mcuking]

感谢资瓷🥰

[henjihenguanjian]

感谢分享，已 star

[mcuking]

哈哈哈，这个库很多都是也是从开源社区学来的，现在算是对社区回馈吧，刚起步还有很多要完善的，多谢资瓷😁

[mcuking]

@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]

混合开发用 cordova 也蛮简单和快速,很多原生插件直接用

[mcuking]

哈哈哈，我们最开始调研时就选择了 cordova，确实不错，不过现在演变成了 react native ＋ h5 混合模式，rn 主要负责即时通讯功能，h5 负责大部分业务，合同报销之类的。

做的产品类似钉钉那种 oa 系统，不过只是我们自己公司用

[unicloud]

还没有 star

[mcuking]

@unicloud 相信我，这个库计划后面还会有更多干货的😜

[mcuking]

顺便在这里问下，关于网页性能监控，特别是针对 webview 加载 h5 的情况，有没有比较好开源免费工具呢？

这方面没什么实战经验，正好公司内也想要监控下 h5 的性能，比如首屏加载时间等等。有这方面的好东东还请留个言哦～

[mcuking]

没人有这性能监控方面经验吗🥺