HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

浅谈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

收起阅读 »

Hbuilder使用genymotion模拟器进行调试

真机联调 模拟器 genymotion

最近在研究移动app,想使用genymotion在做联调,结果发现Hbuilder不能自动检测到genymotion模拟器。
环境:
1.Hbuilder 8.1.1
2.genymotion 2.9
3.virtual box 5.18
4.android sdk (android 6.0)
配置好genymotion,使用android studio已经可以正常连接了,genymotion设置中,使用了android sdk 的platform-tools下的adb

打开hbuilder,却死活连不上这个genymotion模拟器。

经过百度,发现是因为hbuilder使用的是自己tools目录下的adb,而genymotion使用的也是自己tools目录下的adb(或者可以设置为android sdk下platform-tools目录下的adb),造成两个adb之间冲突。经过测试,可以自己编一个bat或者ps1文件,把genymotion的adb先kill掉,然后用hbuilder的adb去连接模拟器就可以了。

流程如下:
1.进入genymotion的adb目录,用命令.\adb devices查看当前连接地址(如:192.168.173.101:5555)

PS D:\Applications\Android\SDK\platform-tools> .\adb devices  
List of devices attached  
192.168.173.101:5555    device
  1. 使用命令taskkill /f /im adb.exe杀掉所有的adb进程(在此之前可能需要先重命名adb.exe文件,不然它还会自动启动)
PS D:\Applications\Android\SDK\platform-tools>ren adb.exe adb1.exe  
PS D:\Applications\Android\SDK\platform-tools>taskkill /f /im adb.exe  
成功: 已终止进程 "adb.exe",其 PID 为 11512。  
成功: 已终止进程 "adb.exe",其 PID 为 5732。  
成功: 已终止进程 "adb.exe",其 PID 为 6768。
  1. 进入hbuilder的tools目录,执行命令.\adb connect 192.168.173.101:5555(ip:port就是上面通过adb devices查看到的)
PS D:\Applications\Android\SDK\platform-tools>pushd D:\Applications\HBuilder\tools  
PS D:\Applications\HBuilder\tools> .\adb connect 192.168.173.101:5555
  1. 重启hbuilder应该就能看到连接上模拟器了。(记得把genymotion的adb名字改回去,不然下回不能用了)
PS D:\Applications\HBuilder\tools> pushd D:\Applications\Android\SDK\platform-tools  
PS D:\Applications\Android\SDK\platform-tools>ren adb1.exe adb.exe

经过测试,成功连接到genymotion模拟器,所以,总结上面的命令,写了个简单ps1命令,用powershell(或者存为bat文件,双击运行即可)运行就可以了(里面文件目录、模拟器地址等要根据实际情况作调整)

pushd D:\Applications\Android\SDK\platform-tools  
.\adb devices  
ren adb.exe adb1.exe  
pushd D:\Applications\HBuilder\tools  
taskkill /f /im adb.exe  
.\adb connect 192.168.173.101:5555  
pushd D:\Applications\Android\SDK\platform-tools  
ren adb1.exe adb.exe  

pause
继续阅读 »

最近在研究移动app,想使用genymotion在做联调,结果发现Hbuilder不能自动检测到genymotion模拟器。
环境:
1.Hbuilder 8.1.1
2.genymotion 2.9
3.virtual box 5.18
4.android sdk (android 6.0)
配置好genymotion,使用android studio已经可以正常连接了,genymotion设置中,使用了android sdk 的platform-tools下的adb

打开hbuilder,却死活连不上这个genymotion模拟器。

经过百度,发现是因为hbuilder使用的是自己tools目录下的adb,而genymotion使用的也是自己tools目录下的adb(或者可以设置为android sdk下platform-tools目录下的adb),造成两个adb之间冲突。经过测试,可以自己编一个bat或者ps1文件,把genymotion的adb先kill掉,然后用hbuilder的adb去连接模拟器就可以了。

流程如下:
1.进入genymotion的adb目录,用命令.\adb devices查看当前连接地址(如:192.168.173.101:5555)

PS D:\Applications\Android\SDK\platform-tools> .\adb devices  
List of devices attached  
192.168.173.101:5555    device
  1. 使用命令taskkill /f /im adb.exe杀掉所有的adb进程(在此之前可能需要先重命名adb.exe文件,不然它还会自动启动)
PS D:\Applications\Android\SDK\platform-tools>ren adb.exe adb1.exe  
PS D:\Applications\Android\SDK\platform-tools>taskkill /f /im adb.exe  
成功: 已终止进程 "adb.exe",其 PID 为 11512。  
成功: 已终止进程 "adb.exe",其 PID 为 5732。  
成功: 已终止进程 "adb.exe",其 PID 为 6768。
  1. 进入hbuilder的tools目录,执行命令.\adb connect 192.168.173.101:5555(ip:port就是上面通过adb devices查看到的)
PS D:\Applications\Android\SDK\platform-tools>pushd D:\Applications\HBuilder\tools  
PS D:\Applications\HBuilder\tools> .\adb connect 192.168.173.101:5555
  1. 重启hbuilder应该就能看到连接上模拟器了。(记得把genymotion的adb名字改回去,不然下回不能用了)
PS D:\Applications\HBuilder\tools> pushd D:\Applications\Android\SDK\platform-tools  
PS D:\Applications\Android\SDK\platform-tools>ren adb1.exe adb.exe

经过测试,成功连接到genymotion模拟器,所以,总结上面的命令,写了个简单ps1命令,用powershell(或者存为bat文件,双击运行即可)运行就可以了(里面文件目录、模拟器地址等要根据实际情况作调整)

pushd D:\Applications\Android\SDK\platform-tools  
.\adb devices  
ren adb.exe adb1.exe  
pushd D:\Applications\HBuilder\tools  
taskkill /f /im adb.exe  
.\adb connect 192.168.173.101:5555  
pushd D:\Applications\Android\SDK\platform-tools  
ren adb1.exe adb.exe  

pause
收起阅读 »