天天看點

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

Cordova使用

官網文檔

http://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface/

官方示例:

npm install -g phonegap        --全局安裝phonegap
npm install -g cordova
cordova create hello com.example.hello HelloWorld -d
cd hello
cordova platform add android --如果源無法聯接,可以試試: cordova platform add android ---registry=https://registry.npm.taobao.org
cordova platforms ls                --檢視支援的平台
# cordova platform remove blackberry10 移除平台語句
cordova build android           
#--cordova build 編譯所有平台
cordova emulate android
cordova run android --list  顯示目前android裝置
cordova run android --target=""  在目标裝置上運作目前程式
           

項目生成以後,可以使用android eclipse導入項目:

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

安裝時常見錯誤處理

變更目标版本

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

有這個提示時,要去安裝SDK android-22。我這裡android-22太新了,我變更了目标版本:

test\myapp\platforms\android\project.properties
target=android- #這裡變更目标版本
android.library.reference=CordovaLib
           

網絡異常

如果有這個錯誤:

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

多下載下傳試幾下,可能是網絡問題

缺少sdk

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

這個錯誤是因為cordova使用了android.webkit.ClientCertRequest,這個必須要安裝android sdk 21。

Hello World

修改index.html

<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>歡迎使用Cordova</p>
</body>
</html>
           

可以加入cordova的事件,在head裡加入:

<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
  function onBodyLoad(){
      document.addEventListener("deviceready",onDeviceReady,false);
  }
  function onDeviceReady(){
      navigator.notification.alert("Cordova is ready!");
  }
</script>
           

修改body

<body onload="onBodyLoad()">

</body>
           

為了監聽錯誤,可以在指令行運作:

adb logcat | find “Web Console”

運作結果如下:

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

windows下eclipse開發 www目錄問題

預設情況下,assets/www下内容是隐藏的。事實上這個目錄的内容是自動生成的,我們一般不需要改動它。使用者程式一般放在連結www裡。但在eclipse運作程式時,程式不會自動部署到assets/www下,可以每次運作前,手動運作

cordova prepare

指令進行部署。還可以修改eclipse配置:

首先建立一個批處理檔案

cordova-prepare.bat

内容:

cordova prepare

然後在Project-Properties裡,進行下面設定:

Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜
Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜
Cordova 1 安裝及示例程式Cordova使用Hello Worldwindows下eclipse開發 www目錄問題查找cordova插件網址線上H5打包事宜

這樣每次運作前,就可以自動部署了。

查找cordova插件網址

http://plugins.cordova.io/npm/index.html?q=

線上H5打包事宜

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.xundh.youyoufang" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>名稱</name>
    <description>
描述
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="http://這裡可以放線上網址" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <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-navigation href="http://*/*" />  注意這一句,連結都在目前webview打開,不要去打開手機浏覽器。但對target=_blank的無效。
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>