首页 > 代码库 > 转 使用DCloud+Framework7制作移动APP应用
转 使用DCloud+Framework7制作移动APP应用
现在使用Html+Css+Js制作移动应用是越来越火,所以在此记录下我个人使用DCloud+Framework7进行移动APP开发过程,方便以后查阅。
一、准备:
环境:Win7 64位
开发工具:HBuilder(下载地址:http://www.dcloud.io/ )
设计到的原型工具:
DCloud(地址:http://www.html5plus.org/doc/zh_cn/accelerometer.html )
Framework7(中文地址:http://framework7.taobao.org 英文地址:http://www.idangero.us/framework7 )
二、进行开发:
1、打开HBuilder,建议一个HelloWorld的空模板移动应用
2、下载Framwork7,解压,将dist文件夹拷贝到项目中,并重命名为Framework7,然后我们的项目文件大概为这样:
注:一下操作流程大多数是对Framework7的使用,可以参考(http://framework7.taobao.org/get-started)
3、修改你的index.html文件,编写你的主文件,代码如下:(这段代码来自于Framework7的基本IOS样式,进行了简单文字修改)
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Your app title -->
<title>Hello World</title>
<!-- Path to Framework7 Library CSS, iOS Theme -->
<link rel="stylesheet" href="Framework7/css/framework7.ios.min.css">
<!-- Path to Framework7 color related styles, iOS Theme -->
<link rel="stylesheet" href="Framework7/css/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div