2. 程式人生 > >Framework7 + cordova +AS 混合開發安卓app（二）

Framework7 + cordova +AS 混合開發安卓app（二）

阿新 • • 發佈：2018-12-16

四、cordova建立專案

建立專案

 cordova create hello com.example.hello HelloWorld

如果一切正常，本條命令將建立一名為hello的專案資料夾，com.example.hello是你的專案包名，它將生成一個基於web的應用程式，其主頁是專案的www/index.html檔案 新增平臺

cd hello

顯示切換至專案（hello）資料夾，此時你需要新增應用的操作平臺，這裡給出Android與ios的命令操作

cordova platform add ios
cordova platform add android

你也可以通過命令查詢其他可新增操作平臺的命令

cordova platform ls

此時，你的cordova專案已經建立完成，你可以在你的電腦上看到生成的資料夾，其結構如圖： 這裡寫圖片描述 如果你按照如圖所示點選開啟platforms資料夾，然後你會看到在命令列中所新增的操作平臺，譬如我這裡顯示有Android和ios，接著我們開啟Android資料夾，一直點選開啟，直到你看到圖片所示的目錄結構，你會注意到assets下的www資料夾，它與我們前面在wamp軟體資料夾下的www資料夾有著很多相似之處，事實上，我們需要將前面我們編寫的HTML，Css，JavaScript等檔案拷貝到這個地方，你會看到圖片所示的結果 這裡寫圖片描述

五、AS匯入專案

操作步驟如下： 這裡寫圖片描述

這裡寫圖片描述 這裡寫圖片描述 點選OK，你將看到如下介面 這裡寫圖片描述 匯入成功後，你將看到 這裡寫圖片描述

六、cordova外掛呼叫

在我們開發的過程中，我們需要使用者手機允許APP呼叫一些程式，此時我們就不得不借助cordova外掛，這裡給出三個常用外掛的說明 1、cordova-Camera外掛 安裝

cordova plugin add cordova-plugin-camera

呼叫

//圖片來源
var pictureSource;

//設定返回值格式
var destinationType;

//當前請求呼叫硬體的頁面標識
let g_camera_caller;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  //載入後執行
  pictureSource = navigator.camera.PictureSourceType;
  destinationType = navigator.camera.DestinationType;
}


//當成功獲取圖片時以base64編碼格式顯示
function onPhotoDataSuccess(imageData) {
  console.log(imageData);
  let image_src = "data:image/jpeg;base64," + imageData;
}


//錯誤返回
function onFail(message) {
  app.dialog.alert('圖片獲取失敗： ' + message);
}


/*
 *拍照函式
 */
function capturePhotoViaDevice() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
    quality: 50,
    destinationType: destinationType.DATA_URL,
    allowEdit: true,
    correctOrientation: true,
    saveToPhotoAlbum: true
  });
}


/*
 *從圖片庫選擇函式
 */
function getPhotoFromDevice() {
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
    quality: 50,
    destinationType:destinationType.DATA_URL,
    allowEdit: true,
    correctOrientation: true,
    sourceType: pictureSource.PHOTOLIBRARY
  });
}

說明

2、cordova-Splashscreen外掛 安裝

cordova plugin add cordova-plugin-splashscreen

呼叫 一般來說，可以直接修改res資料夾下drawable-screen和mipmap-icon資料夾裡面的圖片，然後直接對應呼叫即可，需要注意的是，照片的畫素一定要按規定對應 這裡寫圖片描述 在AS的config.xml中配置以下資訊

<platform name="android">  
    <icon density="ldpi" src="res/icon/android/drawable-ldpi/icon.png" />
    <icon density="mdpi" src="res/icon/android/drawable-mdpi/icon.png" />
    <icon density="hdpi" src="res/icon/android/drawable-hdpi/icon.png" />
    <icon density="xhdpi" src="res/icon/android/drawable-xhdpi/icon.png" />
    <icon density="xxhdpi" src="res/icon/android/drawable-xxhdpi/icon.png" />
    <!-- 以下是啟動螢幕頁面，可根據需要進行新增 -->
    <splash density="land-hdpi" src="res/screen/android/splash-land-hdpi.png" />  
    <splash density="land-ldpi" src="res/screen/android/splash-land-ldpi.png" />  
    <splash density="land-mdpi" src="res/screen/android/splash-land-mdpi.png" />  
    <splash density="land-xhdpi" src="res/screen/android/splash-land-xhdpi.png" />  
    <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />  
    <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png" />  
    <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />  
    <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />  
