美文网首页
混合开发H5页面调试

混合开发H5页面调试

作者: 海豚先生的博客 | 来源:发表于2021-03-11 18:31 被阅读0次

Vorlon.JS

  1. 安装:npm install vorlon -g
  2. 终端运行服务:vorlon
  3. 在html页面添加脚本,IP_address为wifi下电脑的IP:
    <script src="http://[IP_address]:1337/vorlon.js"></script>
  4. 在浏览器输入http://localhost:1337后回车,显示vorlon界面
  5. 在App内打开上述HTML页面,浏览器会打印日志信息、接口信息

APP配置H5入口

  1. 在同一个局域网下,获取电脑本机ip
  2. npm run dev后在地址栏获取当前测试项目的url
  3. 在app某个html页面配置一个a标签,href为上述url,将url中的localhost替换为上述ip地址
  4. 打开app,点击a标签即可打开测试页面,也可调用jsbridge

app配置入口

最好让native开发人员配置一个h5入口,H5输入本地ip及路径,点击按钮直接加载上述路径

相关文章

  • 移动端调试二三事

    最近在做混合app的开发的h5部分,有些时候需要看页面调试的结果,同事告诉我用chrome调试的时候我是很懵逼的,...

  • [AP_11] APP中内嵌H5页面-元素定位环境搭建

    一、H5页面简介 1. H5页面元素定位引入 在混合开发的APP中常有内嵌的H5页面,对于H5页面元素定位,其前所...

  • APP内嵌H5定位

    一、H5页面简介 1. H5页面元素定位引入 在混合开发的APP中常有内嵌的H5页面,对于H5页面元素定位,其前所...

  • 混合开发H5页面调试

    Vorlon.JS 安装:npm install vorlon -g 终端运行服务:vorlon 在html页面添...

  • iOS使用xcode模拟器 调试webView/H5页面

    项目中使用oc与H5混合开发,想在H5中进行断点调试. 1.开启Safari开发菜单 在不开启"开发"状态下是,没...

  • OC与JS交互的简单实现方式

    H5的快速发展,使得现在各种APP中或多或少的嵌入了H5的页面,那么原生页面和H5的混合开发成了我们不得不熟悉的...

  • Android WebView 对 viewport meta

    在混合开发中有H5页面需要缩放的需求,但又不是所有的页面都需要允许缩放。而在混合开发中我的常用做法是只打造一个We...

  • 原生orH5

    判断一个APP页面是原生的还是H5页面的方法 最火的APP开发模式是Hybrid APP开发(即混合模式,半原生半...

  • Hybrid App 离线包方案实践

    背景 在 H5 + Native 的混合开发模式中,让人诟病最多的恐怕就是加载 H5 页面过程中的白屏问题了。下面...

  • vue与原生混合开发

    ,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓、i...

网友评论

      本文标题:混合开发H5页面调试

      本文链接:https://www.haomeiwen.com/subject/fqjoqltx.html