转使用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

转载于:https://www.cnblogs.com/yaosy/p/6106881.html

转使用DCloud+Framework7制作移动APP应用相关推荐

使用DCloud+Framework7制作移动APP应用（一）
http://my.oschina.net/kenblog/blog/516201 转载于:https://www.cnblogs.com/NodeStudy/p/5223273.html
怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面发布时间:2020-12-02 17:09:10 来源:亿速云阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...
matlab app designer制作软件_gif制作软件app
gif制作软件app是一款功能全面的动图制作工具,支持视频.图片等多种gif制作格式,通过它,可以轻松快速将视频转.图片制作出你想要的GIF动态图片,变得与众不同,堪称是制作GIF表情包的神器.同时该 ...
利用HBuilderX制作手机APP应用程序之知识问答
HBuilderX的功能十分强大,利用它制作手机APP极其简单,步骤如下: 新建项目:5+app 开始编写想要的页面,以下gif图是我编写的一个手机知识问答应用程序
unity 制作的app发布到andriod手机
一,unity 制作一个简单的动画. 1.场景中添加一个立方体. 2.立方体上面添加一个胶囊形状,胶囊形状添加重力属性,运行的时候往下落. 3.制作完成,保存工程,名字为"t1". ...
如何在eclipse制作的APP中添加背景图
如何在eclipse制作的APP中添加背景图 1.首先把图片拉入drawable-hdpi中,a1.jpg(注:图片名不可为中文) 2.在.xml文件中加入android:background=&qu ...
Axure制作微信APP原型（三）：消息+个人模块----聊天、浮窗、登录设备、个人主页、更多信息
Axure制作微信APP原型(三) APP原型设计是产品经理需要做的工作之一,大家有这个方向和兴趣的可以自己下载一个Axure软件试一下. 可以用已有的APP模型参考设计学习以下,学学人家的界面是怎么 ...
如何从0开始在鸿蒙OS中制作一个APP！
点击"开发者技术前线",选择"星标????" 让一部分开发者看到未来作者:若离链接:https://www.zhihu.com/question/420404 ...
傻瓜式软件开发工具推荐!无需写代码,拼图式极速制作手机APP
因为从事互联网领域的工作,所以总会收到很多朋友的询问,表示想建立一个App,或创业,或是增长线上渠道,或者仅作为个人的一个小工具,小平台,但是又苦于不懂软件开发技术,咨询专业的外包公司,价格都太高,不 ...

转使用DCloud+Framework7制作移动APP应用

转使用DCloud+Framework7制作移动APP应用相关推荐

最新文章

热门文章

转 使用DCloud+Framework7制作移动APP应用

转 使用DCloud+Framework7制作移动APP应用相关推荐

最新文章

热门文章

转使用DCloud+Framework7制作移动APP应用

转使用DCloud+Framework7制作移动APP应用相关推荐