</platform>  
<platform name="ios">  
    <!-- iOS 8.0+ -->  
    <!-- iPhone 6 Plus  -->  
    <icon src="res/icon/ios/[email protected]" width="180" height="180" />  
    <!-- iOS 7.0+ -->  
    <!-- iPhone / iPod Touch  -->  
    <icon src="res/icon/ios/icon-60.png" width="60" height="60" />  
    <icon src="res/icon/ios/[email protected]" width="120" height="120" />  
    <!-- iPad -->  
    <icon src="res/icon/ios/icon-76.png" width="76" height="76" />  
    <icon src="res/icon/ios/[email protected]" width="152" height="152" />  
    <!-- iOS 6.1 -->  
    <!-- Spotlight Icon -->  
    <icon src="res/icon/ios/icon-40.png" width="40" height="40" />  
    <icon src="res/icon/ios/[email protected]" width="80" height="80" />  
    <!-- iPhone / iPod Touch -->  
    <icon src="res/icon/ios/icon.png" width="57" height="57" />  
    <icon src="res/icon/ios/[email protected]" width="114" height="114" />  
    <!-- iPad -->  
    <icon src="res/icon/ios/icon-72.png" width="72" height="72" />  
    <icon src="res/icon/ios/[email protected]" width="144" height="144" />  
    <!-- iPhone Spotlight and Settings Icon -->  
    <icon src="res/icon/ios/icon-small.png" width="29" height="29" />  
    <icon src="res/icon/ios/[email protected]" width="58" height="58" />  
    <!-- iPad Spotlight and Settings Icon -->  
    <icon src="res/icon/ios/icon-50.png" width="50" height="50" />  
    <icon src="res/icon/ios/[email protected]" width="100" height="100" />  
    <!-- 以下是歡迎頁面，可根據需要進行新增 -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>  
    <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="960"/>  
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>  
    <splash src="res/screen/ios/[email protected]~ipad.png" width="1536" height="2048"/>  
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>  
    <splash src="res/screen/ios/[email protected]~ipad.png" width="2048" height="1536"/>  
    <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="1136"/>  
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>  
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>  
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>  
</platform>

這裡需要注意的是，檔案路徑填寫你的AS專案介面下顯示的檔案路徑； 你還可以新增

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

設定啟動頁的時長，預設是3000，即3秒； 或者新增

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

有時你可能想自己命名你的啟動頁檔名，這條程式碼可以幫你對應呼叫。

3、cordova-WeChat外掛 準備 在安裝呼叫之前，你需要建立一個安卓簽名檔案 你可以用命令列建立，檢視這位博主的分享說明命令列建立安卓簽名檔案 博主使用的是AS建立簽名檔案，操作步驟如下： 這裡寫圖片描述 這裡寫圖片描述 選擇檔案存放路徑： 選擇檔案路徑 這裡寫圖片描述 填寫好相關資訊後，點選OK即可建立成功。 建立成功後，你可以使用DOS命令將目錄切換成donkor.jks檔案目錄下，輸入keytool -list -v -keystore donkor.jks，按下回車鍵。輸入keystore密碼，獲取到簽名信息 當然你還有另一種方法，你可以通過一個軟體輸入包名自動生成簽名信息 點選下載 它們一般是32位； 接下來，你需要去微信開放平臺，獲取你的APPID，你會看到如下介面 這裡寫圖片描述 選擇移動應用開發，再選擇建立應用，你會看到 這裡寫圖片描述 以及 這裡寫圖片描述 注意：這裡的應用包名一定要和cordova建立專案的包名一致，應用簽名與打包時使用的簽名檔案一致 提交成功後，你可以在管理中心檢視到介面資訊 這裡寫圖片描述 需要什麼樣的功能介面就去申請，會有一定的稽核時間，你將獲取到你的APPID，在接下來的步驟中它很重要

安裝

cordova plugin add cordova-plugin-wechatv2 --variable wechatappid=YOUR_WECHAT_APPID

呼叫 微信外掛的呼叫功能有很多，貼出常見的幾種 檢查安裝

Wechat.isInstalled(function (installed) {
    alert("Wechat installed: " + (installed ? "Yes" : "No"));
}, function (reason) {
    alert("Failed: " + reason);
});

分享媒體

Wechat.share({
    message: {
        title: "Hi, there",
        description: "This is description.",
        thumb: "www/img/thumbnail.png",
        mediaTagName: "TEST-TAG-001",
        messageExt: "這是第三方帶的測試欄位",
        messageAction: "<action>dotalist</action>",
        media: "YOUR_MEDIA_OBJECT_HERE"
    },
    scene: Wechat.Scene.TIMELINE   // share to Timeline
}, function () {
    alert("Success");
}, function (reason) {
    alert("Failed: " + reason);
});

傳送支付請求

var params = {
    partnerid: '10000100', // merchant id
    prepayid: 'wx201411101639507cbf6ffd8b0779950874', // prepay id
    noncestr: '1add1a30ac87aa2db72f57a2375d8fec', // nonce
    timestamp: '1439531364', // timestamp
    sign: '0CB01533B8C1EF103065174F50BCA001', // signed string
};
 
