H5发布到服务器注意：

  1. 配置发行后的路径(发行在网站根目录可不配置)，比如发行网站路径是www.xxx.com/html5，在manifest.json文件内编辑h5节点，router下增加base属性为html5
  2. 点击菜单 发行-> H5
  3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器(或者使用本地服务器预览)，如需部署到相对路径(支持本地file协议打开)参考：https://ask.dcloud.net.cn/article/37432。

引用第三方js的方式：

  1. 通过npm引入(通过条件编译，只有是h5平台才import相应的库)
  2. 在manifest.json文件编辑h5节点的template属性，填写html模版路径，在html模版里面可以使用script的方式引入三方的js，如下示例是加了百度统计的html模板部分代码，模版全部代码可
<!-- ... -->
<body>
            <noscript>
                <strong>Please enable JavaScript to continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
            <script>
                var _hmt = _hmt || [];
                (function() {
                    var hm = document.createElement("script");
                    hm.src = "https://hm.baidu.com/hm.js?xxxxxx";
                    var s = document.getElementsByTagName("script")[0];
                    s.parentNode.insertBefore(hm, s);
                })();
            </script>
</body>
<!-- ... -->
  • H5版uni-app全支持vue语法，所以可能造成部分写法在H5端生效，在小程序或App端不生效。
  • H5校验了更严格的vue语法，有些写法不规范会报警，比如： data后面写对象会报警，必须写function；不能修改props的值；组件最外层template节点下不允许包含多个节点等。
  • 编译为H5版后生成的是单页应用(SPA)。
  • 如果遇到跨域造成js无法联网，注意网络请求(request、uploadFile、downloadFile等)在浏览器存在跨域限制，解决方案有详见：https://ask.dcloud.net.cn/article/35267
  • APP和小程序的导航栏和tabbar均是原生控件，元素区域坐标是不包含原生导航栏和tabbar的；而H5里导航栏和tabbar是div模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：--window-top和 --window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(--window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然仍然也可以使用H5的条件编译处理界面的不同。
  • CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
  • 正常支持rpx，px是真实物理像素。暂不支持通过设manifest.json的 "transformPx" : true，把px当动态单位使用。
  • 使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览(localhost)可以使用http协议。
  • PC端Chrome浏览器模拟器设备测试的时候，获取位置API需要连接谷歌服务器。
  • 组件内(页面除外)不支持onLoad、onShow等页面生命周期。
  • 为避免和内置组件冲突，自定义组件请加上前缀(但不能是u和uni)。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input，如果已有项目使用了可能造成冲突的名称，请修改名称，另外微信小程序下自定义组件名称不能以wx开头。