Cordova簡介

在客戶端app開發的過程中,許多變動的業務需要前端來處理,隨著業務的不斷變動,前端和客戶端需要支援複雜的互動來滿足業務的增長.

如今大部分的app都有自己的前端和客戶端互動框架,大公司都會自己開發搭建JSBridge來滿足,也有一些開源的框架如Weex,Cordova等之流,因在使用cordova過程中,發現網上並沒有很詳細的具體實踐使用文件,許多坑都得自己摸索著解決,因此把自己使用的一些坑和感悟記錄下來.接下來就不囉嗦理論東西,主要是實踐.

Cordova安裝使用

1.安裝Cordova

npm install -g cordova

如果沒裝npm的百度就好,實際安裝會比較慢,能翻牆就翻牆,裝好之後可以看下版本

2.建立cordova專案

cordova create mycordova

3.新增android平臺

cordova platform add android 新增cordova android 平臺

上面會說cordova-plugin-whitelist 已經新增到project中了,這個之後會說,ok現在可以在platform目錄下發現Android相應的目錄.

4.整合cordova到android 專案中

這裡找了很多資料,整合到自己到android專案中,一般比較簡單的是有一個cordova.jar包整合到android專案裡. 官網上也有相關到資料,不過比較坑, 自己可以從官網看,接下來說的是直接把cordova的程式碼移植到專案中

整合之前,我們先用android studio開啟cordova目錄下platform目錄下到android專案

app目錄下就類似我們自己到app,可以看到有個MainActivity,
其他的主要是CordovaLib模組,這裡包含了Cordova Android 端的一些核心類
platform_www裡面是一些js程式碼
在專案的最外層還有一個config.xml的配置檔案,這個後續文章會提到
因此我們只要把CordovaLib相關類弄進來就ok了;

首先建立一個新的project, File->new->import Module, 選擇CordovaLib
setting.gradle 更改如下

include ':app',":CordovaLib"

app下到build.gradle 新增相應依賴

dependencies {
    implementation project(':CordovaLib')
}

把之前cordova專案裡的config,和assest拷貝到自己到專案裡面

則我們到專案最終如下

在activity裡到onCreate加入對應程式碼

public class MyCordovaActivity extends CordovaActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Set by <content src="index.html" /> in config.xml
        loadUrl("http://www.baidu.com");
    }
}

因為要訪問網路記得在AndroidManifest.xml加入一下permission

<uses-permission android:name="android.permission.INTERNET"/>

此時打包執行一下app
開啟,發現出現crash

我們修改config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0"
    id="com.example.sunquan.cordovademo"
    version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets">
    <name>cordovaDemo</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>

    <feature name="Whitelist">
        <param
            name="android-package"
            value="org.apache.cordova.whitelist.WhitelistPlugin"/>
        <param
            name="onload"
            value="true"/>
    </feature>

    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="market:*" />

    <preference
        name="loglevel"
        value="DEBUG" />
</widget>

增加Whitelist外掛,引數param value指向的是這個外掛所處的類

這個類怎麼來呢, 之前在cordova platform add android 的時候提示說cordova-plugin-whitelist 已經新增到project中了, OK, 我們從之前的cordova android platform 中找到Whitelist外掛, 把它拷貝到專案中,並設定對應的param 路徑名

此時再次安裝執行apk, 發現已經可以開啟www.baidu.com網址了.