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


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