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"//这个是初始化时指定横屏或者竖屏