Wechat.sendPaymentRequest(params, function () {
    alert("Success");
}, function (reason) {
    alert("Failed: " + reason);
});

3、cordova-Crosswalkt外掛 安裝

cordova plugin add cordova-plugin-crosswalk-webview

七、AS配置檔案

1.config.xml檔案 一般來說，你會在config.xml檔案看到如下程式碼

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.hemaapp.cjzx" version="1.0.2">
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <name>
       testapp
    </name>
    <description>
     just a test
    </description>
    <author email="[email protected]" href="http://cordova.io">
       Ian Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <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" />
    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>
    <feature name="SplashScreen">
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
        <param name="onload" value="true" />
    </feature>

你可以在這裡配置你的APP資訊 version是你的APP當前版本號，你可以通過在以後對APP進行區分 name是你的APP稱 description是你的APP描述 author 是你的資訊 這裡推薦官方文件說明（https://cordova.apache.org/docs/en/latest/config_ref/index.html） 2.string.xml檔案 你會在string.xml中看到如下程式碼：

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">
        testapp
    </string>
    <string name="launcher_name">@string/app_name</string>
    <string name="activity_name">@string/launcher_name</string>
</resources>

它在很多地方都進行了呼叫，所以建議修改其中的app_name為你的APP名稱。

3.AndroidManifes.xml檔案 在cordova打包的專案中，我們不需要對本檔案做過多的配置，不過注意的是以下程式碼：

android:versionCode="1" android:versionName="1.0.0"

說明如下： android:versionCode 是用於版本升級的，int型別，一般我們會把第一個版本定義為1，以此遞增，通過判斷該值確定是否需要升級更新APP，不對使用者顯示； android:versionName 是APP版本號，string型別，一般定義為1.0/1.0.0等，面向使用者顯示。

八、AS打包apk

操作步驟如下： 這裡寫圖片描述 點選選擇已存在的key,進入到key的檔案路徑 注意：這裡的簽名檔案一定要使用在微信開放平臺登記的簽名檔案，否則會呼叫微信外掛失敗 這裡寫圖片描述 這裡寫圖片描述 打包成功後，可以看到 這裡寫圖片描述 點選locate，彈出apk所在位置 這裡寫圖片描述 至此專案結束，特別鳴謝Owen Tsai的指導，以及CSDN中眾多前輩的文件的指導，有不對之處請多多指教。 聯絡我：[email protected]

相關推薦

Framework7 + cordova +AS 混合開發安卓app（二）

四、cordova建立專案 建立專案 cordova create hello com.example.hello HelloWorld 如果一切正常，本條命令將建立一名為hello的專案資料夾，com.example.hello是你的專案包名，它將生成一個

Unity開發安卓遊戲（2）：基於安卓遊戲的優化方案總結！

最近專案進入收尾階段，之前對專案做了很多優化，mesh合併 ，減少DrawCall和模型骨骼以及物理計算，合併材質球，優化程式碼等等，在IOS上還好，但是Android上，試過幾款手機，從低端到高階，發現效能還是很差，所以又花了幾天來研究摸索，終於把遊戲效能搞定。記錄下來，留作以後參考。 1. 更新不透

如何開發安卓遊戲（轉）

如何開發安卓遊戲 如果你以前從沒寫過程式碼，在你前進路上還要學習很多，但彆氣餒。接下來便是開發遊戲的一些主要步驟，讓我們來學習一下：一、獲取tanjurd SDK新手上路的第一步便是獲取Android SDK(軟體開發工具包)。SDK裡有一個核心類庫，一個模擬器，一些工具和示例程式碼。我強烈建議使用Eclip

安卓原始碼（二）檢視安卓原始碼分支列表

這裡再講一遍環境安裝： 系統deepin 15.4rc 1、安裝軟體 sudo su apt-get install openjdk-8-jdk apt-get install cur

開發安卓app插件有能力的來

thread 插件 app插件 1-1 能力 www app player .com %E6%9D%A5%E8%87%AARockPlayer%E8%81%94%E5%90%88%E5%88%9B%E5%A7%8B%E4%BA%BA%E6%9D%A8%E6%AD%A6%E8

QT開發安卓APP對於android60的適用

阿裏 方法 widget 顯示 nginx 遠程 求解 無法啟動 去掉 訪問遠程服務器端tomcat小貓咪頁面十一不休專職承接THINKPHP項目一個MYSQL實例它的表文件可以分散在不同的盤、目錄嗎BLADE模板是什麽意思呢 這種標出圖的名字叫什麽？是怎麽畫出來的？TP

萬樹IT：怎樣能快速學會開發安卓 App

