DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2018-11-13 20:05
  • 更新:2019-07-19 22:04
  • 阅读:81028

uni-app的H5版使用注意事项

分类:uni-app

HBuilderX 1.2开始包含了H5平台支持。

使用方式

  1. 打开uni-app项目下的vue文件
  2. 点击菜单 运行->运行到浏览器->Chrome
  3. 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可)
  4. HBuilderX修改代码后会自动刷新chrome的页面
  5. 审查元素

    在chrome控制台安装vue devtools后可查看节点关系。
    安装方式自行搜索。
    每个页面都在page节点下,pageHead是微信和app下的原生导航栏,即pages.json里配的导航栏。
    pageBody是导航栏下的页面内容。
    所有标签为了避免和标准H5标签冲突,都加了U前缀。
  6. 断点debug
    点chrome控制台的source,可以给js打断点调试。
    找到同名的文件,如果没有同名vue文件,一般会有一个同文件名的js文件,此时会提示检测到sourcemap,是否引入,点允许。然后就会有同名的vue文件。如果找不到,则把焦点放到source的代码区,然后敲ctrl+p打开文件查找窗口,然后敲入vue页面名字,然后打开vue页面。
    这个vue里,只有js,没有tag和css,但可以打断点调试。



发布方式

  1. 配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是www.xxx.com/html5,在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置,也可以在源码视图内编辑h5节点,router下增加base属性为html5。
    可视化界面设置:

    源码视图设置:
  2. 点击菜单 发行->H5
  3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源,部署服务器(或者使用本地服务器预览,不要直接在浏览器打开html文件)。如果发布使用的history模式,需要服务端配合,参考:后端配置方式

跨端注意

uni-app由uni的通用api和平台专有api组成,H5版也不例外。可以使用uni的通用api完成很多工作,也可以在条件编译里调用H5版的浏览器专有api。
虽然dom、window都可以用了,但如果要跨端,还是少写这样的代码好。
H5仍应该使用pages.json管理页面,强烈不建议使用浏览器的跳转页面的api。
H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

//#ifdef H5  
this.titleHeight = 44  
//#endif  

条件编译目前有7个平台,APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。
其中APP-PLUS-NVUE是APP-PLUS的子集,用于weex下单独写专用代码。
为了方便多平台选择,还引入了~#ifndef~,也就是ifdef的not,反向选择。以及或语法,及||。这些命名都是c语言条件编译的标准命名。

// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif  

开发者之前为微信或app写的代码,H5的平台不支持时,需要注意把这些代码放到条件编译里。
经过这样的处理,之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上,尤其是导航栏上限制较多,H5在这里是参考了app,默认解析了pages.json下的app-plus的节点,实现了titleNView、buttons、下拉刷新(下拉刷新只有circle方式,因为只有这样的下拉刷新在H5版上可以保障流畅体验)

组件和API支持情况

目前的H5版,还没有100%实现uni的所有api,但大部分已经完成,具体参考uniapp文档。

第三方组件支持

  • 支持mpvue组件
  • 支持普通vue组件(仅H5平台)
  • H5平台不支持小程序自定义组件(编译到小程序和APP支持)
  • nvue不支持

vue语法支持

H5版支持完整的vue语法,同时校验器也校验了更严格的vue语法,有些写法不规范会报警。比如data后面写对象会报警,必须写function。

