2017年8月

默认的用法有点儿麻烦. 分为等待deviceready->请求->开启->读取->处理这么四步.
最好是安装cordovarduino这个插件, 而不是cordova-plugin-serial. 后者的兼容性似乎有些问题. 除此之外, 这两个插件的用法是一样的.

var serialdata = ''
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    requestSerial();
}

function requestSerial(){
    serial.requestPermission(function success(){
        openSerial()
    }, function error(){
    });
}

function openSerial(){
    serial.open({
        baudRate: 115200,
        sleepOnPause: false
    }, function success(){
        readSerial()
    }, function error(){
    });
}
function readSerial(){
    serial.registerReadCallback(
        processSerialData,
        function error(){
        });
}

function processSerialData(data){
    var view = new Uint8Array(data);
    //按utf8方式解码
    serialdata +=  decodeURIComponent(escape(String.fromCharCode.apply(null, view)))
}

在使用cordova的serial串口插件调试的时候,总是要在安装包和调试的时候连线, 接USB串口的时候又换设备, 是否能通过android手机的WIFI与之连接, 然后同时插上串口 OTG调试呢? 当然是可以的.
主要参考文章:run-install-debug-android-applications-over-wi-fi

  • 首先要通过几个命令,从USB线切换到串口上去, 此时应该连接好usb线, adb devices 可以发现当前的android设备

  • 设置调试接口:

    adb tcpip 5555

  • 查看手机ip, 按参考文章中的命令adb shell netcfg并没有成功, 不过你总可以通过其他方式(设置->WIFI->详情)得到ip的,比如ip 是192.168.1.8

  • 切换USB为WIFI连接调试

    adb connect 192.168.1.8:5555

如果输出connected to 192.168.1.8:5555 表示已经切换成功!
按照文章, 命令 adb -s :5555 usb 可以在切回来. 不过还没有尝试.

  • 此时, cordova内的webview可以通过chrome浏览器的chrome://inspect查看了! 还能调试哦!

  • 如果要通过cordova安装apk, 可以:
    cordova run android --target=192.168.1.8:5555

cordova中使用vue,主要是CSP(Content Security Policy)的问题. 最简单的应对是使用CSP版本的vue. 可惜只有1.x的vue才支持. 1.x的最后一个csp版本是1.0.28, 下载链接, 该版本github地址
另有一篇文章讲怎么使用非CSP版本的vue: building-a-mobile-app-with-cordova-vuejs
但我使用后发现并不奏效...罢了..

如果要使用vue2.x,根据官方的描述:

CSP environments

Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions. The full build depends on this feature to compile templates, so is unusable in these environments.
On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.

也就是说使用webpack编译过的.vue就可以自带CSP属性.

现在的cordova和phonegap几乎是同一个东西了. 只不过phonegap似乎还能提供一些更易用一点的调试工具, 但似乎也仅此而已了.
phonegap有用的是cli, 和developer app(应用商店下载). 虽然phonegap还有一个图形化的desktop(基于electron), 但是打开后一直处于loading状态, 不知道和墙有没有关系.

cli主要两个用法

phonegap create APP名
phonegap serve

其中第一个create命令cordova也有，但serve就没有了。

serve之后, 可以通过developer app连接. 这可能是与cordova的最大区别.

然后所有的开发都得参照cordova了.

cordova部分(下面的cordova换成phonegap也是一样的):

  • 安装平台

    cordova platform add android

  • 构建

    cordova build android

默认构建debug包. 构建之后, android的apk包位置在platforms\android\build\outputs\apk\android-debug.apk

  • 安装到设备并运行

    cordova run android --target=xxxxxxx

  • 安装插件

    cordova plugin add cordova-plugin-serial

这儿有一个讲Makefile讲得很好的帖子, 简明易懂Makefile经典教程(掌握这些足够)

这儿简述一下.

  • Makefile主要描述依赖关系, 根据依赖关系决定哪些重新编译. 按下面的格式, 如果被依赖文件任意一个被修改, 则调用命令
目标文件: 被依赖文件1 被依赖文件2 ...
    命令

如(cc表示 c complier)

