• <samp id="frm2q"><ins id="frm2q"></ins></samp>
      1. <samp id="frm2q"></samp>
        <progress id="frm2q"><bdo id="frm2q"><strong id="frm2q"></strong></bdo></progress>
        <menuitem id="frm2q"><ins id="frm2q"><u id="frm2q"></u></ins></menuitem>

        <progress id="frm2q"></progress>
      2. Cordova 運行 Web 應用

        小編:管理員 105閱讀 2022.09.13

        Cordova 運行 Web 應用Cordova 簡介

        Cordova 非常的流行,因為它可以讓 Web 開發人員來創建移動應用, 而且還可以通過 JavaScript 來調用設備硬件 API (GPS、藍牙等)。

        通常 Cordova 的做法是把應用的 Web 內容 (HTML, JavaScript, CSS) 打包到移動應用中, 這樣看起來更像是一個本地應用, 即使在離線的情況下也可以使用。

        其實還可以使用 Cordova 為現有的 Web 應用提供設備 API , 增強現有 Web 應用的功能。 這樣做不僅可以使用服務端技術(aspx, cshtml, php等), 還可以隨時更新 Web 應用, 只有在需要新的設備功能(Cordova 插件)時才更新客戶端。

        這樣的應用架構看起來是這樣子的:

        個人認為, 這才是混合開發!

        新建一個 Cordova 應用

        按照 Cordova 的文檔說明, 創建一個測試應用, 并添加 Android 平臺, 指令如下:

        cordova create myApp org.apache.cordova.myApp myApp
        cordova platform add android
        復制

        然后先編譯一次,確認可以生成 Android 應用:

        cordova build android
        復制

        第一次編譯時, 會下載特定版本的 gradle , 需要一些時間。 一切順利的話, 最終可以看到如下輸出:

        BUILD SUCCESSFUL in 19s
        44 actionable tasks: 44 executed
        Built the following apk(s): 
          ~/platforms/android/app/build/outputs/apk/debug/app-debug.apk
        復制

        看到最后生成了 app-debug.apk ,就算是編譯成功了。

        添加并使用 Cordova 原生插件

        以cordova-plugin-app-version為例, 通過這個插件可以獲取到客戶端 app 的包名稱以及版本等擴展:

        cordova plugin add cordova-plugin-app-version
        復制

        修改index.js文件中的onDeviceReady方法, 代碼如下所示:

        // deviceready Event Handler
        //
        // Bind any cordova events here. Common events are:
        // 'pause', 'resume', etc.
        onDeviceReady: function() {
            this.receivedEvent('deviceready');
            // 啟動時訪問服務器上的文件
            if (location.href.startsWith('file://')) {
                var url = 'http://10.0.2.2/cdvtest/index.html?_t=';
                var date = new Date();
                url += date.toISOString();
                // 注意, 一定要用 replace 方法, 否則會打開新瀏覽器窗口, 而不是在 Cordova 應用的 WebView 中打開。
                location.replace(url);
            }
            else {
                // 這段代碼在 web 服務器上才能執行。
                cordova.getAppVersion.getAppName().then(
                    name => {
                        document.getElementById('version').innerHTML = name;
                    },
                    err => {
                        console.error(err);
                    }
                )
            }
        }
        復制

        修改config.xml, 允許訪問服務器地址:

        <allow-navigation  />
        復制

        對于比較新的 Android 版本 (據說是 7.0 以上), 默認是不允許訪問 HTTP 服務器的, 需要再修改一個配置, 允許 HTTP 訪問:

        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>
        復制

        修改index.html, 將服務器的URL添加至 CSP (Content-Security-Policy) 元數據:

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://10.0.2.2 https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        復制

        最后, 再運行一次cordova build android, 確認重新生成了對應的 apk 文件。

        安卓模擬器訪問本機時的地址是10.0.2.2, 可以根據實際的服務器地址進行修改。

        部署 Web 內容至服務器

        本文的目的是在 Web 服務器上的腳本中使用 Cordova 的插件功能, 因此需要把 Cordova 的插件腳本也部署到服務器上:

        cordova build android
        cp -r platforms/android/app/src/main/assets/www/* /usr/share/nginx/html/cdvtest/
        復制運行測試程序

        最后, 運行一下生成的應用, 確認可以在服務器上的腳本中使用 Cordova 插件!

        關聯標簽:
        日本漂亮人妻被强制

      3. <samp id="frm2q"><ins id="frm2q"></ins></samp>
          1. <samp id="frm2q"></samp>
            <progress id="frm2q"><bdo id="frm2q"><strong id="frm2q"></strong></bdo></progress>
            <menuitem id="frm2q"><ins id="frm2q"><u id="frm2q"></u></ins></menuitem>

            <progress id="frm2q"></progress>