使用方式

  1. 打开uni-app项目下的vue文件
  2. 点击菜单 运行->运行到浏览器->Chrome
  3. 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可)
  4. HBuilderX修改代码后会自动刷新chrome的页面
  5. 审查元素

    在chrome控制台安装vue devtools后可查看节点关系。
    安装方式自行搜索。
    每个页面都在page节点下,pageHead是微信和app下的原生导航栏,即pages.json里配的导航栏。
    pageBody是导航栏下的页面内容。
    所有标签为了避免和标准H5标签冲突,都加了U前缀。

  6. 断点debug
    点chrome控制台的source,可以给js打断点调试。
    找到同名的文件,如果没有同名vue文件,一般会有一个同文件名的js文件,此时会提示检测到sourcemap,是否引入,点允许。然后就会有同名的vue文件。如果找不到,则把焦点放到source的代码区,然后敲ctrl+p打开文件查找窗口,然后敲入vue页面名字,然后打开vue页面。
    这个vue里,只有js,没有tag和css,但可以打断点调试。

发布方式

    1. 配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是www.xxx.com/html5,在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置,也可以在源码视图内编辑h5节点,router下增加base属性为html5。
      可视化界面设置:

      源码视图设置:

    2. 点击菜单 发行->H5
    3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源,部署服务器(或者使用本地服务器预览,不要直接在浏览器打开html文件)。如果发布使用的history模式,需要服务端配合,参考:后端配置方式

uni-app的H5版使用注意事项的更多相关文章

  1. JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

    网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...

  2. vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接

    vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...

  3. vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...

  4. H5版俄罗斯方块(2)---游戏的基本框架和实现

    前言: 上文中谈到了H5版俄罗斯方块的需求和目标, 这次要实现一个可玩的版本. 但饭要一口一口吃, 很多东西并非一蹴而就. 本文将简单实现一个可玩的俄罗斯方块版本. 下一步会引入AI, 最终采用coc ...

  5. iOS原生App与H5页面交互笔记

    文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...

  6. 手机无须ROOT不用修改hosts即可在本地测试安卓、苹果APP和H5应用

    开发手机APP和 H5 应用经常需要在本地和线上环境分开测试,一般想到的操作都是修改hosts,我也一直这么干的,但手机上修改hosts是需要 ROOT权限的,这样太过麻烦,还有变砖头的风险,而且有些 ...

  7. React Native App设置&Android版发布

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  8. 安装基于 Linux 发行版的重要事项(流程指引)

    安装基于 Linux 发行版的重要事项(Install important issues based on the Linux distribution. (Process guidance)) 1. ...

  9. chrome调试微信,app中H5网页的方法!

      调试微信,app中H5网页大概有如下几个方法: (1).我们可以直接把网页的url放在chrome浏览器中进行调试.(不涉及微信登录) (2).我们可以把网页的url放在微信开发者工具中进行调试. ...

随机推荐

  1. C++ fill fill_n generate generate_n

    #include <iostream>#include <algorithm>#include <vector>#include <list>#incl ...

  2. IPv6地址表示方式

    1.IPv6 简介    IPv6是英文“Internet Protocol version 6”(互联网协议第6版)的缩写,是互联网工程任务组(IETF)设计的用于替代IPv4的下一代IP协议,其地 ...

  3. HBase管理与监控——统计表行数

    背景 HBase统计 RowCount 的方法有好几种,并且执行效率差别巨大,以下3种方法效率依次提高.   一.hbase-shell的count命令 这是最简单直接的操作,但是执行效率非常低,适用 ...

  4. 新式类__new__()方法

    概述 __new__() 是在新式类中新出现的方法,在 Python 中类实例化时,__new__()方法用在 __init__() 启动之前,决定是否要使用该 __init__() 方法,因为__n ...

  5. elasticsearch备份脚本

    1.主要文件 [root@k8s elasticsearch]# tree . ├── backup_es.sh ├── indices_file.txt ├── recover_es.sh └── ...

  6. POJ 3274/洛谷 1360:Gold Balanced Lineup 黄金阵容平衡

    题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been able to na ...

  7. 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用

    目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...

  8. 在UPW中使用VLC解码媒体

    VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...

  9. luogu P1115 最大子段和 (dp)

    链接: https://www.luogu.org/problemnew/show/P1115 题面: 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一 ...

  10. poj1797(dijstra变形,求最小边的最大值)

    题目链接:https://vjudge.net/problem/POJ-1797 题意:n个点,m条带权边,求点1到点n的所有路径中最小边的最大值. 思路: 和poj2253一样,只不过那题n< ...