使用基於Vue.js和Hbuilder的混合模式移動開發打造屬於本身的移動app

時間  2019-11-11
標籤 使用 基於 vue.js vue hbuilder 混合 模式 移動 開發 打造 屬於 本身 app 欄目 JavaScript 简体版
原文   原文鏈接

    近幾年，混合模式移動應用的概念甚囂塵上，受到了一些中小型企業的青睞，究其緣由，混合模式開發能夠比傳統移動開發節約大量的開發成本和人力成本。css

    Hybrid App（混合模式移動應用）是指介於web-app、native-app這二者之間的app，兼具「Native App良好用戶交互體驗的優點」和「Web App跨平臺開發的優點」。html

    說白了，若是走傳統移動開發路線，公司業務覆蓋多端，那麼每一個平臺勢必要請一個專屬開發人員，安卓要請一個前端開發，ios同理，那麼人力成本則進行了翻倍，同時，若是多端使用不一樣的代碼，當有功能上的修改或者維護時，成本也是不可想象的。試想若是開發者編寫一套代碼，可編譯到iOS、Android、H五、小程序等多個平臺，這絕對是省時省力的良好方案。前端

    本文介紹若是使用vue.js編寫基於h5的適配多端的前端代碼，打包後，利用hbuilder打包成安卓客戶端安裝包apk，從而達到一套代碼適配多個平臺的功能。vue

 

    首先，安裝完整版的vue-cli，以前爲了快速開發使用simple版，實際上若是作移動開發，要使用完整版的vue-cliwebpack

 

安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完整版 vue.js
cnpm install -g vue-cli
cnpm cache clean --force
創建項目
vue init webpack myvue
進入項目 熱啓動
cd myvue
cnpm run dev

  建好項目以後，如何將頁面進行響應式設計開發（就是適配多個屏幕）呢？咱們須要利用bootstrap框架來幫咱們適配大小屏幕，這裏引入bootstrap的外部css，修改入口文件main.js，加入下面代碼ios

 

require('!style-loader!css-loader!./assets/assets_2/main.css');

若是報錯說明沒有安裝依賴庫，安裝一下git

 

cnpm install  style-loader --save

而後新建一個首頁路由index.vue,添加下面的代碼web

 

<template>
  <div>

       <header class="">
             <div class="navbar navbar-default visible-xs">
               <button type="button" class="navbar-toggle collapsed">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </button>
               <a href="/" class="navbar-brand">極速視頻網絡平臺</a>
             </div>
           
             <nav class="sidebar">
               <div class="navbar-collapse" id="navbar-collapse">
                 <div class="site-header hidden-xs">
                     <a class="site-brand" href="./index.html" title="">
                       <img class="img-responsive site-logo" alt="" src="../assets/assets_2/images/mashup-logo.svg">
                       極速視頻網絡平臺
                     </a>
                   <p>
                     視頻分類
           
                   </p>
                 </div>
                 <ul class="nav">
                   <li><a href="./index.html" title="">首頁</a></li>
                   <li><a href="./about.html" title="">視頻詳情頁</a></li>
                   <li><a href="./services.html" title="">Services</a></li>
                   <li><a href="./contact.html" title="">Contact</a></li>
                   <li><a href="./components.html" title="">Components</a></li>
           
                 </ul>
           
                 <nav class="nav-footer">
                   <p class="nav-footer-social-buttons">
                     <a class="fa-icon" href="https://www.instagram.com/" title="">
                       <i class="fa fa-instagram"></i>
                     </a>
                     <a class="fa-icon" href="#" title="">
                       <i class="fa fa-dribbble"></i>
                     </a>
                     <a class="fa-icon" href="#" title="">
                       <i class="fa fa-twitter"></i>
                     </a>
                   </p>
                 </nav>  
               </div> 
             </nav>
             </nav>
           </header>

    <main class="" id="main-collapse">

    <div class="hero-full-wrapper">
       <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid">
       <div class="gutter-sizer"></div>
         <div class="grid-sizer"></div>
         
         <div v-masonry-tile class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-12.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>視頻標題</h3>
                 <p>視頻簡介</p>
               </div>
             </div>
           </a>
         </div>
     
         
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-05.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
        
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-13.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-04.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
         
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-07.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
     
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-11.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
     
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-10.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-03.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
     
     
         
       </div>
     </div>
    </main>

    

  

  </div>
</template>


 
<script>

export default {
  data () {
    return {
      msg: "這是一個變量",
      dataList:[],
      clicked:0,
      upath: '',
    result: '',
    uping:0
    }
  },
  mounted:function(){
  

},
  methods:{
      changetest(index){
          this.clicked = index;
      }
  }
}


</script>
 
<style>



</style>

 

此時，發現樣式已經生效了，可是咱們想讓首頁使用瀑布式的佈局，也就是快手和抖音經常使用的那種首屏流動式佈局，因此須要安裝vue-masonry，這個vue.js組件能夠很方便的將佈局改形成瀑布式的。vue-cli

安裝庫npm

cnpm install vue-masonry --save

而後在入口文件進行引入和聲明

 

import {VueMasonryPlugin} from 'vue-masonry';

Vue.use(VueMasonryPlugin)

最後，針對模板文件進行改造就能夠了

 

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

 

而後咱們對項目進行打包，在打包以前，修改config目錄下的index.js,將build中的assetsPublicPath屬性改爲相對路徑：assetsPublicPath: './',另外若是你的路由模式使用的history，請改成hash，或者使用默認模式，由於移動app不支持history模式，最後打包項目

 

cnpm run build

vue.js將會包項目直接打包在dist文件夾中，這時，下載hbuilder安裝包 http://www.dcloud.io/hbuilderx.html，要下載app開發版，將dist直接拖動到hbuilder開發界面中，而後右鍵轉換爲移動app

 

這時系統會幫你建立一個配置文件manifest.json，轉換完畢以後，點擊index.html,選擇運行，瀏覽器運行，進行測試

 

 

若是是空白頁面就要修改vue.js中的配置文件，看看有沒有改爲相對路徑，測試沒問題以後進行打包，選擇dist文件目錄，右鍵生成發行原生項目

 

打包成功後，就能夠下載apk安裝包在手機中安裝使用了。

 

 

 

其效果和安卓原生系統徹底沒有差異，一套代碼，完美適配pc端和移動端，就是這麼簡單，最後奉上完整代碼倉庫地址：https://gitee.com/QiHanXiBei/vue_app

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程