美文网首页
Cordova开发跨平台WebApp

Cordova开发跨平台WebApp

作者: 莫_名 | 来源:发表于2016-09-29 09:49 被阅读0次

对于WebApp我是拒绝的,但存在即价值,学习总结吧.(关键是boss让用,老项目也是这么开发的😂)

Cordova与PhoneGap的渊源大家可以自行搜索查看,两者之间大约相等.
总之现在用Cordova就是了.

Cordova官网


🚀快速开始

  1. 安装 sudo npm install -g cordova . 依赖于node.js.(npm 是node.js packets manager)
  • 创建项目,cordova create <path>. 例如 cordova create ./CordovaApp
  • 进入项目文件夹,添加开发平台.可以使用cordova platform查看支持的平台列表
    • cd CordovaApp
    • 添加开发平台cordova platform add <platform name>. 例如 cordova platform add browser. 这个过程事件可能会比较长.
    • 删除开发平台 cordova platform remove browser
    • 查看已添加的平台 cordova platform ls
  • 运行指定的平台,cordova run <platform name>. 例如 cordova run browser

🚴看文档相关

架构概览

CordovaArchitecture.png

创建App : cordova create <PATH> [ID [NAME [CONFIG]]] [options]

  • 使用cordova help create 查看详细参数说明

检查满足已添加平台的开发需求: cordova requirements


编译所有平台: cordova build
编译指定平台: 例如cordova build ios

编译成功后会在platforms文件夹下生成相应平台的项目,然后可以用Xcode, Android studio 进行打包等操作


可以使用使用标准的web开发技术(HTML,CSS,JS)开发通用的一般页面,如果需要访问设备级的特性就需要add plugins添加插件. plungin对原生sdk功能进行封装后暴露处js API供使用.

搜索插件: 在plugin search page查找相关插件. 也可以使用命令cordova plugin search camera直接打开页面查找.

安装插件: 例如安装camera相关的: cordova plugin add cordova-plugin-camera
使用cordova plugin ls查看已安装的插件


版本升级

  • 查看当前版本: cordova -v
  • 查看最新版版本号: npm info cordova version
  • 升级到最新版: sudo npm update -g cordova
  • 安装指定版本: sudo npm install -g cordova@3.1.0-0.2.0

项目模板: Template
不实用. 需要的话看文档Templates for apps部分


平台支持: 用Mac 开发一切


开发平台: Browser+Android+iOS, 其他的滚粗


管理版本和平台: 有些😳,用到了再细看


自定义图标
在config.xml中配置,详细参数看customize icons部分


数据存储

  • LocalStorage: 使用window.localStorage对象实现键值对存储
  • WebSQL: 支持sql语法
  • IndexedDB: 貌似不支持iOS,差评

whitelist: 白名单. 额,目前无卵用.


插件开发: 目前仅限于用,开发插件看需求吧.

使用plugman管理插件


与原生混合开发: 基于webview
涉及Android和iOS原生开发,具体看情况,现在暂时用不到.


项目结构参考

config.xml :全局配置文件. 具体各个参数意义及应用看文档,很详细.
Events: 事件发送及监听. 相当于通知机制.
CLI(Command-line-interface) : 命令使用详细参考
hooks: 用于定制cordova命令. 应用层面目测用不着.
Plugin.xml : 开发插件相关的. 需要时看.


插件API: cordova提供的一些常用关键插件的api,用到哪里点哪里,so easy !

相关文章

  • Cordova开发跨平台WebApp

    对于WebApp我是拒绝的,但存在即价值,学习总结吧.(关键是boss让用,老项目也是这么开发的?) Cordov...

  • 混合开发之 cordova && ionic 入

    1 cordova 简介 Apache Cordova (phonegap的核心)是一套开发跨平台移动应用的框架。...

  • cordova在Xcode下console.log打印

    近期接入公司以前的项目,利用Cordova的跨平台的开发,Cordova的开发里面的文件是html和js的文件,在...

  • React Native vs. Cordova.

    简评:跨平台开发五彩斑斓,本文作者简单介绍 RN 和 Cordova 的两种不同终端跨平台流程,从与原生开发联系中...

  • Cordova 初试

    整体内容介绍: 跨平台技术的由来 跨平台技术简介 cordova 简介 cordova 结构(重点) cordov...

  • 移动端跨平台开发的深度解析

    移动端跨平台开发的深度解析 跨平台一直是老生常谈的话题,cordova、ionic、react-native、we...

  • React Native,Cordova 小PK!

    简评:跨平台开发五彩斑斓,本文作者简单介绍RN和Cordova的两种不同终端跨平台流程,从与原生开发联系中分析其利...

  • iOS-cardova相关

    近期公司做了一款跨平台应用 利用 cordova框架+vue.js。我会陆续更新上来cordova相关的所有开发流...

  • cordova环境安装和插件使用

    cordova基于HTML、CSS和JavaScript的,用于创建跨平台移动应用程序的快速开发平台。能够利用iP...

  • 移动端开发 对比 跨平台开发框架分析

    移动开发对比跨平台的优缺点分析 :Cordova React Native Flutter 前言 现在主流的移动开...

网友评论

      本文标题:Cordova开发跨平台WebApp

      本文链接:https://www.haomeiwen.com/subject/dcghyttx.html