HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

IOS8,android4.0以下这两个css无效,开发时候尽量注意

css

很多人一看到标题估计都是说IOS8?哪来那么老的破机子。
目前iPhone5s以下的大多数用户都是维持IOS8以下的系统,而我所在的朋友圈很多人使用iPhone5和iPhone5s,因此这也就成了我比较关注的问题,废话少说,我们现在来看看那些css可能是无效的

width:calc(100vw - 50px)

IOS8以下以及安卓4.0以下不支持calc中含vw,vh单位,需要改为

width:-webkit-calc(100vw - 50px)

安卓2.3以下不支持calc,换成代码修改吧

display:flex;flex-warp:nowarp;

安卓2.3不支持flex,IOS8以下不支持,需要改为

display:-webkit-flex;-webkit-flex-warp:nowarp;

不过既然可以用flex,也有可能可以使用float结合margin实现,所以.... 不用我说了吧?

有些人可能认为自己的app不会有以上这些符合条件的设备打开,谁知道呢= = 我们还有过安卓2.3的用户,当然是安装不上的,但是除了app,我们是否需要微信网页,是否需要移动网页,这些问题在网页端都会出现的,所以见仁见智,详情可以百度css3浏览器支持一览,对了,上述符合条件的,也不支持动画效果... IOS7.1.2不支持组合动画效果,IOS8以上无问题。

继续阅读 »

很多人一看到标题估计都是说IOS8?哪来那么老的破机子。
目前iPhone5s以下的大多数用户都是维持IOS8以下的系统,而我所在的朋友圈很多人使用iPhone5和iPhone5s,因此这也就成了我比较关注的问题,废话少说,我们现在来看看那些css可能是无效的

width:calc(100vw - 50px)

IOS8以下以及安卓4.0以下不支持calc中含vw,vh单位,需要改为

width:-webkit-calc(100vw - 50px)

安卓2.3以下不支持calc,换成代码修改吧

display:flex;flex-warp:nowarp;

安卓2.3不支持flex,IOS8以下不支持,需要改为

display:-webkit-flex;-webkit-flex-warp:nowarp;

不过既然可以用flex,也有可能可以使用float结合margin实现,所以.... 不用我说了吧?

有些人可能认为自己的app不会有以上这些符合条件的设备打开,谁知道呢= = 我们还有过安卓2.3的用户,当然是安装不上的,但是除了app,我们是否需要微信网页,是否需要移动网页,这些问题在网页端都会出现的,所以见仁见智,详情可以百度css3浏览器支持一览,对了,上述符合条件的,也不支持动画效果... IOS7.1.2不支持组合动画效果,IOS8以上无问题。

收起阅读 »

浅谈hbuilder开发app后的优化 - (1)加速启动,优化体验

前言:
我相信使用hbuilder的开发者,大多数是因为html5开发周期短,实现功能快而使用,当然使用混合开发我相信也是比较少的,至少目前我看到的比较少。那么在这种情况下,我简单的认为大多数开发者使用的是纯hbuilder作为开发环境,那么可优化空间便局限在html原生+plusSDK这儿,因此我仅仅是分享平时在开发中,个人采用的各种优化方法。

(1)加速启动,优化体验
首先我们回顾下打开app走的一个简单的流程:
1.手指点击

  1. 载入Activity
  2. 载入Splashscreen
  3. 载入webview
  4. 渲染页面
  5. closeSplashscreen
  6. 完成工作
    备注:
    Activity:安卓原生Activity
    Splashscreen:实则为一个View,称之为"启动页"
    webview:很多人简称“浏览器”
    至此我们思考下,如何进行处理比较好,这儿我给各位简单分析一下显示层级:
    Activity < webview < Splashscreen < plus.Native.View

那么加载速度呢?
Activity > Splashscreen = plus.Native.View > webview
从而我们可以看到,当启动Activity之后,随着Splashscreen会显示出来,其次就是plus.Native.View控件。
然而plus.Native.View控件的显示层级又高于Splashscreen,因此new plus.Native,View();ViewObject.show()之后,新建的View会显示在Splashscreen上面,这样我们就可以制造一个快速启动的假象。

