Hybird应用开发实践(一)使用原生/cordova混合项目
最近准备尝试hybird开发原生应用,因为公司的项目本来就是原生开发的,所以准备选择cordova作为webview嵌入原生项目的开发方式。这里就以mac上整合ios项目为例。
1. 创建cordova项目:
1)安装cordova:
sudo npm install -g cordova
2)创建cordova项目:
cordova create hello com.example.hello HelloWorld
这里hello是目标目录名,HelloWorld是项目名称,com.example.hello是项目ID。
创建的项目会包含一个config.xml文件,在这里可以修改项目名称和项目ID以及其他的配置。项目还会包含一个www文件夹,其下包含index.html和css,js,img这些资源目录。www文件夹就是cordova h5项目的资源目录,其下的文件会被保存在设备的文件系统中,而非通过网络下载。这些css,js,img目录的名称和位置都可以自由变动(只要在www文件夹下)。index.html是单独的cordova项目的入口,也可以在config.xml中配置成其他文件,而在原生/cordova混合项目中也是可以另外配置的,将在之后说到。
3) 添加平台与启动:
cd hello // 切换到项目文件夹下 cordova platform add ios // 添加ios平台 cordova platforms ls // 列出已添加的平台,此时我们已添加了ios平台 cordova run ios // 编译构建ios平台并启动模拟器运行项目
2. 使用cordova插件:
使用cordova不仅可以将我们的h5项目包装成原生应用,还能使用各种包装好的插件调用原生接口,或是使用cordova包装好的js bridge来开发自己的插件。接下来就以一个toast插件为例,介绍如何在项目中添加插件。
1) 搜索插件:
可以在 https://cordova.apache.org/plugins/ 这里搜索插件
2)添加插件:
cordova plugin add cordova-plugin-x-toast // 添加 cordova-plugin-x-toast 插件 cordova prepare
这是cordova项目自动安装插件的方式,除此之外还有手动安装的方式,将在之后说到。
3)使用插件:
在页面包含的js中调用:
document.getElementById('toast-btn').addEventListener('click', function () { window.plugins.toast.show( 'Hello there!', 'long', 'center', function(info){ console.log('toast success: ' + info) }, function(err){ alert('toast error: ' + err) }) });
以上提到的工作流程都是独立的cordova项目,而我们要做的是在原生项目中嵌入cordova项目。接下来就来看看整合流程。
1)添加项目:
使用Xcode将congig.xml和www目录添加到项目代码目录中。
使用Xcode复制.xcodeproj文件到workspace下并设置构建参数。
在Link Binaries with Libraries中添加需要的框架。
在Build Settings中修改Header Search Paths。
以上步骤可以参考文档,让熟悉Xcode的原生项目开发童鞋来搞一搞,其实这一块的步骤我也不太懂,是原生的小伙伴配置的(不太会用Xcode T_T)。
添加完之后的目录结构类似于:
- 根目录 - 项目代码目录 - config.xml - www目录 ... - .xcworkspace文件 - .xcodeproj ...
2)使用CDVViewController:
在需要使用cordova webview的地方添加代码:
#import <Cordova/CDVViewController.h> // 导入CDVViewController头文件 CDVViewController* viewController = [CDVViewController new]; // 创建CDVViewController实例 viewController.wwwFolderName = @"anotherForder"; // 设置h5文件目录,不设默认就是www目录 viewController.startPage = @"html/page1.html" // 之前提到的,除了config.xml之外,我们还可以在这里设置启动页,不同的CDVViewController实例可以设置不同的启动页 [myView addSubview:viewController.view]; // 将我们的cordova webview显示出来
3)添加插件:
然后是添加插件这一步,需要用手动添加的方式。
回到我们之前的独立cordova项目,我们可以看到在项目目录下的platforms/ios文件夹下也有一个www文件夹,除了我们原本的文件之外,还有一些额外的文件。其中包括指定插件引用的cordova_plugins.js,包含插件js代码的plugins文件夹,我们需要将这两项复制到混合项目的www文件夹下。(cordova_plugins.js是全局插件的配置,因此我们可以在页面中单独包含插件的js文件,而不必将配置添加到cordova_plugins.js)
接下来,修改config.html文件,在feature标签中添加Toast插件:
<feature name="Toast"> <param name="ios-package" value="Toast" /> </feature>
最后还要将独立项目目录下platforms/ios/[项目名称]文件夹下的Plugins文件夹用Xcode复制到混合项目的代码目录下。最后,混合项目的目录结构应该类似于:
- 根目录 - 项目代码目录 - config.xml - www目录 - plugins目录(插件js文件) ... - Plugins目录(插件.h/.m文件) ... - .xcworkspace文件 - .xcodeproj ...
cordova混合项目的优势之一是h5项目我们可以绕过App Store更新代码。这里我们使用cordova-app-loader插件。
1)添加插件:
cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer
2)下载CordovaAppLoader的js文件(包含Promise插件bluebird.js,Cordova文件插件cordova-promise-fs.js,manifest下载更新插件cordova-app-loader.js):
cordova-app-loader-complete.js
3)添加初始manifest文件,并添加初始资源文件:
manifest.json:
{ "files": { // 需要下载的文件 "cordova-app-loader-complete": { "version": "76f1eecd3887e69d7b08c60be4f14f90069ca8b8", "filename": "cordova-app-loader-complete.js" }, "autoupdate": { "version": "76f1eecd3887e69d7b08c60be4f14f90069ca8b8", "filename": "autoupdate.js" }, "template": { "version": "3e70f2873de3d9c91e31271c1a59b32e8002ac23", "filename": "template.html" }, "app": { "version": "8c99369a825644e68e21433d78ed8b396351cc7d", "filename": "app.js" }, "style": { "version": "6e76f36f27bf29402a70c8adfee0f84b8a595973", "filename": "style.css" } }, "load": [ // 启动时包含的文件 "cordova-app-loader-complete.js", "autoupdate.js", "app.js", "style.css" ] }
4)引用manifest文件:
在.html文件中添加:
<script type="text/javascript" server="http://data.madebymark.nl/cordova-app-loader/" manifest="manifest.json" src="bootstrap.js"></script>
在deviceready后,manifest.json指定的css/js文件会被添加到页面。
5)更新manifest及文件:
初始化CordovaAppLoader:
var CordovaPromiseFS = require('cordova-promise-fs'); var CordovaAppLoader = require('cordova-app-loader'); var Promise = require('bluebird'); var fs = new CordovaPromiseFS({ Promise: Promise }); var loader = new CordovaAppLoader({ fs: fs, serverRoot: 'http://example.com/', localRoot: 'app', cacheBuster: true, checkTimeout: 10000 });
比对manifest文件并更新:
loader.check().then(function(updateAvailable) { ... }); // 检查localStorage中的manifest与http://example.com/manifest.json的差别 loader.download(onprogress).then(function(manifest){ ... },function(failedDownloadUrlArray){ ... }); // 按照更新的manifest文件更新下载新的依赖,下载的文件将被保存到设备的本地存储 loader.update(); // 重新加载页面 loader.update(false); // 将manifest保存到localStorage,但不重载页面,内容将在下一次进入是更新
如果新内容加载失败,项目将回退到初始打包的manifest状态。
Hybird应用开发实践(一)使用原生/cordova混合项目的更多相关文章
- vue 2.0 开发实践总结之疑难篇
续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实际开发中的使用 3. 开发实践总结 1. ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- Android游戏开发实践(1)之NDK与JNI开发01
Android游戏开发实践(1)之NDK与JNI开发01 NDK是Native Developement Kit的缩写,顾名思义,NDK是Google提供的一套原生Java代码与本地C/C++代码&q ...
- Android开发:最详细的 Toolbar 开发实践总结
最详细的 Toolbar 开发实践总结 过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践,收到很多开发者的关注和反 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- 《Flask Web开发——基于Python的Web应用开发实践》一字一句上机实践(上)
目录 前言 第1章 安装 第2章 程序的基本结构 第3章 模板 第4章 Web表单 第5章 数据库 第6章 电子邮件 第7章 大型程序的结构 前言 学习Python也有一个半月时间了,学到现在感觉 ...
- 升讯威微信营销系统开发实践:(1)功能概要与架构设计( 完整开源于 Github)
GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限,不会再对现有代码进行更新维护,不过微信接口比较稳定,经测试至 ...
- WePY - 小程序敏捷开发实践丨掘金开发者大会
声明:内容转载他处,如有侵权,可协商下架 本主题虽然在其它地方讲了很多次,但还是有非常多新内容.因为很多东西正在做或者想要做.本次分享主要分为以下几个部分: WePY 的介绍 WePY 的用户 上面展 ...
- Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2
在<Angular开发实践(六):服务端渲染>这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window. document. navigator等浏览器 ...
随机推荐
- 【转】SSL/TLS/WTLS协议原理
1 SSL(Secure Socket Layer)是netscape公司设计的主要用于web的安全传输协议.这种协议在WEB上获得了广泛的应用.2 IETF(www.ietf.org )将SSL作了 ...
- 线段树扫描线 HDU 1542
n个矩形 问他们覆盖的面积重复的就算一次 x数组存线段 然后根据横坐标排一下 z 线段树 l - r 就是1 ~ 2*n #include<stdio.h> #include< ...
- docker 镜像仓库 Harbor 部署 以及 跨数据复制
docker 镜像仓库 Harbor 部署 跨数据复制 Harbor 是 Vmwar 公司开源的 企业级的 Docker Registry 管理项目 它主要 提供 Dcoker Registry 管理 ...
- MySQL数据类型:SQL_MODE设置不容忽视
[IT168 技术]SQL_MODE可能是比较容易让开发人员和DBA忽略的一个变量,默认为空.SQL_MODE的设置其实是比较冒险的一种设置,因为在这种设置下可以允许一些非法操作,比如可以将NULL插 ...
- BootStrap中关于input-group的问题(未解决)
****************************************2016年1月6日 23:08******************************* 本来想实现的如下功能: 但 ...
- springmvc配置首页的方式
<mvc:view-controller path="/" view-name="redirect:/user/loginUI" />
- Python全栈【进程、线程】
Python全栈[进程.线程] 本节内容: 进程 线程 协程 I/O多路复用 进程 1.进程就是一个程序在一个数据集上的一次动态执行过程,进程是资源分配的最小单元. 2.进程一般由程序.数据集.进程控 ...
- Ketama Consisent Hash
问题描述 有一些目标节点 v1, v2...vn 需要一个算法,能够将任意key映射到目标节点中的一个vx 评价方式 1. 对于一个比较大的key集合,分布在各个目标节点的key的数量要尽可能均匀 2 ...
- MYSQL同步--主从同步问题集锦
1 同步停止,报错误: Could not find first log file name in binary log index file 数据库主从出错: Slave_IO_Running: ...
- FreeRTOS 使用指南(转)
源:FreeRTOS 使用指南 繁星电子开发团队制作 作为一个轻量级的操作系统,FreeRTOS 提供的功能包括:任务管理.时间管理.信号量.消息队列.内存管理.记录功能等,可基本满足较小系统的需要. ...