目前，國內擁有數量龐大的安卓智慧手機使用者群。手機管理軟體憑藉豐富的app應用資源下載和便捷的管理功能，成為Android手機使用者的裝機必備選擇。基於手機等移動裝置的快速發展，App軟體需求不斷增加。那麼安卓app軟體應用的市場有多大呢？   一項資料調查顯示，72%的使用者每日使用10個左右

[編譯] 5、在Linux下搭建安卓APP的開發燒寫環境（makefile版）—— 在Linux上用命令列+VIM開發安卓APP

星期三, 19. 九月 2018 02:19上午 - BEAUTIFULZZZZ 0）前言 本文不討論用IDE和文字編輯器開發的優劣，是基於以下兩點考慮去嘗試用命令列編譯安卓APP的： 瞭解安卓APP的編譯過程，瞭解IDE幹了什麼事； 放在打包伺服器上需要自動化生成APP的指令碼； 1）安裝配置環境

Android入門教程三之使用Eclipse+ADT+SDK開發安卓APP

前言: 1.這裡我們有兩條路可以選，直接使用封裝好的用於開發Android的ADT Bundle，或者自己進行配置 因為谷歌已經放棄了ADT的更新，官網上也取消的下載連結，這裡提供谷歌放棄更新前最新版本的 ADT Bundle供大家下載！ 2.直接使用

開發安卓APP，你會用到那些開源框架？

UI層 圖片載入:用的Picasso，非常方便。 依賴注入：Butterknife ，小而全的依賴注入庫。之前使用過一段時間的 AndroidAnnotation ，功能非常完善，但一些特性上讓人難以接受。 資料層 Http/REST 請求：如果是嚴謹的

Android入門教程五之使用AndroidStudio+SDK開發安卓APP

<!-- Android 基礎入門教程 end --> <div class="col middle-column big-middle-column"> <div class="article"

一個非常簡單的方法使用JavaScript打包一個網頁成為安卓app（打包遠景論壇）

utf 網易 hub 文件 圖標 http taobao targe 應用 前言： 此方法非常簡單，可以挑一些移動端做的好的網站進行打包，比如 淘寶網, 京東網，網易新聞, 遠景論壇 大神看了輕噴，可以自己做了玩一下，本質上也是在瀏覽器訪問頁面，靈感來源於酷安

安卓學習（1）——搭建安卓開發環境：Eclipse+ADT+Android SDK

安裝JDK 這裡可以參考我之前寫的一篇關於安裝JDK的教程, 請看下面連結吧。 安裝Eclipse Eclipse 是一個開放原始碼的、基於Java的可擴充套件開發平臺。就其本身而言，它只是一個框架和一組服務，用於通過外掛元件構建開發環境。幸運的是，Eclipse 附帶了一個標準的外掛集，包括Java開發工

Smobiler實現美觀登入介面——C# 或.NET Smobiler例項開發手機app（二）

目錄 一、 本文目標 二、 準備工作 1、 資料庫 2、 材料 三、 介面佈局 1、設定控制元件的屬性值 （1） 輸入框 （2） 圖片屬性 （3） HandElectricity的標題的label屬性 （4）登入按鈕 （5）版權申明  （

HBuilder開發APP（二）——網路請求

 mui框架中給我們封裝好了常用的Ajax函式，是基於XMLHttpRequest，支援GET、POST請求方式，支援返回json、xml、html、text、script資料型別。         mui

安卓學習（初）第一章（《第一行程式碼》）

一、建立第一個安卓專案步驟： 1、在Android studio介面點選star a new Android studio project。然後在接下來的介面填入該專案的名稱、公司域名以及專案程式碼的存放地址（如果沒特殊要求一般選擇預設）。 2、再下一個介面指定Minimum SDK和選擇開

安卓學習（初）第三章（2）（《第一行程式碼》）

一、佈局的線性佈局<LinearLayout 1、示例： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal"

安卓學習（初）第三章（3）（《第一行程式碼》）

一、建立自定義標題欄 1、以線性佈局編寫程式碼。除了之前學過的設定控制元件對齊方式控制元件大小還有控制元件地址命名外，android:text設定控制元件文字內容，android:textColor設定控制元件底色，android:background設定背景，android:layout_ma

安卓學習（初）第二章（4）（《第一行程式碼》）

一、活動的啟動模式 1、啟動模式有四種，分別是standard,singleTop,singleTask,singleInstance。可以在註冊活動中通<acivity>標籤指定android:launchMode="... 模式  ..."屬性來選擇啟動模式。 2、

安卓學習（初）第二章（2）（《第一行程式碼》）

一、用Intent啟動活動 1、Intent()函式需要兩個引數，第一個引數要求提供一個啟動活動的上下文，第二個引數是指定想要啟動哪個目標活動 2、示例： public void onClick(View v){ Intent intent=new Intent(FirstAc