题外话:<script src="html5plus://ready"></script>可以加速plusAPI生效,您知道了了么?对我来说是写在<meta charset="utf-8">下面,这样不会出现乱码问题,且不影响页面。

接下来,进入代码阶段:
1:我们需要在manifest.json中配置启动页的关闭方式:


可能有人注意到,为什么不是手动关闭启动页而是延迟10s关闭启动页呢?因为在测试过程有一部魅蓝手机出现自动关闭启动页,而且是很快的自动关闭,因此根据页面逻辑我选择设置延迟10s关闭,因此没有了此问题。
2:我们需要把index.html当作一个启动处理中心,在index.html创建两个View,一个作为header,一个作为footer,随着立即显示
(创建底部栏可以采用我开源的http://ask.dcloud.net.cn/article/1276 创建顶部栏官方有教程)
View.show()之后立即执行closeSplashscreen
这一个过程很快,在我的Nexus6plus上是一瞬间执行完毕,这就有种启动速度很快的感觉了。这个时候我们需要进行如下操作,将其转到正常的app页面。

 plus.NativeUI.showWaiting()  //显示雪花滚动,等待样式  
 var wm = plus.webview.create("main.html") //创建app主页面  
       wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

//等待webview加载完毕之后再显示
至此我们就可以制造一个快速启动的错觉,再利用雪花滚动的过程ajax同步加载数据,等待渲染完毕之后再载入wm
相对于上面这种显示方法,我个人比较常用的是将

        wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

放在main.html中,改为ajax请求完成,填充完内容之后在调用

              plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });

这样可以更直观的感觉滚动完雪花后加载的是一个完整页面。
但是记得ajax要加上timeout的处理。
如果使用vue的话,则需要在vue的Methods中进行页面填充处理
随后调用vue本身带的this.$nextTick监听是否渲染完毕,渲染完毕之后再关闭view和雪花滚动。

我相信很多人看起来一头雾水,然而懂的人自然明白如何操作,这仅仅是本人优化APP的一些方法,做出来分享而已,希望能给大家带来帮助。
后面再继续分享一些其他开发中遇到的问题以及一些优化的方法。

继续阅读 »

前言:
我相信使用hbuilder的开发者,大多数是因为html5开发周期短,实现功能快而使用,当然使用混合开发我相信也是比较少的,至少目前我看到的比较少。那么在这种情况下,我简单的认为大多数开发者使用的是纯hbuilder作为开发环境,那么可优化空间便局限在html原生+plusSDK这儿,因此我仅仅是分享平时在开发中,个人采用的各种优化方法。

(1)加速启动,优化体验
首先我们回顾下打开app走的一个简单的流程:
1.手指点击

  1. 载入Activity
  2. 载入Splashscreen
  3. 载入webview
  4. 渲染页面
  5. closeSplashscreen
  6. 完成工作
    备注:
    Activity:安卓原生Activity
    Splashscreen:实则为一个View,称之为"启动页"
    webview:很多人简称“浏览器”
    至此我们思考下,如何进行处理比较好,这儿我给各位简单分析一下显示层级:
    Activity < webview < Splashscreen < plus.Native.View

那么加载速度呢?
Activity > Splashscreen = plus.Native.View > webview
从而我们可以看到,当启动Activity之后,随着Splashscreen会显示出来,其次就是plus.Native.View控件。
然而plus.Native.View控件的显示层级又高于Splashscreen,因此new plus.Native,View();ViewObject.show()之后,新建的View会显示在Splashscreen上面,这样我们就可以制造一个快速启动的假象。

题外话:<script src="html5plus://ready"></script>可以加速plusAPI生效,您知道了了么?对我来说是写在<meta charset="utf-8">下面,这样不会出现乱码问题,且不影响页面。

接下来,进入代码阶段:
1:我们需要在manifest.json中配置启动页的关闭方式:


