移动端网页在本地模拟线上测试的方法

​​首先声明,敲字母的皮皮虾也是本人在新浪微博的账号,并非转帖,绝对原创。因为比较喜欢这个地方,决定从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

移动端网页在本地模拟线上测试的方法_第1张图片

根据需要,去选择适合自己需要的版本,我的是win7 64位的系统,所以这里我需要的是最后一个,红箭头所指向的那个,所以我就下载它。

移动端网页在本地模拟线上测试的方法_第2张图片

下载完成后,点击运行,一步一步的确认就行了,安装完成后,配置环境变量:

这里我就不一一说明了,咱们的重点在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进入官网即可找到下载文件。安装文件没有什么技巧,一直点击下一步即可。

移动端网页在本地模拟线上测试的方法_第3张图片

移动端网页在本地模拟线上测试的方法_第4张图片

移动端网页在本地模拟线上测试的方法_第5张图片

同样安装时注意安装目录,因为一会儿要配置和java一样的环境变量。

同样打开环境变量的配置窗口,在系统环境变量一栏点击新建。

输入内容如下:

变量名:CATALINA_HOME

变量值:刚刚安装的路径

移动端网页在本地模拟线上测试的方法_第6张图片

在配置好后,再次检测Tomcat的环境是否安装正确,怎么检测呢:

找到Tomcat的安装路径,

找到你安装的Tomcat的文件夹,跟着下面的图片,还有图片上说明的文字,一步一步的操作就行了。

移动端网页在本地模拟线上测试的方法_第7张图片

移动端网页在本地模拟线上测试的方法_第8张图片

移动端网页在本地模拟线上测试的方法_第9张图片

移动端网页在本地模拟线上测试的方法_第10张图片

移动端网页在本地模拟线上测试的方法_第11张图片

这里是安装成功后,在浏览器上输入http://localhost:8080/这个地址进行测试,看是否安装成功,如果跟下图所示一样的话,就是成功了。

移动端网页在本地模拟线上测试的方法_第12张图片

好了,Tomcat也配置完成了,如果还有疑问的话,不妨多看几遍,慢慢研究研究,同时附上百度教程链接:

http://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html

既然装好环境了,接着怎么用它呢,看好了:

移动端网页在本地模拟线上测试的方法_第13张图片

移动端网页在本地模拟线上测试的方法_第14张图片

接着,用IDE打开这个文件,一定要是这个文件夹下的这个文件,我用的是HBuilder,就直接打开了。运行效果如图,注意这里的IP地址

移动端网页在本地模拟线上测试的方法_第15张图片

IP地址这里怎么获取呢:

Win+R —输入cmd,然后输入ipconfig命令,找到IPv4地址,复制它,然后替换掉上面那个IP地址。

移动端网页在本地模拟线上测试的方法_第16张图片

移动端网页在本地模拟线上测试的方法_第17张图片

剩下的就是怎么用手机浏览了,非常简单,笔记本自带WiFi发射功能,不知道怎么开启的话,直接用360免费WiFi,猎豹什么的各种免费WiFi软件开一个,然后让手机连入就行了,这样就能让手机和电脑在同一IP下访问了。

在手机上输入这个地址就能看到了。对了,差点忘了二维码,毕竟测试的话不能每次都要输入地址,这样太麻烦了,这时候有个二维码就能解决一切了,看到右上角的那个绿色的方框了吗,点击自动生成二维码,

附上链接,自己可以动手下载试试:http://cli.im/news/6527

移动端网页在本地模拟线上测试的方法_第18张图片

最终完成效果:

移动端网页在本地模拟线上测试的方法_第19张图片

​好吧,这次就分享到这里,至于在本地布服务器还有很多种,今天就说这一种吧,有什么不对的地方,希望浏览这篇文章的朋友指出,互相促进学习。

转载于:https://my.oschina.net/u/3482527/blog/1517792

你可能感兴趣的:(移动端网页在本地模拟线上测试的方法)