使用基于Vue.js和Hbuilder的混合模式移动开发打造移动app

简介: 使用基于Vue.js和Hbuilder的混合模式移动开发打造移动app

近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本。

   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安装包 HBuilderX-高效极客技巧,要下载app开发版,将dist直接拖动到hbuilder开发界面中,然后右键转换为移动app

这时系统会帮你创建一个配置文件manifest.json,转换完毕之后,点击index.html,选择运行,浏览器运行,进行测试

如果是空白页面就要修改vue.js中的配置文件,看看有没有改成相对路径,测试没问题之后进行打包,选择dist文件目录,右键生成发行原生项目

打包成功后,就可以下载apk安装包在手机中安装使用了。

其效果和安卓原生系统完全没有差别,一套代码,完美适配pc端和移动端,就是这么简单,最后奉上完整代码仓库地址:vue_app: 混合开发app

目录
相关文章
|
19天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
379 1
|
30天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2月前
|
监控 JavaScript 前端开发
深入理解 Nuxt.js 中的 app:error 钩子
【9月更文挑战第25天】在 Nuxt.js 中,`app:error` 钩子是一个强大的工具,用于处理应用程序中的各种错误。它可以在服务器端渲染或客户端运行时触发,帮助提升应用稳定性和用户体验。通过在 `nuxt.config.js` 中定义该钩子,开发者可以实现错误页面显示、错误日志记录及错误恢复等功能,确保应用在遇到问题时能妥善处理并恢复正常运行。
46 10
|
3月前
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
|
3月前
|
资源调度 JavaScript Linux
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
|
24天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
30 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
11天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
20天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
47 9
|
27天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
30天前
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!