可能有人注意到,为什么不是手动关闭启动页而是延迟10s关闭启动页呢?因为在测试过程有一部魅蓝手机出现自动关闭启动页,而且是很快的自动关闭,因此根据页面逻辑我选择设置延迟10s关闭,因此没有了此问题。
2:我们需要把index.html当作一个启动处理中心,在index.html创建两个View,一个作为header,一个作为footer,随着立即显示
(创建底部栏可以采用我开源的http://ask.dcloud.net.cn/article/1276 创建顶部栏官方有教程)
View.show()之后立即执行closeSplashscreen
这一个过程很快,在我的Nexus6plus上是一瞬间执行完毕,这就有种启动速度很快的感觉了。这个时候我们需要进行如下操作,将其转到正常的app页面。

 plus.NativeUI.showWaiting()  //显示雪花滚动,等待样式  
 var wm = plus.webview.create("main.html") //创建app主页面  
       wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

//等待webview加载完毕之后再显示
至此我们就可以制造一个快速启动的错觉,再利用雪花滚动的过程ajax同步加载数据,等待渲染完毕之后再载入wm
相对于上面这种显示方法,我个人比较常用的是将

        wm.addEventListener("loaded",function(){  
             plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });  
       })

放在main.html中,改为ajax请求完成,填充完内容之后在调用

              plus.webview.show(id,"none",0,function(){  
                    //此时关闭View和关闭雪花滚动  
                    plus.NativeUI.closeWaiting()  
             });

这样可以更直观的感觉滚动完雪花后加载的是一个完整页面。
但是记得ajax要加上timeout的处理。
如果使用vue的话,则需要在vue的Methods中进行页面填充处理
随后调用vue本身带的this.$nextTick监听是否渲染完毕,渲染完毕之后再关闭view和雪花滚动。

我相信很多人看起来一头雾水,然而懂的人自然明白如何操作,这仅仅是本人优化APP的一些方法,做出来分享而已,希望能给大家带来帮助。
后面再继续分享一些其他开发中遇到的问题以及一些优化的方法。

收起阅读 »

h5+免费教程、mui免费教程、各类app开发实战教程更新中,一起努力共同进步!!

mui

hcoder 一直致力于奉献高质量的视频教程,官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点 : JavaScript 快速提高视频教程
实战: MUI、H5 APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 开发教程
知识点 : mui 全套教程

免费教程地址
http://www.hcoder.net/course/index/cate/4

继续阅读 »

hcoder 一直致力于奉献高质量的视频教程,官网上 mui、h5 等免费教程播放量已经达到5万。
教程汇总
知识点 : JavaScript 快速提高视频教程
实战: MUI、H5 APP 实战教程 - 仿《有道词典》
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触
知识点 : APP开发教程 - 启动动画
知识点 : APP开发实例教程 - 窗口切换
知识点 : 移动端图片剪裁、上传视频教程
知识点 : app开发教程-用户注册、登录
实战 : APP开发实战 - 新闻客户端
知识点 : HTML 5 开发教程
知识点 : mui 全套教程

免费教程地址
http://www.hcoder.net/course/index/cate/4

收起阅读 »

【经验分享】Windows环境下生成Apple私钥证书教程(非mac,带批处理文件)

iOS证书 技术分享

使用工具:OpenSSL,访问: http://slproweb.com/products/Win32OpenSSL.html 下载(如果链接打不开请自行百度下载)

