月度归档:2016年01月

移动前端工具

http://frozenui.github.io/frozenjs/
内部使用了比jq性能更好的库:zepto.js,文件gzip压缩后只有5k,是专门为移动推出的SDK。
http://framework7.taobao.org/
超NB的webapp框架。

APK反编译工具

方法一:
http://ibotpeaches.github.io/Apktool/
方法二:
有时方法一,并不凑效。可以试这个方法,把apk后缀名改为.zip,然后用winrar打开,这个方法是可以破开天猫的apk。

webapp的JS调试与性能优化

在调试MobileWeb的时候,如果打开空白窗口,其标题如:chrome-devtools://devtools/bundled/devtools.html类似,则说明这时你需要穿墙一次,才能打开调试界面,之后再次打开则不会存在任何问题的了,目前该调试是关联到不同手机平台的。

根据devtools进行优化前请详细阅读以下文档:
新版:https://developers.google.com/web/tools/chrome-devtools/
旧版:https://developer.chrome.com/devtools/docs/cpu-profiling

https://github.com/paulirish/adb_trace这是python版的通迅协议实现

前端性能测试工具

1.berserkJS,新浪微博开源并使用的一个前端性能测试工具,据说它做得比phantomjs还更易用更好。
2.phantomJS,常用于单元测试,据说淘宝和百度是在用它的。
3.chrome’s devtools,按F12键就可以打开。非常详细。
4.web performance api,w3c组织制定的一个浏览器性能测试API,目前Chrome支持最好,可以使用js直接调用实现NB的性能检测。https://github.com/getwingm/web-performance

cordova的命令集

附上cordova常用命令列表

命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程,例如:cordova create helloworld “org.commom.helloworld” “helloworld”
cordova platforms add android 添加平台支持。
cordova build android 给cordova项目添加android平台。
cordova run android 编译和运行项目。
cordova install android 将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list 查看插件列表。
cordova build android 编译代码
cordova emulate android 在模拟器上运行(前提是创建好AVD)
cordova serve android 在浏览器运行
cordova run android 通过USB直接安装到真机

—————————–
插件:http://plugins.cordova.io/
如以上我们看到的,Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。
一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到(http://plugins.cordova.io/)。当然你也可以自定义自己的插件。
你可以用CLI搜索可用的插件,比如:
cordovaplugin search bar code
你可以通过以下命令安装插件,比如:
cordovaplugin add org.apache.cordova.device //设备API
cordovaplugin add org.apache.cordova.network-information //网络(事件)
cordovaplugin add org.apache.cordova.battery-status //电池(事件)
cordovaplugin add org.apache.cordova.device-motion //加速器
cordovaplugin add org.apache.cordova.device-orientation //罗盘
cordovaplugin add org.apache.cordova.geolocation //定位
cordovaplugin add org.apache.cordova.camera //摄像头
cordovaplugin add org.apache.cordova.media-capture //媒体文件处理
cordovaplugin add org.apache.cordova.media //媒体文件处理
cordovaplugin add org.apache.cordova.file //文件访问
cordovaplugin add org.apache.cordova.file-transfer //文件传输
cordovaplugin add org.apache.cordova.dialogs //对话框
cordovaplugin add org.apache.cordova.vibration //震动
cordovaplugin add org.apache.cordova.contacts //联系人
cordovaplugin add org.apache.cordova.globalization //全球化
cordovaplugin add org.apache.cordova.splashscreen //闪屏
cordovaplugin add org.apache.cordova.inappbrowser //打开新的浏览器窗口
cordovaplugin add org.apache.cordova.console //调试控制台
你可以用以下命令查看所有已经安装的插件
cordovaplugin ls
使用以下命令删除插件:
cordovaplugin rm org.apache.cordova.console
Plugin add高级选项
上面的安装方式是从registry.cordova.io库中按照id获取插件,这是一个非常通用的做法。你可以在安装时指定版本,比如:
cordovaplugin add org.apache.cordova.console@latest
cordovaplugin add org.apache.cordova.console@0.2.1
其中的latest表示获取最新版本。中间用@分隔。
如果插件不是在默认库中,而是在其他地方,则你可以指定URL:
cordovaplugin add https://github.com/apache/cordova-plugin-console.git
当然你需要先安装git。
Merge目录
前面提到,一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢?
项目根目录下有一个merges目录。我们以一个实例来讲解:
1) 修改www\css目录下的index.css文件,设置event.received的样式为红色: background-color:#FF0000;
2) 修改platforms\android\assets\www\css中的index.css文件,设置.event.received的样式为蓝色:background-color:#0000FF;
3) 在merges\android目录下新建一个css目录。
复制www\css中的index.css文件到该目录下。
修改该目录下的index.css文件中的.event.received的样式为绿色:background-color:# 00FF00;
仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知:
1) Merges目录中没有对应文件时,platform下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)
2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能。
帮助命令
通过以下命令查看帮助信息:
cordova help
更新命令
以下语句更新cordova:
npm update -g cordova
cordova更新完成后,你还需要更新项目:
cordovaplatform update android
注意:
因为各版本之间差异较大,执行更新时请事先仔细阅读官方文档,以免发生数据丢失或错误。