zoukankan      html  css  js  c++  java
  • Cordova学习笔记之入门

    前言

    前后学习Cordova也有几个月的时间了,是时候把学到的知识和经验总结一下。之前完全没有接触过移动开发,也没有接触过Hybrid App,只是一枚纯纯的web前端,没想到刚进公司接到的第一个项目竟然不是传统的web,而是让我独立开发一个App,当时整个人是懵逼的,而且也没有人带,一切只能靠自己,还好磕磕绊绊一路也这么走过来了...

    正文

    1.安装Nodejs和NPM

    这一步真的不需要我教了吧,如果这两个还不知道请你放弃前端吧!

    2.安装Cordova

    非常容易,直接 npm i -g cordova 就OK了

    3.创建Cordova项目

    cordova create hello com.hello.world

    执行该命令创建了一个名为hello的cordova项目

    4.添加开发平台

    cordova platform add android --save

    添加Android平台,如果是iOS则换成

    cordova platform add ios --save

    该命令会获取默认的平台版本并保存该版本到配置文件(--save),如果想指定版本可以

    cordova platform add android@6.1.0 --save

    其它支持的平台还包括windows phone, blackberry等等,具体见官网文档

    罗列已添加的平台

    cordova platform ls

    5.添加插件

    先说说什么是插件,我们知道,cordova是一种Hybrid App,所以基本上大多数的开发方式和web开发是一致的,就是直接操作浏览器就好了,可是我们是要开发一款类似原生的App,如果有涉及原生操作的需求怎么办,例如修改启动页图片,修改状态栏,获取设备信息等等,这些浏览器层面是无法帮我们做到的,因此这时就得通过cordova的插件机制来实现了。所谓的插件,其实就是原生API与浏览器之间的一座桥梁而已,cordova通过浏览器(例如android的webview)暴露原生API接口给Javascript调用,具体怎么实现有兴趣可以自己去深入了解。

    以状态栏插件为例,添加插件

    cordova plugin add cordova-plugin-statusbar --save

    罗列出已安装的插件

    cordova plugin ls

    6.Cordova项目结构

    一般的cordova项目结构如下

    node_modules目录、package.json、gulpfile.js等就不用说了

    platforms是已安装平台目录

    platforms是已安装插件目录

    www就是你主要的工作目录了,所有的html,css,js都在这里,默认cordova一启动就会加载www/index.html页面

    7.打包Cordova应用

    好了,现在尝试修改一下www/index.html,然后执行

    cordova prepare android

    cordova build android

    OK了,如果命令行无错误信息的话就会在/platforms/android/build/outputs/apk目录下会生成一个apk,把它安装到你的手机试试看吧!

    TIPS:

    如果有错误信息,以下是一些通用的解决方法(不一定管用)

    清理项目

    cordova clean 

    或者重新添加平台

    cordova platform remove android --save

    cordova platform add android --save

    结尾

    基本上一个Cordova应用过程就是酱紫了,有一点要注意,每次在www目录下做的所有的修改,生成应用前都要先 cordova prepare [platform] 一遍再build

    补充一点,以上前提是你已经拥有某个平台的开发环境,例如Android开发环境搭建好的前提下,才可能打包出APK

  • 相关阅读:
    查看 lib 库信息
    评委打分(C++ 容器综合练习)
    二阶段12.16
    对搜狗输入法的使用心得
    二阶段12.14
    二阶段12.13
    二阶段12.12
    典型用户描述
    水王(课堂练习)
    一阶段11.21
  • 原文地址:https://www.cnblogs.com/hisheng/p/6133284.html
Copyright © 2011-2022 走看看