展开

关键词

app中的webview通识篇(上)

前言如果你还是第一次与app合作开发webview的页面,那么对于如何,可能有哪些问题可能是不够了解的。本文尝性的根据自己的经验给大家一个入门级别的了解,如果是大佬级别的,可以绕路了。 webview协议约定为了更好的在app中开发我们的移动页面(h5),我们需要与app开发人员约定一些基本的原则,来保证我们的页面可以很好的进行,包括工具、灵活的模拟上线时的app环境、测交互过程中的问题 以下的方案仅供参考,每一条都是有实际用途的,如果公司里的webview需要进行准确的和后续开发,必要性的需要考虑以下的问题。 JS用OC接口JS开始用OC接口前,有几个前提条件: js的window.isReady方法已经触发过了,JS才能用OC提供的方法。 Android本地通过Java用HTML页面中的JavaScript方法原生js方法分一下两种类型的方法:无返回值方法有返回值方法js中无返回值方法很简单,我们直接用即可具体代码示例如下:*

3K20

H5如何与原生App通信?

RN从0.57起,可指定使用WKWebView作为WebView的实现 rn js code WebView组件不要嵌套在或原生点击组件中,会造成H5内页面滚动失效h5向ios客户端发送消息;在ios中 ,并没有现成的api让js用native的方法,但是UIWebView与WKWebView能够拦截h5内发起的所有网络请求。 h5 js codewindow.postMessage(data); rn js code { let { data } = e.nativeEvent; ... }} >RN客户端用H5postMessage getShare(data, callBack) { ..}}在核心封装的基础上,我们可以还做更多的优化,比如将每个回函数用后自我销毁释放内存四、安卓使用chrome:inspect进行,需要翻墙 IOS使用mac safari的develop选项进行 使用RN的http:localhost:8081debugger-ui 只能RN代码,无法webView代码,RN下webView和对应

