cordova開發wp8應用的經驗總結

0、使用Nodejs爲cordova開發WP8應用添加插件

其實能夠直接用VS編譯cordova，可是我要添加插件的時候卻犯難了，不知道如何作起，網上找了半天沒弄出個因此然，只好用nodejs添加插件，找出插件安裝的位置，再放置到VS項目中。

這裏的總結1-3都是圍繞這個問題來的，這裏添加的插件以 org.apache.cordova.device 爲例。

步驟1、在項目目錄裏的config.xml包含插件，添加下面內容：

<feature name="Device">
    <param name="wp-package" value="Device" />
</feature>

步驟2、在項目目錄裏的加入Device.cs，若是有其餘相關文件也一塊兒拷貝（從nodejs獲得的插件文件拷貝）：

項目目錄\Plugins\org.apache.cordova.device\Device.cs

之後插件的cs文件也放入這裏

步驟3、在www文件夾下加入device.js（從nodejs獲得的插件文件拷貝）：

項目目錄\www\plugins\org.apache.cordova.device\www\device.js

之後插件的js文件也放入這裏

步驟4、在www文件夾下加入cordova_plugins.js（從nodejs獲得的插件文件拷貝）：

項目目錄\www\cordova_plugins.js

內容以下：

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/org.apache.cordova.device/www/device.js",
        "id": "org.apache.cordova.device.device",
        "clobbers": [
            "device"
        ]
    }/* 之後的插件也在這裏添加進來 */
]
});

相關問題一：爲什麼我插件相關的文件都放好位置了，插件仍是不起做用？

解決方法1、

這是由於有時候,咱們編譯完某個項目才添加的插件,有可能致使插件沒有寫進編譯裏,這時候按下列順序走一遍。

① 移除平臺項目 "cordova platform rm wp8"

② 添加須要的插件 "cordova platform add 插件包名"

③ 添加平臺項目 "cordova platform add wp8"

④ 從新編譯生成 "cordova build wp8"

解決方法2、

還有更快捷的方法，就是在無效的插件的js文件裏，也就是步驟三的js文件，這裏以org.apache.cordova.dialogs.notification爲例：

