cordova与vue2集成

html-css09

cordova与vue2集成,第1张

1)先要安装 Node.js . 链接: https://nodejs.org/en/

2)安装cordova. 链接: http://cordova.apache.org/

终端步骤:

1)创建cordova的project

2)为cordova项目添加platform project

3)在相关平台运行app

4)用指定模拟器运行cordova工程

1)安装vue-cli

2)创建工程

*两个创建的工程放在平级

3)安装vue依赖包

4)安装Vue-router,Vuex和Mint-ui

5)修改webpack.config.js

path指的是我们cordova里的www/js目录,因为打包的时候会把所有js文件放到cordova工程的js目录下。

publicPath是指的一些公共资源(如图片,css文件)的加载路径。

6)最后修改cordova工程的www下的index.html文件

加入一个<div id="app"></div>和<script type="text/javascript" src="js/build.js"></script>

这里面就是vue生成的js

直接运行cordova run ios就可以看到效果了,我们已经将vue生成的文件运行了。

在前面的课程中,随着对Android体系的了解,已经可以进行正常的Android应用开发了。在Android开发中,同其他工程开发一样,也经常使用一些提高效率的框架,本文我们做一个对比。这些框架,既包括:网络请求框架、也包括图片加载库框架、还包括数据库操作等一些框架,总之,了解和熟悉这些框架,会对自己的开发效率有很大的提升和帮助。

网络请求框架

1、okHttp

在前文的学习中,我们已经了解过okHttp,是一个常用的网络加载库。

2、Retrofit

介绍

Retrofit是一个很不错的网络请求库,该库是square开源的另外一个库,之前的okhttp也是该公司开源的。

Retrofit是基于OkHttp封装的RESTful网络请求框架,使用注解的方式配置请求。优点是速度快,使用注解,callback函数返回结果自动包装成Java对象。官方自己的介绍说:

A type-safe REST client for Android and Java

该网络框架在github上的地址如下:https://square.github.io/retrofit/

要求

Retrofit支持的http方式方式包括 GET/POST/PUT/DELETE/HEAD/PATCH,Retrofit要求Java的版本是1.8+,Android应用的API版本应该在21+。

依赖

使用Retrofit库,和其他库一样,首先需要设置依赖,依然是在build.gradle文件中设置依赖:

//添加retrofit库依赖

implementation ‘com.squareup.retrofit2:retrofit:2.1.0’

//添加gson转换器

implementation ‘com.squareup.retrofit2:converter-gson:2.1.0’

使用

通过一个例子,我们可以来演示该框架的使用步骤:

1、定义请求接口,即程序中都需要什么请求操作

public interface HttpServices {

/**

获取头条新闻

@param type 新闻类型

@param key apiKey

@return

*/

@GET(“toutiao/index”)

Call getNewsList(@Query(“type”) String type, @Query(“key”) String key)

}

2、实例化Retrofit对象,使用的Builder的模式创建,如下代码所示:

Retrofit retrofit = new Retrofit.Builder()

.baseUrl(Constants.BASE_API)

.addConverterFactory(GsonConverterFactory.create())

.build()

注意,这里设置结构体转换器,是可以直接把网络请求回来的数据转换为Java结构体,这里设置的Gson解析器,因此要引入相应的转换器支持库。

3、得到接口对象,自己创建的全局的接口对象,并调用相应的接口,得到一个类似于请求Call对象。如下所示:

HttpServices httpServices = retrofit.create(HttpServices.class)

Call newsListCall = httpServices.getNewsList(“top”, Constants.API_KEY)

4、加入到请求队列中,并设置回调方法:

newsListCall.enqueue(new Callback() {

@Override

public void onResponse(Call call, Response response) {

//网络请求成功的回调方法

List list = Arrays.asList(response.body().result.data)

Log.i(“TAG”, “请求成功:” + String.valueOf(list.size()))

NewListAdapter adapter = new NewListAdapter(RetrofitActivity.this)

adapter.setmData(list)

mRecyclerView.setAdapter(adapter)

}

@Override

public void onFailure(Call call, Throwable throwable) {

//网络请求失败的回调方法

Log.i(“TAG”, “请求失败:” + throwable.getMessage())

}

})

其他界面操作和之前的Android中的内容一致。

3、RxJava

简单来说,用来处理事件和异步任务,在很多语言上都有实现,RxJava是Rx在Java上的实现。

原理

RxJava最基本的原理是基于观察者模式来实现的。通过Obserable和Observer的机制,实现所谓响应式的编程体验。

特点

RxJava在编程中的实现就是一种链式调用,做了哪些操作,谁在前谁在后非常直观,逻辑清晰,代码维护起来非常轻松。

RxJava也是一个在github上的库,githubhttp://www.xingkongmj.com/news/id/62.html地址如下:https://github.com/ReactiveX/RxJava

基于此,还有一个RxAndroid,github地址如下:https://github.com/ReactiveX/RxAndroid

RxJava和RxAndroid的关系

RxAndroid是RxJava的一个针对Android平台的扩展,主要用于 Android 开发。