注意事项(必看)

  • 编译为H5版后生成的是单页应用,SPA。如果想要seo优化,首页可以在template模板中配置keyword。二级页不支持配置,但一个更酷的方式是用uni-app直接发布一版百度小程序,搜索权重更高。
  • 编译后遇到异常,要看浏览器的控制,而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
  • 如果你遇到了白屏或网络不给力的提示,一般是跨域问题。网络请求(request、uploadFile、downloadFile等)在浏览器存在跨域限制,需服务端配合才能跨域。解决方案有2种:1. 服务器打开跨域限制;2. 本地浏览器安装跨域插件,参考:Chrome 跨域插件免翻墙安装firefox跨域插件(注意firefox的css兼容问题)。正式发行时,部署在同域名的服务器上,就不会有跨域报警了,如果部署在不同域名下,仍然需要服务器调整实现接口的跨域访问。
  • 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高度,部分浏览器还包含浏览器操作栏高度,使用时请注意。
  • event 对象上使用的 mpvue 独有的属性需调整(比如 event.pageY,可能需要加上44px的导航栏高度)。
  • fixed定位的组件有可能遮挡框架内置UI组件,如果不希望遮挡可以分平台判断,在H5平台避开内置UI。
  • 如果你的界面大幅变形,估计是因为单位使用了px。需改用upx,upx才是全端均通用的单位。
  • 正常支持upx。px是真实物理像素。暂不支持通过设manifest的"transformPx" : true,把px当动态单位使用。
  • 使用罗盘、地理位置、加速计等相关接口需要使用https协议,本地预览(localhost)可以使用 http 协议。
  • PC 端 Chrome 浏览器模拟器设备测试的时候,获取位置 API 需要连接谷歌服务器。
  • 组件内(页面除外)不支持onLoad生命周期。
  • 为避免和内置组件冲突,自定义组件请加上前缀(但不能是u和uni)。比如可使用的自定义组件名称:my-view、m-input、we-icon,例如不可使用的自定义组件名称:u-view、uni-input。如果已有项目使用了可能造成冲突的名称,请修改名称。另外微信小程序下自定义组件名称不能以wx开头。
  • 在tabBar页面,如果page高度设置为100%时,页面超出滚动会导致底部被tabbar遮挡,可在tabbar页面去掉height:100%或者改用min-height:100%。
  • 编写组件时需要遵守vue的规范,之前在app端和小程序端能使用的一些不规范写法需要纠正,比如:不要修改props的值、组件最外层template节点下不允许包含多个节点。
  • 如果H5正常而发布app后界面异常,可能的原因有:1. 没有使用upx而是px;2. 有浏览器兼容问题,app的Android版本较低,有些新的css语法不支持,具体参考caniuse。点此了解webview内核版本

相关

uni-app编译H5底层技术解析:https://juejin.im/post/5c1b0d715188256973244377

21 关注 分享
Trust lhyh 诗小柒 63068598@qq.com yorick self201801 happy magengshun Zhuojun lovesnsfi@163.com 57875160@qq.com 690043851@qq.com weliff@163.com 251813384@qq.com 大笨蛋 meHaoTian 646729200@qq.com 草灯 Doray 185774963@qq.com yzdemo

要回复文章请先登录注册

690792862@qq.com

690792862@qq.com

H5 配置基础路径有什么影响? 能不能设置打包H5后的index.html中改成相对路径 ```/``` ```./```
2019-07-19 22:04
871282035@qq.com

871282035@qq.com

各位大神,uniapp发布成h5后,在ios端微信公众号里面分享的链接不管在那个页面最后分享出去的链接都是首页的,路由是history。安卓是正常的。 请问一下各位怎么破呢
2019-07-19 15:02
wenju

wenju

回复 17376558639@163.com:
没有解决呢 只能盼星星盼月亮等官方优化了..
2019-07-17 14:50
半晴雨滴

半晴雨滴

开发工具可否配置本地运行端口?
2019-07-16 10:44
hehe了

hehe了

回复 DCloud_UNI_GSQ:
你好,我仔细查了一下 preload的含义, preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源,如果uniapp把所有vue组件生成的js放到index.html里面的话,这些js在打开index.html就会全部加载。不知道我理解的对不对。
2019-07-11 11:11
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 hehe了:
这是预加载
2019-07-09 14:58
hehe了

hehe了

回复 DCloud_UNI_GSQ:
好的, 我发现uniapp 已经是按需加载了,不过由于uniapp打包的时候,把所有的js 都放到index.html 里面了 <link href=xxx.js rel=preload as=script> 所以才会每次打开页面都会全部加载,我把index.html里面的删除了,就是按需加载了,不过每次打包都要删除,也挺麻烦的
2019-07-09 13:30
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 hehe了:
不用集赞。。。
2019-07-09 12:00
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 hehe了:
进行中
2019-07-09 12:00
hehe了

hehe了

回复 hehe了:
在社区提问几天了,没人回应,有人遇到过这个问题吗,帮忙点赞让官方的人看到吧。
2019-07-08 19:25
hehe了

hehe了

第一次首页加载很慢,请问有什么办法优化吗,怎么才能js按需加载啊,就像vue的router懒加载
2019-07-08 19:23
17376558639@163.com

17376558639@163.com

回复 wenju:
大神,你是怎么解决的啊?
2019-07-08 14:46
18111220830@163.com

18111220830@163.com

H5可以添加版本号吗
2019-07-04 18:44
微lin

