Cordova笔记二:vue-leaflet-cordova的创建
vue组件化三部曲:
前言
相比于别的跨平台快速开发技术,Cordova已经走在其他跨平台技术的前面。技术相对来说成熟,而且适合广大网络开发人员,。
我提到过Cordova可以在Visual Studio中创建,而且可以直接使用Typescript进行编写,但对于初学者来说上手并不容易。学一门技术还是从简单的开始。Visual Studio开始项目就生成那么多文件确实有点太吓人了。
Ionic是最为成熟的移动端框架,它的成熟不仅仅在于它的样式,更是在于它的项目构建。当然它的底层还是cordova,这几年对前端的摸索,让我深刻了解前端知识越是底层,越是有价值。因为前端的变化太快,最顶层的框架可能就是“稍瞬即逝”。所以越成熟,越底层,越能投入生产的技术才是值得学习的。
这篇文章前半段介绍一下Cordova的安装和创建项目,后半段是对vue-leaflet-cordova的一个介绍。
安装
建议全局安装,方便脚手架生成项目。
npm install -g cordova
入门
cordova在安装完以后,可以使用命令行创建目录,此时你可以在命令行中输入cordova
查看对应的命令,或cordova help [command]
查看对应的命令详情。
创建项目
cordova create MyApp
创建项目后,进入文件夹cd MyApp
,里面有四个文件夹和一个配置文件。
hooks
-
platforms
对应的平台例如android,ios和browser等 -
plugins
插件工具,如文件处理之类 -
www
表现端 config.xml
添加平台
常用的平台主要是browser,ios,android。我相信不会有人去纠结wp和blackberry。由于涉及到ios,这里推荐开发的电脑尽可能使用mac。电脑端浏览项目应该是最常见,也是最简单的。首先,安装browser平台,然后运行即可。
cordova platform add browser
cordova run browser
就可以看到对应的效果。
注意尽可能使用 Chrome 浏览器运行。
这里,再举一个栗子,ios。同理,安装平台。
cordova platform add ios
这时还不能直接运行。
cordova requirements
返回的列表表明了你的安装情况。xcode是必须的。需要你耐心的安装。同理,android平台的安装也是如此。
cordova build ios
cordova emulate iOS
build
意味着生成对应的编译文件,毕竟ios和android都是编译型的平台。emulate
是打开模拟器,预览效果。
安装插件
插件是实现web和native交换的重要一环,依靠的是Jsbridge。如今像腾讯和阿里已经把这门技术研究到极致,并且有更近轻量化的定制。
安装插件非常简单。我们可以看到在plugin
文件夹中,有对应平台的native代码。
cordova plugin add geolocation
我个人认为掌握一款插件的开发,才是真正意义的了解cordova的插件编写,以及与native的交互。
vue-leaflet-cordova
vue-leaflet-cordova 是 vue-leaflet-mobile的移动端封装。
vue-leaflet-cordova参考了hiapp的项目结构。将vue打包文件夹直接等同于www。
扩展阅读
http://blog.csdn.net/abc__d/article/details/51322870
转载,请表明出处。总目录跨平台快速开发
转载,请表明出处。总目录Awesome GIS