cordova开发wp8应用的经验总结
2013-12-04 17:12
323 查看
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"//这个是初始化时指定横屏或者竖屏
相关文章推荐
- android应用前期开发之经验总结
- 基于MVC+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
- 基于Html5的移动应用开发经验总结:第一篇--架构选型篇(下)
- 混合应用开发框架Cordova源码学习总结
- 经验的总结:开发J2EE应用中的一些要领
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
- Android移动应用开发中常见的经验技巧总结
- Android移动应用开发中常见的经验技巧总结
- A302应用开发中基础功能的经验总结
- (转)基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
- A302应用开发中基础功能的经验总结 1
- cordova混合应用开发总结
- 基于MVC4+EasyUI的Web开发框架经验总结(6)--在页面中应用下拉列表的处理
- 基于Html5的移动应用开发经验总结:第一篇--架构选型篇(上)
- 全文检索项目开发阶段经验总结
- PHP开发经验总结
- [置顶]团队开发经验:如何带领一个项目团队并做好项目总结
- 经验介绍:Glow App 开发 Apple Watch 应用
- 【Android开发经验】使用Ant批量打包Android应用全然指南
- WINCE应用层设计经验总结-关于INI文件读写的类