参考:http://www.browsersync.cn/#install 首先全局安装BrowserSync : npm install -g browser-sync 其次在项目文件夹下运行: browser-sync start --server --files "css/*.css, *.html" 用以监听css和html文件,该文件夹下最好有index命名的html文件 运行完成后会跳出如下页面: 我的url是我自己已经设置好了的,显示的是电脑ip,地址栏默认其实是显示lo…

用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤. 1:打开cmd,命令行运行 ipconfig,得到本机的ip地址: 2:得到ipv4值, 用该值替换localhost 例如 localhost:8080 替换成 192.168.1.101:8080 3:找到config文件夹下的index.js文件,打开后,将host的值改为我本地…

vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 三:将地址复制,使用二维码转换工具(草料二维码)生成二维码后,使用手机扫描,就可以查看了. 注意:扫描后浏览器会有一个提示信息,点击访问原网页就行了 后续更新: 2017/12/20更新,新版vue-cli,部分手机浏览器访问白屏: 将config/index.js  的devtool: 'eval…

Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itself! No need to go back to the project and do any tests to track the problems! 使用此工具,不管在手机或者Unity Editor中,你都可以很容易地检查/查看游戏输出的日志,而不需要回到项目和做任何测试跟踪问题!(开源免费)…

Logs Viewer 功能描述 Using this tool you can easily check your editor console logs inside the game itself! No need to go back to the project and do any tests to track the problems! 使用此工具,不管在手机或者Unity Editor中,你都可以很容易地检查/查看游戏输出的日志,而不需要回到项目和做任何测试跟踪问题!(开源免费)…

(一).在H5页面中,可以直接利用如下的方法来进行判断是安卓还是ios. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 (二).同时,判断中利用如下两种方法,实现从H5分别跳转到安卓的原生页面及ios的原生页面. window.locat…

前言 本文介绍在Winform桌面应用中,使用IISExpress做Host主机,启动.Net平台的Web项目. 浏览Web网页使用CEF开源组件. 准备 首先创建Winform项目WinFormIISExpressHost. 然后把IISExpress文件夹放到项目的Bin\Debug下. 寻找IISExpress 寻找IISExpress很简单,如果本机安装了VS,那么可以直接在C:\Program Files\IIS Express下找到. 当然,也可以上官网下载安装,然后到安装目录找II…

在 从 百度应用 下载“SQLite编辑器(SQLite Editor)” 安装到手机上.前体是 手机已经Root(可以用360一键Root软件进行root).…

网上抄来了,自己也备忘下:增加<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=device-dpi"> 参数说明: target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi…

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yGQt3GBeFuzNIG9OlnOZ3u4A5H3WcSe5"> </script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/con…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js  我使用的github 项目要点赞(现在要养成习惯) 使用:在vue的一个组件里使用这个 插件. 接下来我们看这个插件提供的api,灵…

原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5…

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目…

前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到webview模式,才能操作H5页面,但是如果测试手机网页的话就比较简单了,设置好浏览器比如选择Chrome,直接访问网址就好了. APP内嵌H5: 如何判断APP里面是否有H5呢, 使用uiautomaterview的时候发现页面元素含有webview,这就说明这个APP是混合应用,那么如何测试这个AP…

前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家. H5页面介绍 1. H5页面H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现.所以 Web 的通用测试点和方法基本都可以适用于它.H5其实就是:移动端Web页面.H5应用在很多地方,如APP的活动专题页面.新闻页面.微信公众号…

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果…

调试web页面难 接触过app自动化的同学都比较清楚,如果想要对web应用或者Hybrid应用进行调试时(获取页面元素信息等等),必定绕不开的就是chrome浏览器的inspect功能了:在chrome浏览器URL中输入chrome://inspect即可对移动设备中的web页面进行调试.方便是方便,但是碰到的坑数不胜数: 点击inspect发现加载的是空白页面 点击inspect出来的是http 404 相信大家碰到这种问题第一时间就是百度去找到解决方案:chrome使用inspect需要下载…

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:…

[原创]浅谈H5页面测试介绍 目前移动互联网非常火热,除了各种App,H5也是非常热,由于H5跨平台,且版本更新容易,做为引流或获客是非常好的一种简单低成本平台:今天来谈谈H5页面测试都要测试什么? 闲话少说,H5页面测试看到这个大家就会联系到Web页面测试,其中二者有相同之处,也有不同之处,但是总体测试策略是大体相同,且听我一一道来,先说说我现在公司对H5测试我们重点测试什么,主要有以下几类: 1.功能测试:主要是各系统功能点实现,与之交互的逻辑处理是否合理,如:登录就需要考虑H5与App之间…

很简洁的一个方法: 1.安装nodeJS环境 2.在当前所在项目文件夹下输入命令: npm install anywhere -g3.输入命令: anywhere,即可在浏览器以本机ip地址为域名,自动打开该项目所有的根目录 此时,直接将该地址在手机浏览器打开,即可在手机上预览页面效果--------------------- 作者:陌盍 来源:CSDN 原文:https://blog.csdn.net/weixin_39003573/article/details/82990554 版权声明:…

如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

背景 最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了. 这可把我急坏了,不知道有没有小伙伴有和我一样的困扰,我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错…

最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function () {//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法 window.addEventListener("resize", function () {if (document.activeElement.tagName == "INPUT" || docu…

首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了. 测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩. 你怀疑是APP的问题,但是客户端死活不承认.你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题.于是测…

最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结果经过各种测试,发现不是IIS的问题,继续找错,又以为是标签使用不当,然后当时利用html4的object 和embd标签代替,embd标签能播放声音,但是却有许多bug,总之各种舒服. 于是,经过多方询问,以及百度,最后才知道,原来是手机上的浏览器对音频.视频的自动播放功能在去年的九月底就已经屏蔽…

获取pkgname(安卓软件包名) 1. 先下载pkgName安装文件(pkgName.apk )并在手机上安装2. 打开刚刚安装的pkgName软件,软件会自动生成你手机上软件的包名列表,同时会在手机的根目录生成txt格式的文件pkgName.txt3. 然后打开文档管理,在根目录就找到刚刚生成的pkgName.txt文件,里面就是你要获得的包名了. 本帖隐藏的内容 点这里下载  pkgName.apk…

由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果在web端测试H5页面既能覆盖绝大部分的UI功能,又能省时省力,快速落地:十分吻合项目需求. 下面就来介绍下查违章系统H5页面如何在web实现UI自动化功能的: 1.下载对应的library: pip install robotframework-selenium2library 2.Chrome浏…