微lin

回复 微lin:
域名后面跟着长串路径确实不太友好呀
2019-07-03 14:20
微lin

微lin

H5版的路由有优化办法吗?域名后面跟着长传确实不太友好呀
2019-07-03 14:14
1301418493@qq.com

1301418493@qq.com

第一次首页加载很慢,请问有什么办法优化吗
2019-06-21 16:57
1010493573@qq.com

1010493573@qq.com

mark
2019-06-18 14:48
wenju

wenju

编译为H5版后生成的是单页应用,SPA
请问HBuilderX有没有什么配置可以解决SPA首屏加载很慢的问题
2019-06-17 15:44
wenju

wenju

编译到H5 发觉首次加载比较慢 有时候要10秒才打开 有没有优化的建议呢 毕竟是SPA
2019-06-12 09:40
399162728@qq.com

399162728@qq.com

回复 yijun-eleven@163.com:
在manifest.json -> h5 -> devServer -> https=false就可以了
2019-06-05 11:37
399162728@qq.com

399162728@qq.com

回复 yijun-eleven@163.com:
同问
2019-06-05 11:33
yijun-eleven@163.com

yijun-eleven@163.com

请问hbuilderx,在运行-> 运行到浏览器生成的url如何设置为http,现在是https,导致本地开发调用不到api,用微信小程序就可以获取到API数据。
2019-06-04 23:51
15093568689@163.com

15093568689@163.com

h5里面使用下拉刷新 在浏览器中正常,但是在iphone 6微信端刷新时当前页面下拉了。并没有触发下拉刷新
2019-05-16 15:55
wangzhw@vip.qq.com

wangzhw@vip.qq.com

在H5页面里 使用 pageScrollTo 没有效果。。。
2019-04-12 17:25
978332153@qq.com

978332153@qq.com

回复 2678573188@qq.com:
支持,注意看API 里面有
2019-04-06 16:41
咳

楼主你好。一台 windows 2008 R2的电脑显示:Network: unavailable ,local的 就可以。
09:52:46.614 INFO Starting development server...
09:53:00.747 App running at:
09:53:00.751 - Local: http://localhost:8068/live/h5client/mainpage/
09:53:00.755 - Network: unavailable
09:53:00.770 项目 'mainpage' 编译成功.
09:53:00.775 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232
2019-04-01 09:55
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 Rubik:
此方式有限制,只能使用hash模式,后期会考虑
2019-03-29 16:49
Rubik

Rubik

@DCloud_UNI_GSQ @DCloud_heavensoft 请问发布方式什么时候支持相对路径部署,直接点开index就能跑的那种?因为项目需求需要,在刚发布编译到网页的时候就提了,但是现在还没支持,请关注下!
2019-03-25 19:57
dadadaso@foxmail.com

dadadaso@foxmail.com

h5的登录能不能支持一下下
2019-03-06 11:44
2678573188@qq.com

2678573188@qq.com

uni-app导航支持国际化吗?
2019-03-04 15:00
RexBai

RexBai

想说那个Hello uni-app的演示框架里的H5版,为啥上传文件在ios10.3.3上点了没反应,请大神测一下看看
2019-03-01 19:04
妙法莲花

妙法莲花

66666
2019-02-18 11:38
2234839456@qq.com

2234839456@qq.com

在浏览器中大小失衡怎么弄
2019-01-18 17:28
菜鸡

菜鸡

回复 boolean:
前后端分离的前端项目,对爬虫都不利,如果你需要seo,还是建议你暂时不是用前后端分离,或者使用能ssr的前后端分离项目框架
2019-01-07 13:59
boolean

boolean

用这个做的h5网站,对百度爬虫之类的,会不会收录比较不利?因为我看好像没有a标签
2019-01-03 21:20
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 306621759@qq.com:
感谢提醒,已纠正
2019-01-02 13:39
306621759@qq.com

306621759@qq.com

vue语法支持
H5版支持完整的vue语法,同时校验器也校验了更严格的vue语法,有些写法不规范会报警。比如date后面写对象会报警,必须写function。

这段话里面的date 应该为data
2019-01-02 10:07
boolean

boolean

一、http://www.test.cm/h5/index.html
报错:Please enable JavaScript to continue.
二、http://www.test.cm/h5/hybrid/html/local.html
正常看 但是用不了事件
到底是用那个文件作为首页才对
2018-12-29 09:46
不会飞的羊

