1. 技术文章
  2. cordova开发wp8应用的经验总结

cordova开发wp8应用的经验总结

由 末鹿安然 提交于 2019-11-26 18:49:47

0、使用Nodejs为cordova开发WP8应用添加插件

其实可以直接用VS编译cordova，但是我要添加插件的时候却犯难了，不知道如何做起，网上找了半天没弄出个所以然，只好用nodejs添加插件，找出插件安装的位置，再放置到VS项目中。

这里的总结1-3都是围绕这个问题来的，这里添加的插件以 org.apache.cordova.device 为例。

步骤一、在项目目录里的config.xml包含插件，添加下面内容：

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

步骤二、在项目目录里的加入Device.cs，如果有其他相关文件也一起拷贝（从nodejs得到的插件文件拷贝）：

项目目录\Plugins\org.apache.cordova.device\Device.cs

以后插件的cs文件也放入这里

步骤三、在www文件夹下加入device.js（从nodejs得到的插件文件拷贝）：

项目目录\www\plugins\org.apache.cordova.device\www\device.js

以后插件的js文件也放入这里

步骤四、在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"
        ]
    }/* 以后的插件也在这里添加进来 */
]
});

相关问题一：为何我插件相关的文件都放好位置了，插件还是不起作用？

解决方法一、

这是因为有时候,我们编译完某个项目才添加的插件,有可能导致插件没有写进编译里,这时候按下列顺序走一遍。

① 移除平台项目 "cordova platform rm wp8"

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

③ 添加平台项目 "cordova platform add wp8"

④ 重新编译生成 "cordova build wp8"

解决方法二、

还有更快捷的方法，就是在无效的插件的js文件里，也就是步骤三的js文件，这里以org.apache.cordova.dialogs.notification为例： 

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

//以前的文件内容

}

把之前的文件内容包含住，这样程序才能调用到这个插件模块。

1、cordova platform add wp8 安装WP8平台项目时出错

第一个错误：'msbuild' faild

也就是找不到msbuild命令，一般来说，这个命令在WP8 SDK最新版本对于的.NET Framework文件夹下

我的是C:\Windows\Microsoft.NET\Framework\v4.0.30319

其实你有安装，但是他还是找不到，因为编译器在寻找这个msbuild时，会进行msbuild -version检查，程序所期待的是英文返回，而我们当地环境是中文的，所以造成错误。

这里有两个解决方法：

解决方法一、

找到程序的安装检查文件，一般在C:\Users\用户名\.cordova\lib\wp\cordova\版本号\wp8\bin\check_reqs.js，继续找到SystemRequiermentsMet函数，这里的check_command函数执行就是会进行msbuild -version检查，所以可以把这一行注释掉。

解决方法二、修改环境变量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;就好了。

2、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'?>

3、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日志文件，打开查看问题所在。

我遇到的问题是：

1、解决方案文件 error MSB5010: 未找到文件格式头。（同2的错误，头部有乱码）

2、未找到项目文件“项目目录\platforms\wp8\HelloWorld.csproj”。
已完成生成项目“CordovaWP8Solution.sln”的操作 - 失败。

我这里的项目是HelloWorld，但是工程目录给我的文件却是：CordovaWP8AppProj.csproj，这里把名字改为需要的就好了，也就是将CordovaWP8AppProj.csproj重命名为HelloWorld.csproj。

4、这样我们就可以调试程序啦

一、cordova emulate wp8 （虚拟机调试）

二、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里可以看到的顺序，如果是虚拟机，可能就是1、2、3、4了

这时候我们重新打开一个cmd窗口，执行以上命令，就能得到没有乱码的中文错误提示。

我就安装了2个开发人员应用程序，可能是还没注册开发者的缘故吧，注册之后貌似是10个的上限。

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

4、开发插件，调用C#代码

详情见：点击这里

5、关于navigator.notification.beep的问题

由于应用第一次调用navigator.notification.beep的时候需要加载蜂鸣文件notification-beep.wav,导致蜂鸣不及时,所以我们可以预先加载一次蜂鸣的音频文件,音量设为0就好.

详情见：点击这里

6、viewport属性width=device-width无效

在CSS中加入以下代码： 

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


7、点击元素会产生阴影

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

方法一使用后，使用点击事件会有卡顿，这时改为tap事件就好了，在IE中是MSPointerDown或者MSpointerUp就好了

解决方法二、*{-ms-touch-action: none;}

8、让界面保持竖屏

在项目的MainPage.xaml文件中，找到这2个属性

SupportedOrientations="PortraitOrLandscape"//这个是支持横竖屏的属性，我们将值改为Portrait就好了

Orientation="Portrait"//这个是初始化时指定横屏或者竖屏


标签
cordova
windos
phone
8
wp8
phonegap
apache
cordova
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!