移动端网页在本地模拟线上测试的方法
首先声明,敲字母的皮皮虾也是本人在新浪微博的账号,并非转帖,绝对原创。因为比较喜欢这个地方,决定从XL那边搬家过来了,哈哈哈哈哈哈!下面开始正题。
之前一个朋友问我一些关于移动端怎么做的问题,掰扯了一会儿后,她又问了一个问题,就是做好的移动端网页怎么测试,所以我就想到了这次要分享的东西了。
关于怎么看这个页面,其实有很多种方法,最省劲儿的就是浏览器F12,移动端模拟器这个玩意儿,能满足大部分需求,并且还能调整不同的手机型号,方便开发。不过缺点就是毕竟这是模拟的呀,跟实体机还是有差距的,好多做过的朋友都是在PC上调好的页面以及功能,但是一上线测试就完蛋了,各种问题,所以说这次分享的就是在本地配置服务器模拟线上环境,让手机扫描二维码进行访问。(我这次分享用的都是最新的,并不是网上已经存在了两三年的教程了,我也是中老教程的坑,一个一个爬出来的,所以想让各位朋友少爬点坑,才弄得这个。)
所需工具:笔记本电脑一台(台式机的话需要有无线网卡,因为需要访问同一个IP),配置Java环境变量所需的JDK文件,Tomcat 8.0,二维码生成器
提到本地服务器的话,大家都会想到Apache啦,Appserv啦,WAMP什么的,这次分享的是另一款软件,Tomcat,这个也是比较好用的集成环境。下面开始一步一步配置吧,
第一步:首先配置好Java环境变量,
下载和安装JDK文件:
官网链接:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html
根据需要,去选择适合自己需要的版本,我的是win7 64位的系统,所以这里我需要的是最后一个,红箭头所指向的那个,所以我就下载它。
下载完成后,点击运行,一步一步的确认就行了,安装完成后,配置环境变量:
这里我就不一一说明了,咱们的重点在Tomcat那里,在此附上百度经验链接,跟着做就行了
http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html
http://jingyan.baidu.com/article/e75aca85508d15142edac6b8.html
这里要注意的有几点:1,不要乱动原本的path值,要是没了的话,会很麻烦的。
2,每添加path变量里面的值的时候,后面加上“ ; ”这个符号,这个表示隔断,不会影响到别的。(楼主亲测,血的教训)。3,配置完成后别忘了检测一下是否安装成功,
检测方法,看这里:
http://jingyan.baidu.com/article/09ea3ede0304eec0afde3964.html
如果以上东西都做好了,检测也没问题,那就进行下一步吧。
下面就要开始弄Tomcat了:
下载Tomcat文件,文件是一个exe的安装文件,下载后直接安装即可。
下载地址在百度输入Tomcat进入官网即可找到下载文件。安装文件没有什么技巧,一直点击下一步即可。
同样安装时注意安装目录,因为一会儿要配置和java一样的环境变量。
同样打开环境变量的配置窗口,在系统环境变量一栏点击新建。
输入内容如下:
变量名:CATALINA_HOME
变量值:刚刚安装的路径
在配置好后,再次检测Tomcat的环境是否安装正确,怎么检测呢:
找到Tomcat的安装路径,
找到你安装的Tomcat的文件夹,跟着下面的图片,还有图片上说明的文字,一步一步的操作就行了。
这里是安装成功后,在浏览器上输入http://localhost:8080/这个地址进行测试,看是否安装成功,如果跟下图所示一样的话,就是成功了。
好了,Tomcat也配置完成了,如果还有疑问的话,不妨多看几遍,慢慢研究研究,同时附上百度教程链接:
http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html
既然装好环境了,接着怎么用它呢,看好了:
接着,用IDE打开这个文件,一定要是这个文件夹下的这个文件,我用的是HBuilder,就直接打开了。运行效果如图,注意这里的IP地址
IP地址这里怎么获取呢:
Win+R —输入cmd,然后输入ipconfig命令,找到IPv4地址,复制它,然后替换掉上面那个IP地址。
剩下的就是怎么用手机浏览了,非常简单,笔记本自带WiFi发射功能,不知道怎么开启的话,直接用360免费WiFi,猎豹什么的各种免费WiFi软件开一个,然后让手机连入就行了,这样就能让手机和电脑在同一IP下访问了。
在手机上输入这个地址就能看到了。对了,差点忘了二维码,毕竟测试的话不能每次都要输入地址,这样太麻烦了,这时候有个二维码就能解决一切了,看到右上角的那个绿色的方框了吗,点击自动生成二维码,
附上链接,自己可以动手下载试试:http://cli.im/news/6527
最终完成效果:
好吧,这次就分享到这里,至于在本地布服务器还有很多种,今天就说这一种吧,有什么不对的地方,希望浏览这篇文章的朋友指出,互相促进学习。
转载于:https://my.oschina.net/u/3482527/blog/1517792
移动端网页在本地模拟线上测试的方法相关推荐
- pc端网页唤起本地的咚咚和千牛
前段时间接手了一个需求,需求大概就是pc端的产品需要做一个点击按钮唤起咚咚和千牛,并且需要打开对应的顾客聊天窗口. 当时接到这个需求人都不好了,大牛们都没接触过这个需求,不知道咚咚和千牛的协议,去看淘 ...
- 信息必填的php,php - {“成功”:0,“消息”:“必填字段丢失”}在本地主机上测试文件 - 堆栈内存溢出...
我以某种方式理解了问题,但我不知道如何解决 我的脚本有效,但我不知道它是否与数据库连接 我的脚本已连接到android应用,并且某个地方连接断开,即使我在数据库中手动添加用户,也无法从应用中唱歌/唱歌 ...
- kindeditor java 上传图片_java中KindEditor本地图片上传与上传失败问题
此代码是最新版的 KindEditor 3.5.x 实现本地图片上传的方法,用于oschina即将改版的个人空间 KindEditor 要求的JSON格式如下: {"error": ...
- php判断电脑浏览器模拟手机访问网页,在PC上测试移动端网站和模拟手机浏览器的5大方法...
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
- ElementUI h5 移动端照片拍照 本地预览 旋转压缩 并上传
文章目录 调用摄像头拍照 本地预览 旋转压缩 上传 功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果. 调用摄像头拍照 在h5中,使用input type="file ...
- PC端和移动端网页特效,fastclick插件,Swiper插件,Bootstrap等框架,本地存储
目录 PC 端网页特效 元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜 元素可视 ...
- 网页打开本地服务器地址,本地网页上传服务器地址
本地网页上传服务器地址 内容精选 换一换 网关创建成功以后,用户需初始化网关,建立本地网关到CSG管理控制台的连接.本章节详细介绍了如何初始化网关,为用户快速了解CSG网关初始化配置提供指导.已在本地 ...
- 用户 'IIS APPPOOL\**' 登录失败的解决方案(项目部署到本地IIS上打开网页出现报错)...
为开发方便-将项目部署到本地IIS上打开网页出现报错 1.打开IIS管理 2.点击应用池 3.找到你部署的网站名,右键"高级设置"-->"进程模型"--& ...
- PC上测试移动端网站和模拟手机浏览器
1. PC上测试移动端网站和模拟手机浏览器 1) PC上测试移动端网站和模拟手机浏览器的5种方法 http://www.jb51.net/softjc/144941.html 2) 结论 使用场景: ...
最新文章
- r语言 编辑 d3.js_d3.js的语言介绍
- 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
- Java 条件运算符
- python 时间序列预测 币价_python时间序列预测股票走势
- 利用Python只需3行代码即可生成验证码
- VRRP和HSRP在企业网中的应用
- javascript判断日期奇偶_js中判断奇数或偶数
- OSChina 周日乱弹 —— 在宅的路上越走越远。。。
- noip2010乌龟棋解题报告
- 贺利坚老师汇编课程57笔记:CMP和JXXX配合实现条件转移指令if
- 关于shell读取文件打印时展开通配符
- 通过企业微信服务端API接口进行群发应用消息
- Linux之zip命令
- Mysql基础增删改查语句
- BZOJ 1260涂色 paint
- 学习日志2:ARM开发板—触摸屏
- 通过函数seaborn.cubehelix_palette生成顺序调色板
- 金田新材冲刺上交所:拟募资15.6亿 方文彬家族控制62%股权
- 微型计算机48MHz辐射超,EMI辐射测试超标 求高手指点
- win10系统如何看服务器地址,win10查看电脑DNS服务器地址具体步骤