不会飞的羊

回复 DCloud_UNI_GSQ:
canvas 在 app 中是 用原生实现的还是h5 实现的?怎么感觉比小程序里面的要卡一点?
2018-12-27 15:41
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 UnclesHey:
浏览器限制,你增加增加交互(比如点击按钮后获取焦点)
2018-12-24 19:13
UnclesHey

UnclesHey

你好,请问下h5版本的键盘拉不起来怎么办?就是focus属性不起作用;官方写的是:H5平台只能在用户交互时修改focus生效。这个问题能解决吗?
2018-12-24 15:25
DCloud_heavensoft

DCloud_heavensoft

回复 vrjays@gmail.com:
控制台显示了ip和端口
2018-12-22 19:21
vrjays@gmail.com

vrjays@gmail.com

回复 DCloud_UNI_GSQ:
怎么在手机浏览器查看页面呢?(和hbulider一样手机和电脑连的同一wifi,然后将localhost改成电脑ip,但是hbulider能看,hbuliderX却不行)
2018-12-20 12:31
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 543313564@qq.com:
马上支持
2018-12-18 17:11
543313564@qq.com

543313564@qq.com

关于Canvas的接口,支持H5吗?TypeError: uni.createCanvasContext is not a function
2018-12-16 12:15
11373450@qq.com

11373450@qq.com

回复 331017004@qq.com:
http://ask.dcloud.net.cn/question/62800 弄好了。安装路径的问题
2018-12-14 17:38
331017004@qq.com

331017004@qq.com

回复 11373450@qq.com:
测试发现同样的项目使用vue-cli运行正常,但在编辑器中使用浏览器运行就错位了,绝对是bug
2018-12-14 15:35
11373450@qq.com

11373450@qq.com

回复 331017004@qq.com:
我也是一脸懵逼呀。提了问题没人回答很尴尬
2018-12-14 15:29
331017004@qq.com

331017004@qq.com

回复 11373450@qq.com:
配置都按文档来的啊,按步骤又操作了一次,还是一样的结果
2018-12-14 14:21
11373450@qq.com

11373450@qq.com

回复 331017004@qq.com:
别的电脑不会呀,不知道是编辑器要配置什么东西还是什么的。同样的项目有的人就可以
2018-12-14 14:11
331017004@qq.com

331017004@qq.com

回复 11373450@qq.com:
应该还有人有这样的问题,小程序是正常的,h5就乱了,这文档也太坑了,才开始就这样,奇怪怎么没人反馈,等官方答复吧
2018-12-14 14:09
11373450@qq.com

11373450@qq.com

回复 331017004@qq.com:
我也是这样。不知道怎么弄
2018-12-14 13:52
331017004@qq.com

331017004@qq.com

按步骤操作 在浏览器运行hello uni-app时底部tabbar样式乱了
2018-12-14 11:49
1592079625@qq.com

1592079625@qq.com

回复 王亚博:
您是怎么发布h5到tomacat的可以教我?麻烦加一下我qq:
1592079625
2018-12-08 18:16
1592079625@qq.com

1592079625@qq.com

回复 王亚博:
您是怎么发布h5到tomacat的可以教我?麻烦加一下我qq:
1592069625
2018-12-08 18:13
王亚博

王亚博

回复 王亚博:
找到问题了 ,,比如发行网站路径是www.xxx.com/html5,在manifest.json文件内编辑h5节点,router下增加base属性为html5-解决了
2018-12-06 18:24
王亚博

王亚博

发行h5后,部署tomcat服务器static文件路径全部错了,必须要在/static改为 ./staic 才可以,但是图片路径找不到在哪里改啊???怎么解决这个问题?
2018-12-06 17:54
616761951@qq.com

616761951@qq.com

希望H5版可以增加页面切换动画的相关配置【transition 】,或者能自己扩展写也是可以的
2018-11-26 09:32
57875160@qq.com

57875160@qq.com

这个非常好,提个建议,如果能支持vue的动态组件和异步组件,然后还能用huilder编译,只能说上一句,非常好好。第一我减少了开发时间,第二重用性是一个质的飞越,希望能快点实现。
2018-11-24 00:34
haoguangsong@163.com

haoguangsong@163.com

请问在哪里下载1.2版呢
2018-11-23 21:54
447169720@qq.com

447169720@qq.com