基本概念

RxJava 有四个基本概念:

Observable:可观察者,即被观察者Observer:观察者subscribe:订阅事件

这四个概念之间的逻辑关系是:Observable和Observer通过subscribe方法实现订阅关系,从而Observable可以在需要的时候发出事件来通知Observer。

事件

RxJava 的事件回调方法主要包含以下几个:

onNext:普通的事件onCompletedhttp://daduchang.net/432717.html:事件队列完结。RxJava 不仅把每个事件单独处理,还会把它们看做一个队列。RxJava 规定,当不会再有新的 onNext 发出时,需要触发 onCompleted 方法作为标志。:事件队列异常。在事件处理过程中出异常时, 会被触发,同时队列自动终止,不再允许再有事件发出。在一个正确运行的事件序列中, onCompleted和 有且只有一个,并且是事件序列中的最后一个。需要注意的是,onCompleted() 和 () 二者也是互斥的,即在队列中调用了其中一个,就不应该再调用另一个。

数据库操作框架

在开发时,本地数据库可以起到缓存数据和存储业务数据的作用,随着技术的成熟,不断推出了有很多关于数据库的操作框架。比较常见的数据库操作框架有诸如:GreenDao,OrmLite 和 ActiveAndroid,DBFlow等。

GreenDAO

GreenDAO是一个开源的 Android ORM(“对象/关系映射”),通过 ORM(称为“对象/关系映射”),在我们数据库开发过程中节省了开发时间!

GreenDao的官方文档地址如下:http://www.xingkongmj.com/news/id/63.html

GreenDao的作用

通过 GreenDao,我们可以更快速的操作数据库,我们可以使用简单的面相对象的API来存储,更新,删除和查询 Java 对象。这款数据库操作框架的特点是:

高性能,在官方的统计数据中,GreenDao在GreenDao,OrmLite 和 ActiveAndroid三个框架中,读、写、更新操作效率均表现第一。易于使用的强大 API,涵盖关系和连接。内存消耗较小。安全:greenDAO 支持 SQLCipherhttp://www.xingkongmj.com/news/id/64.html,以确保用户的数据安全

核心概念

GreenDao 的核心类有三个:分别是:

DaoMaster:保存数据库对象(SQLiteDatabase)并管理特定模式的 DAO 类(而不是对象)。它有静态方法来创建表或删除它们。它的内部类 OpenHelper 和DevOpenHelper 是 SQLiteOpenHelper 实现,它们在 SQLite 数据库中创建模式。DaoSession:管理特定模式的所有可用 DAO 对象,您可以使用其中一个getter方法获取该对象。DaoSession 还提供了一些通用的持久性方法,如实体的插入,加载,更新,刷新和删除。XXXDao:数据访问对象(DAO)持久存在并查询实体。对于每个实体,greenDAO 生成DAO。它具有比 DaoSession 更多的持久性方法。Entities:可持久化对象。通常, 实体对象代表一个数据库行使用标准 Java 属性(如一个POJO 或 JavaBean )。

使用

按照官方的文档和github上的说明可以实现greendao的使用。

首先进行的是依赖,对于greenDao,有两个地方需要设置,分别是项目根目录中的 build.gradle,还有module中的build.gradle。

classpath ‘org.greenrobot:greendao-gradle-plugin:3.3.0’ // add plugin

在项目根目录中的build.gradle目录中写这句话的意思是添加greenDao的插件。

在项目module中的build.gradle中也需要进行配置,有两个地方需要设置,如下图所示:

apply plugin: ‘org.greenrobot.greendaohttp://www.xingkongmj.com/news/id/66.html’ //开头加入该代码

dependences{

implementation ‘org.greenrobot:greendao:3.2.0’

}

然后就可以使用了。

bean实体

可以在项目中创建自己业务需要的实体类,并通过注解来设置是实体类,字段约束等内容。然后点击Android Studio中的Make module,即可自动生成XXXDao代码,以此来方便开发者的操作。生成的XXXDao类,不可修改和编辑,是自动生成的。

ORMLite

ORMLite框架是另外一款Android开发中可以使用的数据库操作框架。该框架的文档地址如下:https://ormlite.com/sqlite_java_android_orm.shtml

该框架的文档准备的不是特别友好,此处不再赘述。

总结,所有的框架原理几乎都相差不大,只是操作有所差异。

视图注入框架

在Android项目开发过程中,有太多的页面需要布局完成,同时在代码中需要些大量的findviewbyid的操作,来实现控件的解析。于是就有人想能否轻松一些,解放双手节省时间,干一些其他有意义的事情,于是ButterKnife就来了。

ButterKnife是一个专注于Android系统的View注入框架,可以减少大量的findViewById以及setOnClickListener代码,可视化一键生成。

该项目在github上的地址如下:http://www.xingkongmj.com/news/id/65.html

这个框架的优势也非常明显:

强大的View绑定和Click事件处理功能,简化代码,提升开发效率方便的处理Adapter里的ViewHolder绑定问题运行时不会影响APP效率,使用配置方便代码清晰,可读性强