edit: file1.o file2.o
   cc -o edit file1.o file2.o
file1.o: file1.c common.h
  cc -c file1.c
file2.o: file2.c common.h
  cc -c file2.c
  • 使用Make命令默认找Makefile下的第一个目标文件,并把它的依赖解决并输出.
  • 变量使用方式
# 定义
变量名 = 内容  
# 调用
$(变量名)

如

OBJFILE = file1.o file2.o
edit: $(OBJFILE)
  cc - o edit $(OBJFILE)
  • 其他语句如clean的使用方式
    要调用make clean清理编译的中间件, 其实有点像npm run dev之类的调用. 此时clean作为label,放置在最后面, 以免被当成目标文件.
edit: file1.o file2.o
   cc -o edit file1.o file2.o
file1.o: file1.c common.h
  cc -c file1.c
file2.o: file2.c common.h
  cc -c file2.c

clean:
  rm -f file1.o file2.o
  • 编译o文件可默认省略对c文件的依赖名和编译调用
edit: file1.o file2.o
   cc -o edit file1.o file2.o
file1.o: common.h
file2.o: common.h
  • 然后又可以合并:
OBJFILE = file1.o file2.o
edit: $(OBJFILE)
  cc - o edit $(OBJFILE)
$(OBJFILE): common.h
  • 在执行命令前加"-"号可以让命令持续执行而不管中间出现的错误(如文件不存在)
# 这儿省略前面的内容...

clean:
  -rm -f file1.o file2.o
  • =, :=, ?=这几种赋值方式的区别
    直接=的话, 在变量可以在后面再定义, 如:
A = $(B) 
B= var1 

# 此时 A值为var1

用:=的话, 如果前面没有定义, 就为空了

A := $(B)
B := var1

# A此时为空

用?=的话, 如果前面有定义, 就不再定义, 如果没有才使用?=的定义

B := var1
B ?= var2

# 此时B仍为var1
  • 条件语句
    有ifeq, else endif
ifeq($(B), var1)
   # do sth
else
  # do sth
endif

除了ifeq外, 还有ifneq, ifdef, ifndef这几个比较语句

  • $的其他表达
    如果要表示$符号,你得输入$$才行.

  • 自动化变量
    $@ $<依次指代目标, 依赖. 并且所指是一组目标,依赖, 并将这一组目标依赖依次代入调用中.

  • 其他语句

用来设置某一类的文件在哪个路径下搜索的
vpath 文件类型 路径

vpath %.c driver user

关于流stream和pipe，又是一种新的模式，听起来有点像函数式编程，然而它主要是为了解决对象内存占用过大的问题，便于一点点地处理对象。
比较好的入门读物流手册

参考文章

Jquery对象的属性和dom对象的属性是不能相互访问的, 这时候需要相互转换.

1.jquery选择器获得的对象是jquery对象

$('div') //jq对象

  1. jquery选择器产生的数组的子元素是dom对象

$('div')[0] //dom对象

  1. 使用jquery包裹dom对象可以再次生成jquery对象

var d = $('div')[0] //dom对象
$(d) //jq对象

  1. 在jquery对象下可以继续查找, 返回jquery对象

$(d).find('ul') //jq对象

我说怎么所有的站点都支持$了?原来是 Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点，多么滴熟悉。
$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。
但这些与jquery本身的用法还是有很大区别, 要注意的. 如果是jquery的$,默认返回所有的DOM节点的.
这些都属于Command Line API

这个工具干什么用的? 似乎是用来快速实现可视化的想法, 面向的人员那是技术和编程不那么熟悉的人. 和Arduino面向的对象类似, 语言风格也类似. 一个setup, 一个draw, 而draw本质上也是loop,只不过设定了帧率.
processing是java编写的,哦这一点和arduino也类似, 打开界面有种arduino的感觉. p5.js就是processing的JavaScript版本.

国内公司为什么很少NB的开源项目?
可能跟发展日新月异, 方向不断变动, 新任务总做不完有关. 这导致一个开源项目要么不能持续太久, 要么不能很好维护, 要么无法投入精力.

  1. 1
  2. 2