全了,以后开发app,小程序,h5就你了!
2018-11-23 20:19
269479841@qq.com

269479841@qq.com

666,可牛逼坏了
2018-11-23 18:00
15596626798@163.com

15596626798@163.com

666666
2018-11-23 17:31
Laic

Laic

回复 DCloud_UNI_GSQ:
好呢 谢谢你
2018-11-21 12:49
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 Laic:
暂时参考app的方式
2018-11-21 10:50
Laic

Laic

请问h5的怎么去掉导航栏
2018-11-21 09:33
790763406@qq.com

790763406@qq.com

bzjssj
2018-11-20 09:27
DCloud_heavensoft

DCloud_heavensoft

回复 380776660@qq.com:
是不是你的防火墙禁止了HBuilderX开启web server?第一次使用时各种弹框点允许。
2018-11-19 21:29
Warn

Warn

给力,为团队点赞
2018-11-19 17:14
magengshun

magengshun

赞一个
2018-11-19 16:16
jwenlee

jwenlee

厉害厉害了
2018-11-19 10:51
380776660@qq.com

380776660@qq.com

$ git clone https://github.com/dcloudio/hello-uniapp.git 完毕后,拖入HBuilderX 点击浏览器运行,就一直转,然后就打不开了
2018-11-19 09:10
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 343303131@qq.com:
支持px,意思是不支持px自动转upx
2018-11-17 16:47
weliff@163.com

weliff@163.com

厉害啊,赶紧尝试一下
2018-11-17 14:37
343303131@qq.com

343303131@qq.com

不支持px,要是有人想兼容电脑网页怎么办
2018-11-17 12:04
DCloud_heavensoft

DCloud_heavensoft

回复 380776660@qq.com:
注意目录,Git下来的是多个项目,你只拖hello uni-app这个项目进来才能运行
2018-11-16 18:00
380776660@qq.com

380776660@qq.com

github上的最新版本下载到了本地,放入了HBuilderX,没法运行,能不能写个通俗易懂的文档
2018-11-16 16:41
690043851@qq.com

690043851@qq.com

mark 一下,持续跟进
2018-11-16 14:16
灯光

灯光

支持一下
2018-11-16 09:19
1046865524@qq.com

1046865524@qq.com

最新版编辑器在导入h5后 谷歌运行提示:缺少nodejs环境,请在设置中配置nodejs的安装路径
2018-11-16 09:01
self201801

self201801

不错
2018-11-16 08:11
Sinea

Sinea

棒!支持UniApp!
2018-11-15 23:20
xlomy

xlomy

回复 DCloud_heavensoft:
可以参与内测么,我也在群里
2018-11-15 21:07
xlomy

xlomy

怎么使用预览版
2018-11-15 15:34
凯哥

凯哥

辛苦了
2018-11-15 11:34
盖浇面

盖浇面

不错
2018-11-15 11:29
诗小柒

诗小柒

回复 DCloud_UNI_GSQ:
好的,还是很希望能够支持
2018-11-15 11:23
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 诗小柒:
后续根据情况安排
2018-11-15 11:15
诗小柒

诗小柒

回复 DCloud_UNI_GSQ:
后续会支持嘛?
2018-11-15 11:10
诗小柒

诗小柒

回复 wenju:
期待中
2018-11-15 11:10
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 yorick:
目前未发布正式版,先从部分用户开始体验的。
2018-11-15 10:38
yorick

yorick

在哪下载呢?
2018-11-15 10:37
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 诗小柒:
暂时不支持小程序组件,支持普通vue组件
2018-11-15 10:37
wenju

wenju

回复 诗小柒:
其实已经写好了 但是android有部分手机的touchmove事件只能支持一次 ... 等官方修复了再分享给大家~~
2018-11-15 10:29
诗小柒

诗小柒

回复 wenju:
大佬,你的mescroll 没打算移植到uniapp?
2018-11-15 10:17
wenju

wenju

可厉害了 ....
心情可激动了...
不知道说什么好...
提前祝大家新年快乐吧...
继续使用uni写bug中...
2018-11-15 09:59
诗小柒

诗小柒

H5 版本可以使用小程序组件不,比如vant weapp wux weapp mpvui 这些
2018-11-15 09:22
690043851@qq.com

690043851@qq.com

踩个楼,支持下~~~~
2018-11-15 09:05
诗小柒

诗小柒

又可以采坑了,期待
2018-11-15 08:50