vConsole手机调试模式uniapp和原生h5

这篇具有很好参考价值的文章主要介绍了vConsole手机调试模式uniapp和原生h5。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

手机打开调试模式的方法
尽量放在页面头部,底部有可能不行文章来源地址https://www.toymoban.com/news/detail-635004.html

原生

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

uniapp

1 选中你的项目,弄出终端,输入以下命令:npm install vconsole

npm install vconsole
cnpm install vconsole

2 引用vconsole,找到main.js文件中,加上以下代码:

// #ifdef H5
// 提交前需要注释  本地调试使用
const vconsole = require('vconsole')
Vue.prototype.$vconsole = new vconsole() // 使用vconsole
// #endif 

到了这里,关于vConsole手机调试模式uniapp和原生h5的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ios手机在app中调试h5页面

    网页开发在浏览器里调试很方便,但是在移动端开发调试,例如需要在app中打开,会用到一些bridge , 这时候就不能在浏览器调试。在app调试,如果每次都要发布到测试环境才能调试,那就会浪费很多时间。 可以通过charls来做一个代理 从而在手机app里调试h5页面 安装charles 安装

    2024年03月15日
    浏览(65)
  • 原生Android与uniapp开发的H5混合开发

    vue版本选择2.0  记住一点,打包H5前修改配置,否则在Android中打开会白屏,修改方式如下 打包成H5,打包后可以在浏览器打开确保有内容 assets文件夹没有就自己建 xml布局文件处加入一个webview标签 Activity的 onCreate周期加入如下代码 运行项目就可以看到uniAPP的页面了

    2024年02月21日
    浏览(50)
  • uniapp生成的h5与flutter的原生进行交互

            最近拿到需求是要配合app做一些h5的页面,刚好h5又是用uniapp生成的,使用起来跟普通的h5有些区别,所以在这里总结一下使用uniapp生成的h5页面如何跟flutter进行数据的传递 这里的 kjToLessonSubmit 是flutter那边写好的方法 这里值得注意的是,我们使用uniapp去书写代码的

    2024年02月11日
    浏览(55)
  • uniapp 之 uniapp app 与uniapp H5的通信 webview,以及处理H5页面的手机物理返回问题

    APP端: 引用 web-view     app给H5传参:通过h5地址传参 这个方法简单,就是直接通过src 地址后面通过 ? 拼接参数 app端 h5端通过uniapp生命周期函数 onLoad 接收参数     app给H5传参:通过方法 evalJS 传参 H5给app传参:通过 web-view 组件的 @message 绑定的方法 处理H5页面的手机物理返

    2024年01月16日
    浏览(49)
  • uniapp H5唤起手机App 中间下载页

    我这里直接是打开中间下载页,在下载页判断手机是否已存在App,有则唤起App,没有则可点击下载按钮下载app。 唤起App的关键语句是:window.location.href =  scheme  Scheme链接格式样式: [scheme]://[host]/[path]?[query] 直接放全部代码: 其中: 上述代码中的schemeLink:xxxApp:// Android和

    2024年02月20日
    浏览(47)
  • uniapp/H5 获取手机桌面壁纸 (静态壁纸)

    找半天没找到相关的内容,自己捣鼓出来的,记录一下。 (比较可惜的是只能获取静态图片,动态壁纸就不知道了咋弄了) uniapp的话还可以参考一下如何用NJS获取手机桌面壁纸? - DCloud问答下面DCloud_heavensoft 大佬的一个回答 : “Native.js很多类型没有。用uts可以 https://uni

    2024年02月19日
    浏览(38)
  • uniapp h5 tabBar兼容IOS手机底部黑线

    uniapp自定义tabBar方案 一、pages.json文件中添加tarBar 二、把原生的tabBar隐藏起来 三、自定义一个tabBar组件         //重点代码         height: 50px;         padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部         padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS11.2*/ 四、

    2024年02月09日
    浏览(59)
  • uniapp项目连接手机调试

    1.打开开发者模式 在手机更多设置里的最下面找到“开发者选项”【若没有这个,则先在更多设置里找到“关于手机”——“软件版本号”,连续点击“软件版本号”若干次】    出现“您已处于开发者模式,无需进行此操作”就已经打开开发者模式 2.找到手机设置,选择其

    2024年02月13日
    浏览(42)
  • 微信小程序-开了调试Vconsole能正常运行,不开调试不能正常运行

    这个微信小程序太奇怪了,做了一点小改动要上线,在本地连接真机调试好好的,上到体验环境手机打开就不行了。 而且奇怪,体验版打开调试后又正常了,加载页面的时候报了一个错 \\\"(in promise) MiniProgramErrornInvalid attempt to spread non-iterable instance.nIn order to be iterable, non-arra

    2024年02月11日
    浏览(52)
  • 开发uniapp过程中对app、微信小程序与h5的webview调试

        因为在开发中使用到了webview,因为出现一些问题,所以需要对webview进行跟踪调试,但因为app,h5与微信小程序不一样,所以需要单独说一下。     一、H5     这个比较简单,因为都是在chrome,用F12就可以  二、对微信小程序       因为普通的uniapp页面上都能通过F12可以

    2024年02月11日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包