uni-app的H5版使用注意事项
使用方式
- 打开uni-app项目下的vue文件
- 点击菜单 运行->运行到浏览器->Chrome
- 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷新即可)
- HBuilderX修改代码后会自动刷新chrome的页面
- 审查元素
在chrome控制台安装vue devtools后可查看节点关系。
安装方式自行搜索。
每个页面都在page节点下,pageHead是微信和app下的原生导航栏,即pages.json里配的导航栏。
pageBody是导航栏下的页面内容。
所有标签为了避免和标准H5标签冲突,都加了U前缀。 - 断点debug
点chrome控制台的source,可以给js打断点调试。
找到同名的文件,如果没有同名vue文件,一般会有一个同文件名的js文件,此时会提示检测到sourcemap,是否引入,点允许。然后就会有同名的vue文件。如果找不到,则把焦点放到source的代码区,然后敲ctrl+p打开文件查找窗口,然后敲入vue页面名字,然后打开vue页面。
这个vue里,只有js,没有tag和css,但可以打断点调试。
发布方式
- 配置发行后的路径(发行在网站根目录可不配置),比如发行网站路径是www.xxx.com/html5,在manifest.json可视化界面 - H5配置 - 运行的基础路径中设置,也可以在源码视图内编辑h5节点,router下增加base属性为html5。
可视化界面设置:源码视图设置:
- 点击菜单 发行->H5
- 在当下项目下的unpackage/dist/build/h5目录找到出的资源,部署服务器(或者使用本地服务器预览,不要直接在浏览器打开html文件)。如果发布使用的history模式,需要服务端配合,参考:后端配置方式
uni-app的H5版使用注意事项的更多相关文章
- JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP
网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...
- vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
- vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题
vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...
- H5版俄罗斯方块(2)---游戏的基本框架和实现
前言: 上文中谈到了H5版俄罗斯方块的需求和目标, 这次要实现一个可玩的版本. 但饭要一口一口吃, 很多东西并非一蹴而就. 本文将简单实现一个可玩的俄罗斯方块版本. 下一步会引入AI, 最终采用coc ...
- iOS原生App与H5页面交互笔记
文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...
- 手机无须ROOT不用修改hosts即可在本地测试安卓、苹果APP和H5应用
开发手机APP和 H5 应用经常需要在本地和线上环境分开测试,一般想到的操作都是修改hosts,我也一直这么干的,但手机上修改hosts是需要 ROOT权限的,这样太过麻烦,还有变砖头的风险,而且有些 ...
- React Native App设置&Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
- 安装基于 Linux 发行版的重要事项(流程指引)
安装基于 Linux 发行版的重要事项(Install important issues based on the Linux distribution. (Process guidance)) 1. ...
- chrome调试微信,app中H5网页的方法!
调试微信,app中H5网页大概有如下几个方法: (1).我们可以直接把网页的url放在chrome浏览器中进行调试.(不涉及微信登录) (2).我们可以把网页的url放在微信开发者工具中进行调试. ...
随机推荐
- C++ fill fill_n generate generate_n
#include <iostream>#include <algorithm>#include <vector>#include <list>#incl ...
- IPv6地址表示方式
1.IPv6 简介 IPv6是英文“Internet Protocol version 6”(互联网协议第6版)的缩写,是互联网工程任务组(IETF)设计的用于替代IPv4的下一代IP协议,其地 ...
- HBase管理与监控——统计表行数
背景 HBase统计 RowCount 的方法有好几种,并且执行效率差别巨大,以下3种方法效率依次提高. 一.hbase-shell的count命令 这是最简单直接的操作,但是执行效率非常低,适用 ...
- 新式类__new__()方法
概述 __new__() 是在新式类中新出现的方法,在 Python 中类实例化时,__new__()方法用在 __init__() 启动之前,决定是否要使用该 __init__() 方法,因为__n ...
- elasticsearch备份脚本
1.主要文件 [root@k8s elasticsearch]# tree . ├── backup_es.sh ├── indices_file.txt ├── recover_es.sh └── ...
- 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 ...
- 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用
目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...
- 在UPW中使用VLC解码媒体
VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...
- luogu P1115 最大子段和 (dp)
链接: https://www.luogu.org/problemnew/show/P1115 题面: 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一 ...
- poj1797(dijstra变形,求最小边的最大值)
题目链接:https://vjudge.net/problem/POJ-1797 题意:n个点,m条带权边,求点1到点n的所有路径中最小边的最大值. 思路: 和poj2253一样,只不过那题n< ...