前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓、iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚,只说下我们这个个项目的开发流程,记录过程中遇到的比较大的问题。

1、创建vue项目,具体流程可参考下图(基于mac):

2、开发完毕后对vue项目进行编译,编译之前需要对配置进行一些更改,在目录config下,找到index.js文件,把assetsPublicPath:'/',修改为:assetsPublicPath:'./',

经过测试发现不修改可能会造成资源文件找不到的问题,另外需要注意的是,图片资源不要放到文件static目录下,否则同样会造成资源文件找不到。配置文件之后,执行命令:npm run build,执行结果如下图所示(部分):

3、编译完成后会生成dist文件,如下图所示:

4、在原生可通过读取文件dist文件目录下的index.html进行展示h5页面。

5、需要跳转到某一个单独的h5页面,可使用路由进行单个页面跳转:

var path = "/detail";
var url = "/index.html#"+path;

其中path就是要跳转页面在router中的定义

这样就完成了原生调用vue编写的h5页面了。

vue与原生混合开发的更多相关文章

  1. 记录Vue和Jquery混合开发中关于点击事件的一个bug

    最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...

  2. vue+elementui+netcore混合开发

    1.VueController.cs using Bogus; using System; using System.Collections.Generic; using System.Linq; u ...

  3. H5、原生app、混合开发三者比较

    一.概念 a) H5:即Html5,接触过互联网的都知道html,所以很明显h5是html的第5次重大修改的一项超文本标记语言的标准协议. b) 原生:使用原生制作APP(Native app),即在 ...

  4. flutter 混合开发

    flutter 混合开发 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps https://flutter.de ...

  5. [MAUI] 在.NET MAUI中结合Vue实现混合开发

    ​ 在MAUI微软的官方方案是使用Blazor开发,但是当前市场大多数的Web项目使用Vue,React等技术构建,如果我们没法绕过已经积累的技术,用Blazor重写整个项目并不现实. Vue是当前流 ...

  6. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  7. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  8. 安卓混合开发——原生Java和H5交互,保证你一看就懂!

    ** 在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的Jav ...

  9. 浅谈App原生开发、混合开发及HTML5开发的优劣

    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...

随机推荐

  1. opencv2函数学习之blur,GaussianBlur,medianBlur和bilateralFilter:实现图像平滑处理

    在opencv2中,可能使用blur对图像进行平滑处理,这种方法就是最简单的求平均数. 平滑 也称 模糊, 是一项简单且使用频率很高的图像处理方法. 平滑处理的用途有很多, 但是在很多地方我们仅仅关注 ...

  2. Linux发邮件

    一.mail命令 1.配置 vim /etc/mail.rc 文件尾增加以下内容  set from=1968089885@qq.com smtp="smtp.qq.com"set ...

  3. syslog之二:syslog协议及rsyslog服务全解析

    目录: <syslog之一:Linux syslog日志系统详解> <syslog之二:syslog协议及rsyslog服务全解析> <syslog之三:建立Window ...

  4. Python:抓取百度SERP搜索结果页的网站标题信息

    比如,你想采集标题中包含“58同城”的SERP结果,并过滤包含有“北京”或“厦门”等结果数据. 该Python脚本主要是实现以上功能. 其中,使用BeautifulSoup来解析HTML,可以参考我的 ...

  5. 使用 Scrapyd 管理部署 Scrapy 的一些问题

    环境:Ubuntu Xenial (16.04) Scrapy 是一个不错的爬虫框架,但是不支持定时执行,常规的做法是使用 crontab 的方式进行定时执行 shell ,当爬虫数量多的时候,管理起 ...

  6. 使用Codis-Admin命令配置环境

    前提条件:由于22.35.60服务器各自配置了Codis-Service主机,所以22.35.60对应的ip和端口要求能通信和互信访问,为下面通过60的dashboard配置22.35.60实现分组. ...

  7. Redis+Jedis封装工具类

    package com.liying.monkey.core.util; import java.io.IOException; import java.util.ArrayList; import ...

  8. vim中使用系统粘贴板

    在vim中如果想使用系统粘贴板,也就是说,如果你在其他程序中复制内容,那么使用shift+insert组合键就可以粘贴进来. 需要说明的是,vim中的粘贴板有很多,你可以输入 :reg来进行查看.而我 ...

  9. spring scope 作用域

    转自:http://www.cnblogs.com/qq78292959/p/3716827.html 今天研究了一下scope的作用域.默认是单例模式,即scope="singleton& ...

  10. SpringMvc @RequestParam 使用推荐使用包装类型代替包装类型

    SpringMvc 中@RequestParam注解使用 建议使用包装类型来代替基本数据类型 public String form2(@RequestParam(name="age" ...