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"//这个是初始化时指定横屏或者竖屏
来源:oschina
链接:https://my.oschina.net/u/241552/blog/181476