zhe.inkH5发布到服务器注意：
- 配置发行后的路径(发行在网站根目录可不配置)，比如发行网站路径是www.xxx.com/html5，在manifest.json文件内编辑h5节点，router下增加base属性为html5
- 点击菜单 发行-> H5
- 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器(或者使用本地服务器预览)，如需部署到相对路径(支持本地file协议打开)参考：https://ask.dcloud.net.cn/article/37432。
引用第三方js的方式：
- 通过npm引入(通过条件编译，只有是h5平台才import相应的库)
- 在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开头。
苏公网安备
32050902101537号