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

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

  1. pc端网页唤起本地的咚咚和千牛

    前段时间接手了一个需求,需求大概就是pc端的产品需要做一个点击按钮唤起咚咚和千牛,并且需要打开对应的顾客聊天窗口. 当时接到这个需求人都不好了,大牛们都没接触过这个需求,不知道咚咚和千牛的协议,去看淘 ...

  2. 信息必填的php,php - {“成功”:0,“消息”:“必填字段丢失”}在本地主机上测试文件 - 堆栈内存溢出...

    我以某种方式理解了问题,但我不知道如何解决 我的脚本有效,但我不知道它是否与数据库连接 我的脚本已连接到android应用,并且某个地方连接断开,即使我在数据库中手动添加用户,也无法从应用中唱歌/唱歌 ...

  3. kindeditor java 上传图片_java中KindEditor本地图片上传与上传失败问题

    此代码是最新版的 KindEditor 3.5.x 实现本地图片上传的方法,用于oschina即将改版的个人空间 KindEditor 要求的JSON格式如下: {"error": ...

  4. php判断电脑浏览器模拟手机访问网页,在PC上测试移动端网站和模拟手机浏览器的5大方法...

    查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...

  5. ElementUI h5 移动端照片拍照 本地预览 旋转压缩 并上传

    文章目录 调用摄像头拍照 本地预览 旋转压缩 上传 功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果. 调用摄像头拍照 在h5中,使用input type="file ...

  6. PC端和移动端网页特效,fastclick插件,Swiper插件,Bootstrap等框架,本地存储

    目录 PC 端网页特效 元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜 元素可视 ...

  7. 网页打开本地服务器地址,本地网页上传服务器地址

    本地网页上传服务器地址 内容精选 换一换 网关创建成功以后,用户需初始化网关,建立本地网关到CSG管理控制台的连接.本章节详细介绍了如何初始化网关,为用户快速了解CSG网关初始化配置提供指导.已在本地 ...

  8. 用户 'IIS APPPOOL\**' 登录失败的解决方案(项目部署到本地IIS上打开网页出现报错)...

    为开发方便-将项目部署到本地IIS上打开网页出现报错 1.打开IIS管理 2.点击应用池 3.找到你部署的网站名,右键"高级设置"-->"进程模型"--& ...

  9. PC上测试移动端网站和模拟手机浏览器

    1. PC上测试移动端网站和模拟手机浏览器 1) PC上测试移动端网站和模拟手机浏览器的5种方法 http://www.jb51.net/softjc/144941.html 2)  结论 使用场景: ...

最新文章

  1. r语言 编辑 d3.js_d3.js的语言介绍
  2. 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
  3. Java 条件运算符
  4. python 时间序列预测 币价_python时间序列预测股票走势
  5. 利用Python只需3行代码即可生成验证码
  6. VRRP和HSRP在企业网中的应用
  7. javascript判断日期奇偶_js中判断奇数或偶数
  8. OSChina 周日乱弹 —— 在宅的路上越走越远。。。
  9. noip2010乌龟棋解题报告
  10. 贺利坚老师汇编课程57笔记:CMP和JXXX配合实现条件转移指令if
  11. 关于shell读取文件打印时展开通配符
  12. 通过企业微信服务端API接口进行群发应用消息
  13. Linux之zip命令
  14. Mysql基础增删改查语句
  15. BZOJ 1260涂色 paint
  16. 学习日志2:ARM开发板—触摸屏
  17. 通过函数seaborn.cubehelix_palette生成顺序调色板
  18. 金田新材冲刺上交所:拟募资15.6亿 方文彬家族控制62%股权
  19. 微型计算机48MHz辐射超,EMI辐射测试超标 求高手指点
  20. win10系统如何看服务器地址,win10查看电脑DNS服务器地址具体步骤

热门文章

  1. error cb() never called!
  2. 18款人像精修PS插件,让你从小白变大触
  3. 显示器 Linux 性能 18 (一个命令行工具传递)
  4. 【Unity3D】法线贴图和凹凸映射
  5. UCF Local Programming Contest Round 1A记录
  6. 微信mac版撤回消息拦截
  7. uni-app打包之云打包与本地打包
  8. 地图行业国家标准汇总
  9. 到底什么是“自智网络”?
  10. 基于OpenCV的图片透视矫正及处理