首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
V2EX  ›  Vue.js

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

  •  
  •   mcuking · 57 天前 · 2794 次点击
    这是一个创建于 57 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用 vue 写了一年多的混合应用,期间遇到了不少坑和一些收获一直想总结下经验,能够帮助到别人,希望把这个库打造成一个很好用的 h5 写 app 的最佳实践模板,正在不断完善中,不过已经有很多干货了,欢迎围观提些意见😃

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

    下面是库的内容目录:

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

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

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

    那些兼容性的粗活、丑陋代码都放到 NativeMethods 进行集中,眼不见为净,最终要调用的时候比如那个唯一的 api:AnyMethods.syncCalendar(args, success, fail?, complete?),底层不支持直接走可选的 fail 逻辑
        5
    mcuking   57 天前
    哈哈哈,好主意,写的时候也觉得放在业务里有点冗余,感谢建议,明天就加上😘😘😘
        6
    fengxianqi   57 天前
    已 star
        7
    mcuking   57 天前
    感谢资瓷🥰
        8
    henjihenguanjian   57 天前
    感谢分享,已 star
        9
    mcuking   57 天前
    哈哈哈,这个库很多都是也是从开源社区学来的,现在算是对社区回馈吧,刚起步还有很多要完善的,多谢资瓷😁
        10
    mcuking   57 天前
    @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;
    };
    }
    ```
        11
    momowei   57 天前
    混合开发用 cordova 也蛮简单和快速,很多原生插件直接用
        12
    mcuking   57 天前
    哈哈哈,我们最开始调研时就选择了 cordova,确实不错,不过现在演变成了 react native + h5 混合模式,rn 主要负责即时通讯功能,h5 负责大部分业务,合同报销之类的。

    做的产品类似钉钉那种 oa 系统,不过只是我们自己公司用
        13
    unicloud   57 天前 via iPhone
    还没有 star
        14
    mcuking   57 天前
    @unicloud 相信我,这个库计划后面还会有更多干货的😜
        15
    mcuking   56 天前
    顺便在这里问下,关于网页性能监控,特别是针对 webview 加载 h5 的情况,有没有比较好开源免费工具呢?

    这方面没什么实战经验,正好公司内也想要监控下 h5 的性能,比如首屏加载时间等等。有这方面的好东东还请留个言哦~
        16
    mcuking   56 天前
    没人有这性能监控方面经验吗🥺
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3251 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 10:26 · PVG 18:26 · LAX 03:26 · JFK 06:26
    ♥ Do have faith in what you're doing.