使用 phonegap create 命令可以创建一个应用程序的骨架或者叫模板,我们可以基于这个简单的应用去开发自己的应用程序。这个视频我们先来了解一下这个应用的模板。
打开应用项目所在的目录 …. www 这个目录里面就是创建的应用程序的主体内容, index.html 就是应用的主页 …. 我们可以使用文本编辑软件打开这个文件来看一下 …
这里我用的是 brackets … 所以可以打开整个目录 …. 在桌面上,打开 hello 下面的 www 这个目录 … 然后打开里面的 index.html …
这其实就是一个简单的 html 网页,用的是 html5 的文档规范 …
先看一下这两个特殊的 meta 标签 …
format-detection
这个 format-detection meta 标签,指定了 telephone=no … 比如在 iOS 设备上的 safari 浏览器,会检测页面上出现的可能是电话号码的数字 … 这样会生成一个链接,用户点击这个链接可以呼叫这个电话号码 …
不过有时候浏览器可能会把不是电话的数字转换成这个呼叫的链接 … 这个 meta 标签的作用就是关掉了浏览器的这个自动检测页面上电话号码的功能。
viewport
下面还有一个 viewport 可视窗口的这个 meta 标签,在 《 响应式网页设计 》这个课程里,我们详细的介绍了这个 viewport 标签 …
user-scalable=no 就是不让用户可以缩放页面,initial-scale=1 是设置页面的初始的缩放比例为 1 倍,也就是不去缩放页面,maximum-scale=1 设置要最大的缩放级别是 1,minimum-scale=1 设置的是最小的缩放级别也是1… width=device-width 设置了可视窗口的宽度等于设备的宽度。
height=device-height 的意思是把可视窗口的高度设置成跟设备的高度一样。
最后这个 target-densitydpi=device-dpi 很多浏览器已经不支持它了,所以,我们可以去掉它。
其它
在页头部分,链接了一个自定义的样式表 index.css,放在了 css 这个目录的下面。
底部
再看一下页面的底部,在这里,嵌入了 phonegap.js ,另外还有一个自定义的 js 文件,index.js ,我们可以把应用需要的 js 代码放在这个文件里面。
最后,执行 app.initialize(); … app 是在 index.js 里面定义的一个对象 …. initialize() 是 app 的一个函数,或者叫 method … 合起来的意思就是去执行 app 这个对象里的 initialize() 这个函数。
下面的视频里,我们再详细的看一下在 index.js 文件里定义的 app 对象。