cordova.define("org.apache.cordova.dialogs.notification", function(require, exports, module) {

//之前的文件內容

}

把以前的文件內容包含住，這樣程序才能調用到這個插件模塊。

一、cordova platform add wp8 安裝WP8平臺項目時出錯

第一個錯誤：'msbuild' faild

也就是找不到msbuild命令，通常來講，這個命令在WP8 SDK最新版本對於的.NET Framework文件夾下

個人是C:\Windows\Microsoft.NET\Framework\v4.0.30319

其實你有安裝，可是他仍是找不到，由於編譯器在尋找這個msbuild時，會進行msbuild -version檢查，程序所期待的是英文返回，而咱們當地環境是中文的，因此形成錯誤。

這裏有兩個解決方法：

解決方法1、

找到程序的安裝檢查文件，通常在C:\Users\用戶名\.cordova\lib\wp\cordova\版本號\wp8\bin\check_reqs.js，繼續找到SystemRequiermentsMet函數，這裏的check_command函數執行就是會進行msbuild -version檢查，因此能夠把這一行註釋掉。

解決方法2、修改環境變量PATH，建議用命令行設置，這樣就不用重啓機器。

set PATH=原來的值;C:\Windows\Microsoft.NET\Framework\v4.0.30319\;

這樣就能準確找到msbuild文件了。

第二個錯誤： Please install the .NET Framwork v4.0.30319

其實我不知道爲什麼還會產生這個錯誤，由於這個仍是msbuild的問題，這時候咱們能夠在第一個錯誤的解決方法一中，繼續修改check_reqs.js的SystemRequiermentsMet函數，使 var msversion = true;就行了。

二、cordova prepare wp8 產生錯誤Error: Non-whitespace before first tag.

這是由於xml文件有bom頭的緣故,咱們能夠在載入xml前去掉頭部空白便可.

修改 "你的NPM存放文件路徑\node_modules\cordova\src\config_parser.js" 文件:

將 this.doc = xml.parseElementtreeSync(path);

改成 this.doc = new et.ElementTree(fs.readFileSync(path, 'utf-8').replace("\ufeff", ""));

緣由見：http://www.multiasking.com/blog/xml2js-sax-js-non-whitespace-before-first-tag/

若是仍有錯誤,查看如下文件xml聲明是否正確:

"你的項目目錄\platforms\wp8\CordovaWP8AppProj.csproj"

"你的項目目錄\platforms\wp8\Properties\WMAppManifest.xml"

<?xml version='1.0' encoding='utf-8'?>

三、cordova compile wp8 編譯錯誤

這裏的錯誤通常會報如下錯：

[Error: An error occurred while building the wp8 project.ERROR: MSBuild failed to create .xap when building cordova-wp8 for debugging.]

這裏的編譯也是使用msbuild程序，編譯執行的js文件是：

你的項目目錄\platforms\wp8\cordova\lib\build.js

找到大約140行左右，將 var cmd = 'msbuild "' + get_solution_name(path) + '" /clp:NoSummary;NoItemAndPropertyList;Verbosity=minimal /nologo /p:Configuration=Debug';

參數部分加上"/l:FileLogger,Microsoft.Build;logfile=build.log;"

便是改成 var cmd = 'msbuild "' + get_solution_name(path) + '" /l:FileLogger,Microsoft.Build;logfile=build.log;/clp:NoSummary;NoItemAndPropertyList;Verbosity=minimal /nologo /p:Configuration=Debug';

這樣在 "你的項目目錄\platforms\wp8目錄" 下就能找到build.log日誌文件，打開查看問題所在。

我遇到的問題是：

一、解決方案文件 error MSB5010: 未找到文件格式頭。（同2的錯誤，頭部有亂碼）

二、未找到項目文件「項目目錄\platforms\wp8\HelloWorld.csproj」。
已完成生成項目「CordovaWP8Solution.sln」的操做 - 失敗。

我這裏的項目是HelloWorld，可是工程目錄給個人文件倒是：CordovaWP8AppProj.csproj，這裏把名字改成須要的就行了，也就是將CordovaWP8AppProj.csproj重命名爲HelloWorld.csproj。

四、這樣咱們就能夠調試程序啦

1、cordova emulate wp8 （虛擬機調試）

2、cordova run wp8 （真機調試）

問題還沒解決，雖然這一步不影響我添加插件了。

由於我是用真機調試的，因此到這裏我用cordova run wp8會出現亂碼錯誤：

很明顯又是本地的中文環境致使的亂碼，只要找到錯誤，咱們就能夠解決。

這個錯誤提示實際上是在文件 "你的項目目錄\platforms\wp8\cordova\lib\deploy.js"

大概109行左右產生的（代碼：Log(line, true);）

咱們修改錯誤提示上面一行的代碼，使之在命令行界面顯示。

將Log("ERROR: command failed in deploy.js : " + command);

改成Log("ERROR: command failed in deploy.js : " + command, true);

這時咱們再執行一遍cordova run wp8，發現整個錯誤是由於執行如下命令產生的：

你的項目目錄\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\bin\Debug>CordovaDeploy.exe "你的項目目錄\platforms\wp8" -d:0

PS：這裏的-d:0指的是鏈接第一個device（設備）調試，個人就是lumia 920，在VS裏能夠看到的順序，若是是虛擬機，可能就是一、二、三、4了

這時候咱們從新打開一個cmd窗口，執行以上命令，就能獲得沒有亂碼的中文錯誤提示。

我就安裝了2個開發人員應用程序，多是還沒註冊開發者的緣故吧，註冊以後貌似是10個的上限。

先卸了一個，再打命令：cordova run wp8，完工。

四、開發插件，調用C#代碼

詳情見：點擊這裏

五、關於navigator.notification.beep的問題

因爲應用第一次調用navigator.notification.beep的時候須要加載蜂鳴文件notification-beep.wav,致使蜂鳴不及時,因此咱們能夠預先加載一次蜂鳴的音頻文件,音量設爲0就好.

詳情見：點擊這裏

六、viewport屬性width=device-width無效

在CSS中加入如下代碼：

@viewport{height:device-height}
@viewport{width:device-width}
@-ms-viewport{height:device-height}
@-ms-viewport{width:device-width}

七、點擊元素會產生陰影

解決方法1、<meta name="msapplication-tap-highlight" content="no"/>

方法一使用後，使用點擊事件會有卡頓，這時改成tap事件就行了，在IE中是MSPointerDown或者MSpointerUp就行了

解決方法2、*{-ms-touch-action: none;}

八、讓界面保持豎屏

在項目的MainPage.xaml文件中，找到這2個屬性

SupportedOrientations="PortraitOrLandscape"//這個是支持橫豎屏的屬性，咱們將值改成Portrait就行了

Orientation="Portrait"//這個是初始化時指定橫屏或者豎屏