使用

首先是设置依赖,在build.gradlehttp://daduchang.net/432714.html中进行依赖设置:

implementation ‘com.jakewharton:butterknife:10.2.1’

annotationProcessor ‘com.jakewharton:butterknife-compiler:10.2.1’

需要注意,该框架要求Java环境1.8版本以上,SDK版本在26以上,因此在使用到的module中的build.graldle文件中,还必须添加如下代码配置:

apply plugin: ‘com.jakewharton.butterknife’

android{

//…

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

//…

}

另外,还必须在项目根目录中的build.gradle文件中,添加该框架的插件,如下图所示:

dependences{

classpath ‘com.jakewharton:butterknife-gradle-plugin:10.2.1’

}

然后即可在代码中进行使用了。

在使用该框架的页面进行绑定诸如,如下所示代码:

ButterKnife.bind( this)

主要的功能

@BindView():控件id 注解,解放双手,不用再每个控件都写一遍findviewById@BindViews():多个控件id 的注解,括号内使用花括号包括多个id即可,中间用,分割开在Fragment中使用,绑定Fragment。@BindString():绑定字符串@BindArray:绑定数组@BindBitmap:绑定bitmap资源@OnClick、@OnLongClick:绑定点击事件和长按事件…还有很多

插件安装

如果是页面很复杂,一个一个写BindView也很费劲,在Android Studio中,可以安装一个ButterKnife的插件,安装该插件后,可以在Studio中直接将对应的布局中的所有控件均给自动生成。

注意,在进行自动生成时,鼠标要放在布局文件上。

注意事项

ButterKnife框架在使用时,要求的版本比较高,包括Java的版本也有限制。因此,如果计划在项目中使用,要提前做好预备工作,以防止对已有项目和业务带来不必要的麻烦,反而影响工作进度。

<widget id="com.example.hello" version="0.0.1">

<name>HelloWorld</name>

<description>

A sample Apache Cordova application that responds to the deviceready event.

</description>

<author email="[email protected]" href="http://cordova.io">

Apache Cordova Team

</author>

<content src="index.html" />

<access origin="*" />

</widget>

widget:id填写app所有人的域名,version填写app的版本号

name:app名称

description:app描述,会在app stroe里显示

author:app作者相关信息,会在app stroe里显示

content:指定app开始指向页面

access:指定app可进行通信的域名,*为所有

preference:偏好设置,可针对不同平台进行个性化设置。

android和ios支持额外版本号:

<widget id="io.cordova.hellocordova" version="0.0.1" android-versionCode="7" ios-CFBundleVersion="3.3.3">

如果额外版本号未指定,默认值如下:

// assuming version = MAJOR.MINOR.PATCH-whatever

versionCode = PATCH + MINOR * 100 + MAJOR * 10000

CFBundleVersion = "MAJOR.MINOR.PATCH"

所有平台支持的Preferences

设置app全屏,默认值为false:

<preference name="Fullscreen" value="true" />

部分平台支持的Preferences设置:

隐藏滚动条,默认值为false,适用于android、ios:

背景色设置,适用于android、BlackBe<preference name="DisallowOverscroll" value="true"/>rry,可在CSS中设置body的背景色替代该方法且对所有平台都适用:

<preference name="BackgroundColor" value="0xff0000ff"/>

隐藏键盘上的工具栏,适用于iOS、BlackBerry:

<preference name="HideKeyboardFormAccessoryBar" value="true"/>

横屏竖屏锁定,可设置值为default|landscape|portrait,其中default指根据手机自身设置显示:

<preference name="Orientation" value="landscape" />

针对指定平台设定横竖屏,适用于Android、iOS、WP8、Amazon Fire OS、Firefox OS:

<platform name="android">

<preference name="Orientation" value="sensorLandscape" />

</platform>

在ios平台下,可通过JS控制:

function shouldRotateToOrientation(degrees) {

return true

}

feature标签

feature不适用于通过cmd添加插件的方式,适用于通过SDK特定平台进行开发可通过编辑config.xml feature标签的内容添加API

<feature name="Device">

<param name="android-package" value="org.apache.cordova.device.Device" />

</feature>

<feature name="Device">

<param name="ios-package" value="CDVDevice" />

</feature>

针对特定平台设置:

<platform name="android">

<preference name="Fullscreen" value="true" />

</platform>

android配置:

<preference name="KeepRunning" value="false"/>

<preference name="LoadUrlTimeoutValue" value="10000"/>

<preference name="SplashScreen" value="mySplash"/>

<preference name="SplashScreenDelay" value="10000"/>

<preference name="InAppBrowserStorageEnabled" value="true"/>

<preference name="LoadingDialog" value="My Title,My Message"/>

<preference name="LoadingPageDialog" value="My Title,My Message"/>

<preference name="ErrorUrl" value="myErrorPage.html"/>

<preference name="ShowTitle" value="true"/>

<preference name="LogLevel" value="VERBOSE"/>

<preference name="AndroidLaunchMode" value="singleTop"/>