安装好后进去安装目录,将附件中的批处理文件丢bin文件夹下,这里就不再重复cmd命令,直接批处理文件搞定。(批处理文件请先编辑修改你的OpenSSL访问路径,以及证书密码

首先打开 MyRequest.bat 文件,生成 my.certSigningRequest 文件,用于上传到苹果开发者中心;

苹果开发者中心一步步下载.cer文件,重命名为 my.cer,放到bin目录,第二步点击 MyP12.bat 文件,就会生成 .p12文件,就是我们要的私钥证书了。

就是这么简单。

附送安卓证书在线秒钟生成工具: http://www.applicationloader.net/appuploader/keystore.php

附件:[批处理文件下载请点击此处].......

继续阅读 »

使用工具:OpenSSL,访问: http://slproweb.com/products/Win32OpenSSL.html 下载(如果链接打不开请自行百度下载)

安装好后进去安装目录,将附件中的批处理文件丢bin文件夹下,这里就不再重复cmd命令,直接批处理文件搞定。(批处理文件请先编辑修改你的OpenSSL访问路径,以及证书密码

首先打开 MyRequest.bat 文件,生成 my.certSigningRequest 文件,用于上传到苹果开发者中心;

苹果开发者中心一步步下载.cer文件,重命名为 my.cer,放到bin目录,第二步点击 MyP12.bat 文件,就会生成 .p12文件,就是我们要的私钥证书了。

就是这么简单。

附送安卓证书在线秒钟生成工具: http://www.applicationloader.net/appuploader/keystore.php

附件:[批处理文件下载请点击此处].......

收起阅读 »

关于HBuilder的几个问题

HBuilder

1、无内容标签闭合问题
我们都知道无内容标签比如<br>和<br />对于浏览器解析并无问题。
但从web标准规范来讲,<br />更多是XHTML的产物,而HTML并没这方面的规定。
近期百度了很多这方面的文章,发现<br>这样的写法更规范。
也就说无内容标签并不建议闭合。
文章出处:https://www.oschina.net/news/49775/html-tag-to-close-or-not-to-close

所以,HBuilder默认的代码块里,这些无内容标签的斜杠还有必要存在吗?

2、由于我们项目开发环境是GBK,所以HBuilder的代码编码我选择了GBK,但在这情况下,我发现一些配置文件,比如代码块配置文件打开中文字体都是乱码的。何解?

继续阅读 »

1、无内容标签闭合问题
我们都知道无内容标签比如<br>和<br />对于浏览器解析并无问题。
但从web标准规范来讲,<br />更多是XHTML的产物,而HTML并没这方面的规定。
近期百度了很多这方面的文章,发现<br>这样的写法更规范。
也就说无内容标签并不建议闭合。
文章出处:https://www.oschina.net/news/49775/html-tag-to-close-or-not-to-close

所以,HBuilder默认的代码块里,这些无内容标签的斜杠还有必要存在吗?

2、由于我们项目开发环境是GBK,所以HBuilder的代码编码我选择了GBK,但在这情况下,我发现一些配置文件,比如代码块配置文件打开中文字体都是乱码的。何解?

收起阅读 »

HBUILDER中使用BEECLOUD的一个小坑

beecloud

在HBUILDER中,配置好了BEECLOUD写好了代码,在支付时微信好使,选支付宝时,APP没有任何反应,没有报错也没有任何提示
对beecloud.js一点点跟踪,发现没取到支付宝这个支付类型,再一查,原来是在manifest.json中没有勾上支付宝一项,勾上就好了
不过话说回来了
不过对于beecloud来说,应当有个提示,而不是什么反应都没有,让用户以为出什么BUG了
对payChannel进行一下判断看是否是NULL,为Null返回个错误,或者在else if (payData.channel == 'UN_WEB')块后面加上else,返回一个错误信息,对用户或开发者来说都会友好很多

继续阅读 »

在HBUILDER中,配置好了BEECLOUD写好了代码,在支付时微信好使,选支付宝时,APP没有任何反应,没有报错也没有任何提示
对beecloud.js一点点跟踪,发现没取到支付宝这个支付类型,再一查,原来是在manifest.json中没有勾上支付宝一项,勾上就好了
不过话说回来了
不过对于beecloud来说,应当有个提示,而不是什么反应都没有,让用户以为出什么BUG了
对payChannel进行一下判断看是否是NULL,为Null返回个错误,或者在else if (payData.channel == 'UN_WEB')块后面加上else,返回一个错误信息,对用户或开发者来说都会友好很多

收起阅读 »

多窗体返回事件调用的函数

技术分享

viewApi.back();

viewApi.back();

欢迎体验HBuilder (Wine)应用!!!

linux

https://bbs.deepin.org/forum.php?mod=viewthread&tid=138355

https://bbs.deepin.org/forum.php?mod=viewthread&tid=138355

真机运行和打包的差异

真机运行 打包

真机运行使用的是HBuilder自带的,使用DCloud证书打包的调试基座,包括了所有sdk、常用权限配置和方便开发者调试的打包配置。
而云打包则是使用开发者的证书,按照开发者自己配置的sdk、权限、及其他打包配置打包的。

一.云打包机选择原理
HBuilder和HBuilderX是2个版本,连接不同的打包机。
HBuilderX的升级速度快于HBuilder,HBuilder到2018年底就不再升级了。
这里要注意的是:

  • 如果你的ide没升级,那么你的真机运行使用的基座版本是老的,但点了云打包,打包后会变成新的5+引擎了。这样就会产生打包和运行的区别。
  • 如果使用离线打包,那么5+引擎的版本取决于内嵌的5+sdk的版本,和HBuilder版本产生差异时,也会造成真机运行和打包结果不同。

当前使用的5+引擎版本号,可通过plus.runtime的api查询。

二. manifest配置
manifest是非常重要的配置文件,每个开发者都应该掌握,manifest详解:http://ask.dcloud.net.cn/article/94
在HBuilder的manifest可视化编辑界面也有上文的链接。
manifest定义了打包的各种配置,主要分几大类:

  • app基础信息。比如名称、图标、启动splash图片。所以真机运行时,这些都是HBuilder调试基座自带的,只有打包才变化。
  • 应用级的全局配置。比如沉浸式状态栏、全屏、横竖方向切换、是否解压资源。。。
  • 三方sdk配置。大多数三方sdk,需要开发者向sdk原厂申请appkey等信息,然后填写到manifest里打包,否则这些sdk不会工作。HBuilder调试基座使用的是DCloud向sdk原厂申请的appkey,打包时还需开发者自己配置。比如分享、微信支付、登陆、推送、地图、语音识别都需要自己申请和配置。
  • 权限。权限也是打包时必须自己配的,减少权限申请有助于安装包被用户接受。
  • 首页webview设置。对首页webview的控制无法通过js操作,只能在manifest里配。

很多开发者的工程是复制了Hello H5 或Hello mui的示例模板,也使用了相同的manifest,但这个manifest配置不一定适用于开发者,所以建议开发者做项目时新建空工程,自己调整manifest。

其他:
真机运行时使用plus.runtime.appid取值是HBuilder,并非真实的appid,此时涉及appid相关的用户反馈模板等功能也不可用。

继续阅读 »

真机运行使用的是HBuilder自带的,使用DCloud证书打包的调试基座,包括了所有sdk、常用权限配置和方便开发者调试的打包配置。
而云打包则是使用开发者的证书,按照开发者自己配置的sdk、权限、及其他打包配置打包的。

一.云打包机选择原理
HBuilder和HBuilderX是2个版本,连接不同的打包机。
HBuilderX的升级速度快于HBuilder,HBuilder到2018年底就不再升级了。
这里要注意的是:

  • 如果你的ide没升级,那么你的真机运行使用的基座版本是老的,但点了云打包,打包后会变成新的5+引擎了。这样就会产生打包和运行的区别。
  • 如果使用离线打包,那么5+引擎的版本取决于内嵌的5+sdk的版本,和HBuilder版本产生差异时,也会造成真机运行和打包结果不同。

当前使用的5+引擎版本号,可通过plus.runtime的api查询。

二. manifest配置
manifest是非常重要的配置文件,每个开发者都应该掌握,manifest详解:http://ask.dcloud.net.cn/article/94
在HBuilder的manifest可视化编辑界面也有上文的链接。
manifest定义了打包的各种配置,主要分几大类:

  • app基础信息。比如名称、图标、启动splash图片。所以真机运行时,这些都是HBuilder调试基座自带的,只有打包才变化。
  • 应用级的全局配置。比如沉浸式状态栏、全屏、横竖方向切换、是否解压资源。。。
  • 三方sdk配置。大多数三方sdk,需要开发者向sdk原厂申请appkey等信息,然后填写到manifest里打包,否则这些sdk不会工作。HBuilder调试基座使用的是DCloud向sdk原厂申请的appkey,打包时还需开发者自己配置。比如分享、微信支付、登陆、推送、地图、语音识别都需要自己申请和配置。
  • 权限。权限也是打包时必须自己配的,减少权限申请有助于安装包被用户接受。
  • 首页webview设置。对首页webview的控制无法通过js操作,只能在manifest里配。

很多开发者的工程是复制了Hello H5 或Hello mui的示例模板,也使用了相同的manifest,但这个manifest配置不一定适用于开发者,所以建议开发者做项目时新建空工程,自己调整manifest。

其他:
真机运行时使用plus.runtime.appid取值是HBuilder,并非真实的appid,此时涉及appid相关的用户反馈模板等功能也不可用。

收起阅读 »

【公告】使用云打包后下载包变成360、应用宝等其他apk文件的说明

打包下载 云打包

问题描述

部分开发者反馈,使用HBuilder云打包后,下载的安装包不正确。

问题原因

经我们排查发现,目前的主要原因是下载过程中被网络劫持导致的。

问题收集

若出现以上问题,请在文章下方提供以下信息,方便我们排查问题。

  • 宽带运营商,如电信、联通等。
  • 所在地区,如北京等。
  • 操作系统环境,如windows,mac os等。
  • 应用的appid,即manifest.json中的appid。
  • 打包应用平台,如Android、iOS等。
  • 打包时间
继续阅读 »

问题描述

部分开发者反馈,使用HBuilder云打包后,下载的安装包不正确。

问题原因

经我们排查发现,目前的主要原因是下载过程中被网络劫持导致的。

问题收集

若出现以上问题,请在文章下方提供以下信息,方便我们排查问题。

  • 宽带运营商,如电信、联通等。
  • 所在地区,如北京等。
  • 操作系统环境,如windows,mac os等。
  • 应用的appid,即manifest.json中的appid。
  • 打包应用平台,如Android、iOS等。
  • 打包时间
收起阅读 »

求助大神,我是菜鸟怎么实现复制粘贴啊

复制

怎么在APP中实现文本的复制粘贴啊

怎么在APP中实现文本的复制粘贴啊

关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性

WKWebview uiwebview 浏览器兼容 Webview

浏览器兼容性是前端常见问题,经常有人会问:我的代码在xx浏览器上可以用,为什么在HBuilder真机运行或打包的就有问题?

先说iOS。

iOS的webview有uiwebview和wkwebview的区别

从iOS8起,Apple推出了wkwebview,Safari默认使用wkwebview。
由于iOS13将uiwebview列入非公开api,并说明未来会禁止使用uiwebview的应用上架。所以从HBuilderX 2.2.5起,默认使用的是wkwebview,如果要切换为uiwebview,需要在manifest里或创建webview时的参数里指定kernel。
uni-app的app端视图层固定使用wkwebview。这个和微信小程序的策略一样,它在iOS上也是只能渲染在wkwebview下。
这两种webview各有利弊。
wk的问题是:不支持websql(iOS8、9上不支持,iOS10恢复支持)、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、在联网及本地文件读取等有各种跨域限制、wk第一次渲染速度略慢于uiwebview;(uni-app的js本来也不运行在webview里,所以无所谓这些限制)
但wkwebview的好处是:节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示(滚动前就加载图片不受影响)、wkwebview的video播放支持AirPlay(uni-app的video组件是原生的,暂不支持ariplay)。
如果同时在一个app里使用ui和wk两种webview,注意2种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。
详细的wkwebview的使用注意参考:https://ask.dcloud.net.cn/article/36348

Android手机的webview,分系统webview和x5两种

Android系统webview

系统webview,是默认的webview,及Google的Android system webview,它自带于手机rom中,所有依赖系统webview的应用都调用这个webview。
在Android4.4以前,webview是Android webkit 浏览器内核,很多HTML5标准语法不支持,比如indexeddb、webgl等,canvas性能也非常差。
Android4.4起,变成了chromium内核,内核版本是chrome30,性能和现代语法支持大幅提升。
从Android5开始,webview脱离rom可单独更新,伴随着chrome的发版,google会在google play store上同步更新Android system webview。
由于google play store被墙,国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。http://a.vmall.com/app/C10730262
也有个别国产rom改坏了这块的机制,使得自身的system webview无法独立安装升级。
目前国内的Android5以上手机webview版本差异很大,从chrome37一直跨度到60,手机用户侧使用了到底是哪个版本是不一定的。
所以HBuilder的开发者需要注意,尽量不要使用chrome40以后的新增的语法,使用普通常规的写法完成业务开发。

关于如何查看Android手机端webview的版本:

  1. 日志里查ua
  2. 在系统设置里找到所有应用,显示隐藏系统进程,在里面找到Android system webview,显示的版本即为chrome版本。
  • Android手机默认浏览器和webview的区别
    国外品牌的安卓手机,自带浏览器就是chrome。而国内安卓手机,自带浏览器大多是QQ浏览器、UC浏览器的贴牌,极个别是自己改造chromium。
    所以手机自带的浏览器并不等于webview,在一个平台可运行,不代表另一个平台可兼容。
    QQ、UC、360等浏览器也基本是基于chromium做改造,不同版本的浏览器其使用的chromium内核版本也不一样。具体可以打印ua查看。
    注意夜神等安卓模拟器的Android版本是4.4,很多新语法都不支持。

  • 如果你有影响用户的能力,为了给用户更好的体验,可以引导Android用户安装最新版Android system webview。应用宝、华为、金立等应用市场均可下载这个apk,或者翻墙到google play store。
    在华为、小米、金立手机上,wifi下会自动更新Android system webview。
    尤其是有些Android5用户使用的Android system webview 37版本,有硬件加速bug,闪屏花屏,此时升级webview即可解决。

  • 有人问可否在打包时直接集成新版Android system webview,减少浏览器兼容问题?
    webview体积至少50M起,体积实在太大了。有兴趣的开发者可以自己研究离线打包。
    倒是可以这样:js里判断当前手机是Android5以上,且webview版本过低,比如低于40(ua可以判断),可以提醒用户是否升级webview,然后引导用户去之前贴出的地址下载更新webview。
    但不管怎么样,尽量少写可能遇到兼容性问题的代码。

Android App也可以使用x5 webview

从HBuilderX 2.5.3起,支持使用腾讯的x5内核,详见文档https://ask.dcloud.net.cn/article/36806

各小程序平台的webview内核说明

  • 各家小程序,在iOS上大多使用的是wkwebview内核,已知仅百度小程序是uiwebview。wkwebview是iOS的一部分,其版本根据iOS版本的不同而不同。可以在caniuse直接看到iOS版本对应的浏览器兼容问题。
  • Android上各家小程序使用的是基于chromium改造的浏览器内核。具体如下:
    • 微信:老版微信使用的是x5,ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903;后来微信团队自研了MWEB内核,ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
    • 百度小程序:ua特征是Chrome/63.0.3239.83,并且包含baiduboxapp字符串
    • 支付宝小程序:根据支付宝版本,chrome有57和69等版本,ua特征字符串有NebulaSDK
    • QQ小程序:根据QQ版本,chrome有66和68等版本,ua特征字符串有QQ/MiniApp
    • 头条小程序:ua特征是Chrome/62,ua特征字符串有ToutiaoMicroApp

uni-app中,js方面不存在浏览器兼容问题,因为js都使用的是独立的js引擎,与webview无关,API也是仅小程序支持的API才可以使用。所以uni-app的浏览器兼容性问题,主要是css。注意不要使用太新的css就可以。

如果要查阅真机运行和打包的区别,访问此文:http://ask.dcloud.net.cn/article/1322

继续阅读 »

浏览器兼容性是前端常见问题,经常有人会问:我的代码在xx浏览器上可以用,为什么在HBuilder真机运行或打包的就有问题?

先说iOS。

iOS的webview有uiwebview和wkwebview的区别

从iOS8起,Apple推出了wkwebview,Safari默认使用wkwebview。
由于iOS13将uiwebview列入非公开api,并说明未来会禁止使用uiwebview的应用上架。所以从HBuilderX 2.2.5起,默认使用的是wkwebview,如果要切换为uiwebview,需要在manifest里或创建webview时的参数里指定kernel。
uni-app的app端视图层固定使用wkwebview。这个和微信小程序的策略一样,它在iOS上也是只能渲染在wkwebview下。
这两种webview各有利弊。
wk的问题是:不支持websql(iOS8、9上不支持,iOS10恢复支持)、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、在联网及本地文件读取等有各种跨域限制、wk第一次渲染速度略慢于uiwebview;(uni-app的js本来也不运行在webview里,所以无所谓这些限制)
但wkwebview的好处是:节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示(滚动前就加载图片不受影响)、wkwebview的video播放支持AirPlay(uni-app的video组件是原生的,暂不支持ariplay)。
如果同时在一个app里使用ui和wk两种webview,注意2种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。
详细的wkwebview的使用注意参考:https://ask.dcloud.net.cn/article/36348

Android手机的webview,分系统webview和x5两种

Android系统webview

系统webview,是默认的webview,及Google的Android system webview,它自带于手机rom中,所有依赖系统webview的应用都调用这个webview。
在Android4.4以前,webview是Android webkit 浏览器内核,很多HTML5标准语法不支持,比如indexeddb、webgl等,canvas性能也非常差。
Android4.4起,变成了chromium内核,内核版本是chrome30,性能和现代语法支持大幅提升。
从Android5开始,webview脱离rom可单独更新,伴随着chrome的发版,google会在google play store上同步更新Android system webview。
由于google play store被墙,国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。http://a.vmall.com/app/C10730262
也有个别国产rom改坏了这块的机制,使得自身的system webview无法独立安装升级。
目前国内的Android5以上手机webview版本差异很大,从chrome37一直跨度到60,手机用户侧使用了到底是哪个版本是不一定的。
所以HBuilder的开发者需要注意,尽量不要使用chrome40以后的新增的语法,使用普通常规的写法完成业务开发。

关于如何查看Android手机端webview的版本:

  1. 日志里查ua
  2. 在系统设置里找到所有应用,显示隐藏系统进程,在里面找到Android system webview,显示的版本即为chrome版本。
  • Android手机默认浏览器和webview的区别
    国外品牌的安卓手机,自带浏览器就是chrome。而国内安卓手机,自带浏览器大多是QQ浏览器、UC浏览器的贴牌,极个别是自己改造chromium。
    所以手机自带的浏览器并不等于webview,在一个平台可运行,不代表另一个平台可兼容。
    QQ、UC、360等浏览器也基本是基于chromium做改造,不同版本的浏览器其使用的chromium内核版本也不一样。具体可以打印ua查看。
    注意夜神等安卓模拟器的Android版本是4.4,很多新语法都不支持。

  • 如果你有影响用户的能力,为了给用户更好的体验,可以引导Android用户安装最新版Android system webview。应用宝、华为、金立等应用市场均可下载这个apk,或者翻墙到google play store。
    在华为、小米、金立手机上,wifi下会自动更新Android system webview。
    尤其是有些Android5用户使用的Android system webview 37版本,有硬件加速bug,闪屏花屏,此时升级webview即可解决。

  • 有人问可否在打包时直接集成新版Android system webview,减少浏览器兼容问题?
    webview体积至少50M起,体积实在太大了。有兴趣的开发者可以自己研究离线打包。
    倒是可以这样:js里判断当前手机是Android5以上,且webview版本过低,比如低于40(ua可以判断),可以提醒用户是否升级webview,然后引导用户去之前贴出的地址下载更新webview。
    但不管怎么样,尽量少写可能遇到兼容性问题的代码。

Android App也可以使用x5 webview

从HBuilderX 2.5.3起,支持使用腾讯的x5内核,详见文档https://ask.dcloud.net.cn/article/36806

各小程序平台的webview内核说明

  • 各家小程序,在iOS上大多使用的是wkwebview内核,已知仅百度小程序是uiwebview。wkwebview是iOS的一部分,其版本根据iOS版本的不同而不同。可以在caniuse直接看到iOS版本对应的浏览器兼容问题。
  • Android上各家小程序使用的是基于chromium改造的浏览器内核。具体如下:
    • 微信:老版微信使用的是x5,ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903;后来微信团队自研了MWEB内核,ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
    • 百度小程序:ua特征是Chrome/63.0.3239.83,并且包含baiduboxapp字符串
    • 支付宝小程序:根据支付宝版本,chrome有57和69等版本,ua特征字符串有NebulaSDK
    • QQ小程序:根据QQ版本,chrome有66和68等版本,ua特征字符串有QQ/MiniApp
    • 头条小程序:ua特征是Chrome/62,ua特征字符串有ToutiaoMicroApp

uni-app中,js方面不存在浏览器兼容问题,因为js都使用的是独立的js引擎,与webview无关,API也是仅小程序支持的API才可以使用。所以uni-app的浏览器兼容性问题,主要是css。注意不要使用太新的css就可以。

如果要查阅真机运行和打包的区别,访问此文:http://ask.dcloud.net.cn/article/1322

收起阅读 »