原文轉載自「劉悅的技術博客」https://v3u.cn/a_id_82
近幾年,混合模式移動應用的概念甚囂塵上,受到了一些中小型企業的青睞,究其原因,混合模式開發可以比傳統移動開發節約大量的開發成本和人力成本。
Hybrid App(混合模式移動應用)是指介於web-app、native-app這兩者之間的app,兼具“Native App良好用戶交互體驗的優勢”和“Web App跨平臺開發的優勢”。
說白了,如果走傳統移動開發路線,公司業務覆蓋多端,那麼每個平臺勢必要請一個專屬開發人員,安卓要請一個前端開發,ios同理,那麼人力成本則進行了翻倍,同時,如果多端使用不同的代碼,當有功能上的修改或者維護時,成本也是不可想象的。試想如果開發者編寫一套代碼,可編譯到iOS、Android、H5、小程序等多個平臺,這絕對是省時省力的良好方案。
本文介紹如果使用vue.js編寫基於h5的適配多端的前端代碼,打包後,利用hbuilder打包成安卓客戶端安裝包apk,從而達到一套代碼適配多個平臺的功能。
首先,安裝完整版的vue-cli,之前爲了快速開發使用simple版,實際上如果做移動開發,要使用完整版的vue-cli
安裝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,加入下面代碼
require('!style-loader!css-loader!./assets/assets_2/main.css');
如果報錯說明沒有安裝依賴庫,安裝一下
cnpm install style-loader --save
然後新建一個首頁路由index.vue,添加下面的代碼
<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組件可以很方便的將佈局改造成瀑布式的。
安裝庫
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
原文轉載自「劉悅的技術博客」 https://v3u.cn/a_id_82