《HTML5移动Web开发实战》—— 1.5 配置移动开发环境

简介:

本节书摘来异步社区《HTML5移动Web开发实战》一书中的第1章,第1.5节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 配置移动开发环境

HTML5移动Web开发实战
适用浏览器:所有

在开始移动网站开发之前,我们必须首先配置好开发环境。

1.5.1 准备
1.配置本地网站服务。对于Windows、Mac和Linux,最容易的方法是使用免费的XAMPP软件:

http://www.apachefriends.org/en/index.html

2.确认你有无线网络。

3.同时你需要一个移动设备,或者是移动设备的仿真器、模拟器。

4.确保你的移动设备和电脑在同一无线网络中。

1.5.2 实践

1.在你的本地服务器根目录中创建一个HTML文件并命名为ch01e1.html,在其中输入如下代码:

07a98bf188a0d12e082492b7e0a8b9647284ee28

2.获取你的IP地址。如果你使用的是Windows,你可以在命令行中输入如下命令:

90b9be23009a849276ef3f34013b14ec76dd2eed

3.当你获取到你的IP地址(如192.168.1.16),把它输入到移动浏览器的URL地址栏,然后你就可以看见页面加载成功并且显示图1-3所示的文字。

70d21086ace250eb503f063c1e14cc6a9bc56bf8

1.5.3 回顾

在同一个局域网中,你的移动设备可以通过IP地址访问以桌面电脑作为主机的服务器。

1.5.4 延伸

如果你没有移动设备,你可以使用某个仿真器来测试,但建议至少有一两个真实设备来测试。仿真器可以测试到大部分的情况,但不是所有的。

使用桌面版Safari测试
如果你的主要用户使用iPhone和移动版Safari,在桌面电脑上测试可以节约很多时间:打开Safari,在偏好设置中单击高级栏打开,在菜单栏中显示“开发”菜单,如图1-4所示。

6891f3f509229139e3cce838afbf149b65b9df86

在本页面中选择开发 | 用户代理 | Mobile Safari 3.1.3 – iPhone:

社区搜集的仿真器、模拟器
如果你没有智能手机,也可以使用很多仿真器、模拟器,你可以在Mobile Boilerplate项目的wiki页面找到:

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators

Fritman搜集的仿真器、模拟器
Maximiliano Firtman,一个移动网站开发人员和作家,他维护了一个仿真器列表:

相关文章
|
2月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
50 4
|
4月前
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
|
4月前
|
JSON 前端开发 JavaScript
|
1月前
|
JavaScript 前端开发 开发工具
web项目规范配置(husky、eslint、lint-staged、commit)
通过上述配置,可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用,使得每次提交代码之前都会自动检查代码风格和语法问题,防止不符合规范的代码进入代码库。这不仅提高了代码质量,还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。
36 5
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
3月前
|
监控 Apache
HAProxy的高级配置选项-Web服务器状态监测
这篇文章介绍了HAProxy的高级配置选项,特别是如何进行Web服务器状态监测,包括基于四层传输端口监测、基于指定URI监测和基于指定URI的request请求头部内容监测三种方式,并通过实战案例展示了配置过程和效果。
94 8
HAProxy的高级配置选项-Web服务器状态监测
|
2月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
151 0
|
2月前
|
NoSQL Java 数据库连接
springBoot:整合其他框架&condition&切换web配置 (五)
本文档介绍了如何在Spring Boot项目中整合JUnit、Redis和MyBatis等框架,并提供了相应的依赖配置示例。同时,还展示了如何通过条件注解实现Bean的条件创建,以及如何切换Web服务器配置,从默认的Tomcat切换到Jetty。
|
4月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4月前
|
Ubuntu 应用服务中间件 Linux
在Linux中,如何配置Web服务器(如Apache或Nginx)?
在Linux中,如何配置Web服务器(如Apache或Nginx)?