H5开发注意事项
1.H5发布到服务器的注意事项
(1)第一步是配置发行后的路径，注意，发行在网站根目录的可以不配置路径，比如发行网站路径是 www.xxxx.com/html5，在 manifest.json 文件内编辑 h5 节点，router 下增加 base 属性为 html5.
(2)点击菜单 发行-> H5
(3)在项目的 unpackage/dist/build/h5 目录下找到要部署的H5资源，部署到服务器（或者使用本地服务器预览）
2.引用第三方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>
...
3.组件方面需要注意
H5开发支持 mpvue 组件、支持普通 vue 组件、不支持小程序自定义组件、不支持 nvue。
H5 版 uni-app 全支持 vue 语法，所以可能造成部分写法在 H5 端生效，在小程序或 App 端不生效。
H5 校验了更严格的 vue 语法，有些代码的写法不规范会报警，比如：data 后面写对象会报警，必须写 function；不能修改 props的值；组件最外层 template 节点下不允许包含多个节点等。
编译为 H5 版后生成的是单页应用（SPA）。
4.白屏或者网络不给力的提示
一般是跨域问题，网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制，需服务端配合才能跨域。解决方案有2种：
(1)服务器打开跨域限制；
(2)本地浏览器安装跨域插件，具体的可以参考：Chrome 跨域插件免FQ安装 或 firefox跨域插件。
5.原生控件
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 的条件编译处理界面的不同。
6.单位和组件
CSS 內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabBar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
正常支持 upx，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 开头。
小程序开发注意事项
各家小程序的实现机制不同，所以可能存在的平台兼容的问题。
1.浏览器内核差异
各家小程序的浏览器内核不同，可能会造成css兼容性问题
2.自定义组件渲染差异
微信/QQ/百度/字节跳动这四家小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意：使用flex布局时，直接给自定义组件的父元素设置为display:flex不能影响到自定义组件内部的根节点，需要设置当前自定义组件为display:flex才可以。在自定义组件内部设置根元素高度为100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。支付宝小程序不会插入节点，不存在如上问题。
3.vendor.js过大的处理方式
小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。
关于体积控制，参考如下：
使用运行时代码压缩
HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
cli创建的项目可以在pacakge.json中添加参数--minimize，示例：
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
使用分包优化，关于分包优化的说明：
(1)在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化
(2)目前只支持mp-weixin、mp-qq、mp-baidu的分包优化
(3)分包优化具体逻辑：
静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息.