现在使用Html+Css+Js制作移动应用是越来越火，所以在此记录下我个人使用DCloud+Framework7进行移动APP开发过程，方便以后查阅。

一、准备：

环境：Win7 64位

开发工具：HBuilder（下载地址：  ） 

设计到的原型工具：

DCloud（地址：   ）  

Framework7（中文地址：http://framework7.taobao.org       英文地址：  ）

二、进行开发：

1、打开HBuilder，建议一个HelloWorld的空模板移动应用

2、下载Framwork7，解压，将dist文件夹拷贝到项目中，并重命名为Framework7，然后我们的项目文件大概为这样：

注：一下操作流程大多数是对Framework7的使用，可以参考（http://framework7.taobao.org/get-started）

3、修改你的index.html文件，编写你的主文件，代码如下：（这段代码来自于Framework7的，进行了简单文字修改）

      
        
    
         
     
          
      
           
       
            
            
            
            
        
             
             
         
              
              
          
                   
               
           
                
                
            
                   
                   
             
                      
                      
              
                         
               
                            
                            
                
                 Hello World                          
                         
                 
                            
                            
                  
                               
                               
                   
                                  
                    
这是首页，你可以在打开的时候就看到我了
              
                                  
                    
                     关于我                                      
                             
                     
                                
                      
                                   
                                   
                       
                        链接1            
                        
                         链接2                                
                             
                         
                              
                              
                          
                             
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

你也需要添加必须要的css/my-app.css和js/my-app.js文件

4、在index.html上右键--》运行--》web应用程序进行调试（或者点击编辑器上面的运行调试，或者使用真机调试都可以，这里不一 一 讲解），效果如下：

5、大概有个效果样子了，现在我们来添加一个新页面功能：关于我

①编辑js/my-app.js文件

// 初始化APPvar myApp = new Framework7();// If we need to use custom DOM library, let's save it to $$ variable:var $$ = Framework7.$;// Add viewvar mainView = myApp.addView('.view-main', {  // Because we want to use dynamic navbar, we need to enable it for this view:  dynamicNavbar: true});

②、在根目录添加一个about.html的页面

    
    
    
       
     
          
      
             
       
                
        
                 
         返回              
         
          关于我    
          
                 
           
            
                   
             
                
              
                   
               
                      
                
                         
                 
关于我
        
                 
这是Hello World项目的一个关于我的页面，你是通过首页的关于我链接打开的。
        
                 
这个项目是一个基础演示项目，使用DCloud+Framework7进行开发。
            
                
               
              
             
            
           
          
         
        
       
      
     
    

③、给我们的about页面添加一个必要的ajax引导，编辑my-app.js，增加如下内容：

$$(document).on('pageInit', '.page[data-page="about"]', function(e) {    //这里你可以做很多事情});

④、修改我们的index.html文件，在需要点击打开关于我们的页面添加链接：

    
                   
     
这是首页，你可以在打开的时候就看到我了
              
                   
     
      关于我            
     
    

⑤、像第4步一样运行一下，点击“关于我”就可以得出如下效果：

6、一个演示APP基础制作就完成了，可是现在还不是APP，想要弄到安卓（或者IOS）上面运行，就需要进行打包

PS：真机测试就像使用APP样，如果只是简单学习，可以真机演示

下面进行打包：

①、点击HBuilder编辑器上面的  运行--》打包APP，根据你的机型进行打包

②、打包完成后会生成一个APP，将APP拷贝到你的手机中进行安装即可

7、这样，一个简单的APP就制作完成了

三、附件

1、演示代码没有进行GIT托管，请通过http://pan.baidu.com/s/1ukwV0下载

2、如果要进行更加丰富的APP开发，你需要学习Framework7和Dcloud的Html5+，官方网站都有丰富的文档，认真阅读，开发一个普通APP不是问题。

3、Framework的替代产品：mui、jquery mobile、其他UI框架等

4、DCloud的替代产品：APICloud，PhoneGap，AppCan等

5、APP演示：

电影APP：

四、写在最后

不知道未来的Html+Js会是什么样子，希望会更好。

如果文章中有任何BUG或者问题可以提出交流，非常谢谢！