8720
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JSBridge深度剖析

    :分析url-参数和回的格式第五步:Native如何JS第六步:H5中api方法的注册以及格式JSBridge的完整流程可总结为: ? = {});该对象有如下方法:registerHandler( String,Function )H5用注册本地JS方法,注册后Native可通过JSBridge用。 id,然后连同需要传递的参数信息,组装成一个JSON格式的参数通过JSBridge通知H5页面回NativeJS到了这一步,就该Native通过JSBridgeH5JS方法或者通知H5进行回了 型 原生生成的回函数id,h5执行完毕后通过url scheme通知原生api成功执行,并传递参数H5中api方法的注册以及格式前面有提到Native主动H5中注册的api方法,那么h5中怎么注册供原生用的 JSBridge.registerHandler(testH5Func,function(data,callback){ alert(测函数接收到数据:+JSON.stringify(data));

    1.5K50

    从0到1:打造移动端H5性能测平台

    如何打造一个移动端H5性能平台?听起来是否有点高大上,不知道如何下手。不要紧张,我们来手把手教大家打造自己的移动端H5性能测平台。 2、测流程简单化:一键化测,输入URL,输出测报告,不要远程,不要分析数据。3、测结果可视化:展示H5过程中的http请求瀑布流,资源统计,各种时间类硬指标。 http请求类数据方案一 “远程”远程的思路和PC上F12一个网页本质是一样的。把工具对PC浏览器的转移到对移动端设备浏览器上。 因为webview中的回函数不多,能够统计的时间指标有限,所有最终方案为上述两种方案的结合,既有webview回,也有js插桩统计获得的时间 H5性能优化建议 优化建议是对整个测结果的一个反馈,也需要结合上述测的结果 但是,移动端H5页面的很多资源并不是在H5链接指向的html中显式的出现如这种标签,而是通过在js执行大量逻辑下判断是否加载某个资源,此时出现在load事件后还有资源陆续加载的情况,如下一个H5加载过程正是上述情况

    99571

    iOS 原生和H5混合开发总结

    3.原生页面的导航栏标题可以取H5的title 监听title; 监听回- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id 所以后来采用和js交互的方式进行跳转2.iOS给JS提供了一个页面返回的方法,但是在测过程中发现,这个方法会无限用,导致页面一直pop; 用的结果是因为iOS这边使用了一个通用的页面,比如两个页面一个页面是 那边把这个handleBack方法写成全局的了,所以我返回ViewController1的时候也在用handleBack,所以会无限的用,H5那边之后改成局部就没有问题了。 3.首页有个逻辑是如果客户端定位成功就把定位传给H5进行交互。H5根据定位信息来显示不同的页面,所以和JS注册了一个方法。在网速很快的时候都没有发现问题。 但是如果定位返回很快,但是访问H5那边慢就会导致JS方法在没有注册的情况下就用了JS所以没有效果。解决方法是定位成功和H5交互但是在WebView加载完成后再用一次交互。这样就没有问题了。

    1.4K20

    Android 混合开发之JsBridge

    1:H5通知Native(可能需要处理回),2:Native通知H5(也可能需要处理回)实现这种机制的方式并不唯一,但使用不当经常会引入很多问题,比如:H5同Native需要一个中间js文件,实现简单的通信协议 不存在注入时机跟注入失败的问题,在H5的head里用都没问题。 JsMethodApi.callNative(头部就可以回); 经测,其实是可以通知到Native的,不过有一点需要注意callNative是这JavaBridge这个线程中执行的,虽然不提清楚它跟 可以抽离到一个中间的js,为每个任务设置一个ID,暂存回函数,等到Native处理结束后,先走这个中间的js,找到对应的js函数执行即可, var _callbacks = {}; function 通知Native,同时Native将结果回传给H5,并完成回这样一条通路。

    95020

    H5 前端性能测实践

    针对这些白屏、卡慢之类的问题,我们测该从哪些方面去展开测分析和数据对比呢?接下来笔者分享一些 H5 前端测实践的经验,抛砖引玉,希望大家一起谈论,一起挖掘更多有价值的课题。 1)加载网络请求这个过程主要是 Webview 拿到 H5 页面 url 之后,用 loadUrl 方法,开始去网络上请求第一个资源文件。 想要获取 H5 真机耗时,一种方式是 js 代码进行上报;另一种是对于 Android 设备,可以用 remote-debug 的方式远程真机页面。 只需要保证 webview 开关打开 & 与 PC USB 连接且开启 USB ,就可以在 PC Chrome 访问 chrome:inspect 来获取对象。 四、总结:H5 前端性能测方案当然,前端性能不仅仅表现在白屏、卡顿问题,也有可能是手机过度发热等等。

    39920

    Android 中使用WebViewJavaScriptBridge进行H5和原生的交互

    概述当我们采用H5与Native原生结合开发,使用H5去开发一些功能的时候,肯定会涉及到Android与Js互相用的问题,通常有两种实现方式,第一种 使用原生的addJavascriptInterface 注入就可以随便拿到客户端的重要信息,甚至轻而易举的用本地代码进行流氓行为,谷歌后来发现有此漏洞后,增加了防御措施,如果要是js用本地代码,开发者必须在代码中申明JavascriptInterface , 列如在4.0之前我们要使得webView加载js只需如下代码: mWebView.addJavascriptInterface(new JsToJava(), myjsfunction); 4.4之后用需要在用方法加入加入 test() { 用本地java方法 第一个参数是 用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回后具体执行方法,responseData为java层回传数据 var data onCallBack(String data) { Log.e(TAG, 来自web的回传数据: + data); } }); H5端代码注册回函数,第一次连接时用 初始化函数connectWebViewJavascriptBridge

    16520

    《移动端本地 H5 秒开方案探索与实现》

    | 导语 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度? 那么将 H5 相关页面和资源打包到客户端中,然后客户端将展示数据传给页面,通过webView加载展示,这样几乎不需要网络请求,webview 只要渲染页面,执行js即可,这样体验岂不是很完美? 3.2 如何开发和维护开发本地 H5 模块,很容易想到在本地通过模拟数据开发,然后将 H5 给到各客户端打包后进行联。 四、细节优化解决了上面的问题,本地 H5 确实可以达到秒开的加载速度,不过要达到和客户端一样的体验,还需要配上一些细节优化:预加载 webView,预拉取数据在联本地 H5 页面过程中,发现首次加载页面时间比后续打开时间都慢很多 ,原因预计是 webView 首次初始化时候需要启动资源和服务较多,于是尝客户端在预先初始化 webView 方案,果然这样第一次打开页面时候就变快了。

    3K152

    H5应用加固防破解-js虚拟机保护方案浅谈

    因此,使JS代码不可分析,增加反式从防破解角度来看效果不佳。随着浏览器技术的发展,动态器的功能越来越完善,把代码变得难也阅读这些保护方法很难起到很好的保护效果。 受保护的代码极难进行反向工程,并防止篡改尝。jshaman萨满科技是国内最专注于Web前端安全的JS代码保护团队。Jshaman是专业的JS代码在线加密平台。JShaman的含意是什么? 使JS代码不可分析除了可读性之外,被跟踪分析是JS面临的另一个重大安全问题,一份不可读的代码仍有被攻击者动态跟踪以分析出技术原理的可能性。 使JS代码每次被用(引用),代码自身可自动发生变异,变化为与之前完全不同的代码(功能完全不变,只是代码形式变异),以此杜绝代码被动态分析器检测:检测是否有特征、控制台是否打开、检测debugger指令是否执行。

    99910

    技能之H5

    关于H5,你需要掌握html标签、js语法、css样式。建议自学,网站http:www.w3school.com.cn上有大量实例教程,我的经验是大概1个月可以入门。 H5的形式H5目前有各种各样的形式,视频、图文、动画展示的、测答题类的、故事场景类的、通关小游戏、重力感应全景类等。 设计风格漫画风格、中国风、手绘板报风、考卷风格、报纸风格,也是各种各样的。 一般H5制作涉及到的7个主要内容预加载如果有大量图片,视频等,为了体验流畅度,要借助JS实现资源预加载。Loading页的设计一个富有创意的loading页起到眼前一亮的作用。 web优化网速很重要,所以图片要压缩,js、css文件加载顺序要注意真机技巧最后是需要面临各种用户机型的,多终端屏幕适配,横屏竖屏状态检测等。 我一般是用Browsersync中的RemoteDebug--CSS Outlining的。Gif制作一些动态效果可以用gif,而不用采用css或js,可以省很多事。

    55160

    H5前端性能测快速入门

    前言说到H5,对于做WEB测的同学来说再熟悉不过了,它包括页H5功能测,前端性能测,浏览器兼容性能测,以及服务端性能测。 那本文谈到的则是H5前端性能测,并希望通过阅读本文后,能够知道:H5前端性能测什么?如何发现问题以及相应的优化规则。 上述各种时间指标应根据当前H5的具体情况,选择合适的测指标。WebView相关:在android和IOS上测H5性能,测员还应该关注因加载H5而引起的app常规性能指标。 内存:加载页面前后内存变化,可间接反映H5中资源数量和大小,如dom数量,图片大小。 CPU:当页面中资源样式复杂,强视觉效果时,测员可观察CPU占用率来反映H5绘制质量。 这类工具不仅可以抓包,还可以对包进行修改,动态展示瀑布流,对web进行。在我们做H5前端性能测的时候,个人觉得只要不修改包,不对H5,就可以放弃使用这类工具,不是工具不好,而是大材小用。

    1.4K83

    H5前端性能测快速入门

    前言 说到H5,对于做WEB测的同学来说再熟悉不过了,它包括页H5功能测,前端性能测,浏览器兼容性能测,以及服务端性能测。 那本文谈到的则是H5前端性能测,并希望通过阅读本文后,能够知道:H5前端性能测什么?如何发现问题以及相应的优化规则。 上述各种时间指标应根据当前H5的具体情况,选择合适的测指标 WebView相关:在android和IOS上测H5性能,测员还应该关注因加载H5而引起的app常规性能指标。 内存:加载页面前后内存变化,可间接反映H5中资源数量和大小,如dom数量,图片大小。CPU:当页面中资源样式复杂,强视觉效果时,测员可观察CPU占用率来反映H5绘制质量。 这类工具不仅可以抓包,还可以对包进行修改,动态展示瀑布流,对web进行。在我们做H5前端性能测的时候,个人觉得只要不修改包,不对H5,就可以放弃使用这类工具,不是工具不好,而是大材小用。

    69160

    探索CocosH5正确的开发姿势

    在过去的两年时间先后培养了5名cocos2d-js客户端程序员,现在联系他们大多还在做cocos H5方向的工作。 左倾思想简单地把cocos H5当成cocos c++lua的代替品1. 有部分公司或开发人员是从c++或移动应用开发转过来的,用的是c++的开发思路编写js代码。 现象:手写UI、开发、手段极其落后,通常的唯一方法就是打日志。2. 不会利用javascript的三方模块,甚至不知道去使用它,其原因是不了解javascript的模块化技术。 现象:因为是在浏览器上开发、,以及第1条中提到的模块的加载方式导致,只能工作在浏览器上。口头禅:先把浏览器好再做手机。二、我对cocos H5的理解1. 与 Browserify 同类工具还有 Webpack,我在 cocos2d-js 项目中还尝过Webpack,比Browserifyg还要强大。

    76420

    Android WebView与JS交互全面详解(小结)

    而android和H5都不可能每次都是独立存在的,而是相互影响也相互的用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5页面等,下面来看看这两是怎么交互的目录? 交互方式总结Android与JS通过WebView互相用方法,实际上是:Android去JS的代码JS用Android的代码二者沟通的桥梁是WebView对于AndroidJS代码的方法有 具体分析2.1 Android通过WebViewJS 代码方式1:通过WebView的loadUrl()实例介绍:点击Android按钮,即用WebView JS(文本名为javascript) 中callJS() 具体使用: 步骤1:将需要用的JS代码以.html格式放到srcmainassets文件夹里 为了方便展示,本文是采用Andorid用本地JS代码说明;实际情况时,Android 更多的是用远程JS代码,即将加载的JS代码路径改成url即可需要加载JS代码:javascript.html 文本名:javascript

    1.1K10

    APP 开发技术如何进行选型 ?

    一方面,混合 App 很容易加载外部的 H5 页面,实现 App 的插件结构;另一方面,Web 页面可以方便地用外部的 Web 服务。开发方便Web 页面的和构建,远比原生控件简单省时。 做不了的, 原生 做交互性强的 原生 做 原生 与 H5 交互原生 与 H5 交互主要是采用 JSBridge它给 JavaScript 提供用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 JSBridge 的功能不止用 Native 功能这么简单宽泛。 双向通信的通道:JS 向 Native 发送消息: 用相关功能、通知 Native 当前 JS 的相关状态等。 Native 向 JS 发送消息: 回溯用结果、消息推送、通知 JS 当前 Native 的状态等。

    12210

    解耦---Hybrid H5跨平台性思考

    以第②步触发的伪协议内容为例,在本例“用”代码中被原生捕获后,会路由执行逻辑:self.method();④通讯行为——回:原生根据 H5 传过来的内容,捕获 js函数方法名,在原生逻辑执行结束后 ,将执行结果带到回函数中并执行 js函数。 通过在第③步“用”执行完后,ios 会js函数 H5MethodTag:*解析到H5的回函数名为H5MethodTag(#号后内容),回执行js的方法*webview.stringByEvaluatingJavaScriptFromString ①api接口创建:js 函数接口封装、平台差异处理,方便H5函数用mqq.build(mqq.tenpay.openTenpayView, { iOS: function(options, callback 遇到这种情况大家不妨也解耦,或许会收到意想不到的惊喜。----本文系腾讯Bugly独家内容,转载请在文章开头显眼处注明作者和出处“腾讯Bugly(http:bugly.qq.com)”

    72440

    一次开发多端使用的H5页面该如何

    问题在测安卓APP中的H5的时候发现部分UI展示异常例如该按钮的内容在IOS上正常,但是在安卓上却显示异常异常但是拷贝当前H5地址到安卓的浏览器上查看却是正常的那是因为APP中内置的WebView与浏览器的 WebView版本是不一样的所以我们需要在对应WebView下进行查看基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树JS 环境搭建开启手机上的USB功能打开Chrome浏览器,地址栏输入:Chrome:inspect,回车Chrome会自动检测手机上打开的App,并列出可的WebView页面,如图:页面点击inspect 就会弹出一个新的窗口测H5注意:因为需要下载WebView所以需要翻墙这时我们就可以看到文字偏上是因为没有上下居中span修改前添加line-height: normal 后内容就居中对齐了修改后小结使用该方法可以小程序中嵌入 H5、APP中嵌入H5的各种场景

    9510

    CSS 资料总结

    1、H5表单禁止复制、粘贴的方法(1)、HTML 禁止复制: 禁止粘贴: (2)、CSS 禁止用户 长按选择复制粘贴---css -webkit-user-select: none; -moz-user-select element.on(tap,function(e){element.focus();});----4、清除浏览器自己的缓存 ----5、H5穿透点击css实现pointer-events:none;js flex-direction:column; 的时候需要加上: -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical;----7、H5 性能优化http:isux.tencent.comh5-performance.html----8、针对$.load()函数,在js代码比较困难的时候,在要load的js头部加上这句话即可 @ sourceURL =msgprompt.js(异步加载的js)注:上面这行代码,必须要放在异步执行的js头部才行,经过测,Zepto1.2的$.load()函数不好使, 使用 Jquery1.8.3即可正常使用!

    9220

    小白必看,JSBridge 初探

    JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5。它在 APP 内方便地让 Native JSJS 用 Native,是双向通信的通道。 JS 通过这个对象或方法进行用时,执行对应的逻辑操作,可以直接用 Native 的方法。使用该方式时,JS 需要等到 Native 执行完对应的逻辑后才能进行回里面的操作。 用示例:window.webkit.messageHandlers.share.postMessage(xxx); Native 用 JSNative JS 比较简单,只要 H5JS = nil) javaScriptString 需要用的 JS 代码 completionHandler 执行后的回 objective-c JSBridge 的使用如何引用由 H5 引用在我司移动端初期版本时采用的是该方式 这样有利于保持 API 与 Native 的一致性,但是缺点是在 Native 注入的方法和时机都受限,JS 用 Native 之前需要先判断 JSBridge 是否注入成功使用规范H5 用 Native

    37210

    相关产品

    • 远程调试

      远程调试

      远程调试(Remote Debugging)提供上千台真实手机,随时随地在真机上进行测试,利用云屏技术对测试方式、操作体验进行了优化,随时截图和记录调试日志,帮助应用、移动游戏快速发现和解决问题,节省百万硬件费用,加速敏捷研发流程。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券