探讨从H5页面拉起APP的技术方案和问题
探讨从H5页面拉起APP的技术方案和问题
从H5页面里拉起或叫唤起APP（APP需已经安装在手机上），有两种技术方案，一种通过HTTP链接（iOS叫 Universal Link，安卓叫APP Links技术）拉起技术，一种是通过自定义scheme拉起技术（也有叫深度链接deeplink的）。这两个技术适用不同的场景，也有不同的局限性。
一、通过HTTP链接拉起
要想通过HTTP(s)链接直接拉起APP，需要APP本身做一些配置和写一些代码实现，还需要在你网站服务器配置相关的json文件。例如配置服务器host，能打开页面的path等。有些了这些配置，苹果服务器或者谷歌的服务器验证了这些配置，就可以通过相关的HTTP链接来打开APP了
这里不管是iOS叫 Universal Link，还是安卓的APP Links，他们的技术方案是基本一样的，只是不同的平台稍微有些不一样的而已。基本规则是：
- 先按照要求生成一个配置文件，json格式的，里面包括了一些必要的信息，例如安卓的包名，apk签名等，iOS的appID,匹配URL的path
- 将配置文件放到你的网站根目录下的.wellknown目录下，让苹果或谷歌的服务器能从这里下载这个配置文件。这个文件是关键，因为苹果或谷歌要从你网站里拉取到这个配置文件。由于你的网站只有你自己有权限上传配置文件，从而保证了安全性。
- 在你的APP里配置相关网站host ...
comments
Read More
AOP在移动开发中的应用
AOP在移动开发中的应用
下面是我在我们团队上的技术分享内容，从PPT里摘抄出来的，所有很多都是个提纲摘要
AOP简介
- AOP，Aspect Oriented Programming，面向切面编程
- 面向切面编程是一种通过横切关注点（Cross-cutting Concerns）分离来增强代码模块性的方法，它能够在不修改业务主体代码的情况下，对它添加额外的行为。
- 是对OOP的一种补充,是一种解耦的重要手段
AOP常用概念
- Join point：程序执行期间的一个点,表示方法的执行
- Pointcut: 切入点实际上也是从所有的连接点(Join point)挑选自己感兴趣的连接点的过程
- Aspect: 程序横向切割成若干的面，即Aspect.每个面被称为切面
- Advice: 某个特定连接点的某个方面采取的行动。不同类型的建议包括“周围(Around)”，“之前(Before)”和“之后(After)”建议
AOP实现原理
-
编译期间的静态织入，又称为编译时增强
-
运行期间的动态代理，又称为运行时增强
运行时AOP
comments
Read More
记一次WebView填坑过程--由换行符引发的血案
记一次WebView填坑过程--由换行符引发的血案
最近使用WebView掉坑了，然后艰难爬坑经历感触很深，写出来大家借鉴一下。
需求
我们有个网页需要用到很多js库，这些库比较大，而且基本上是不变的。为了提高性能，将这些网页和JS库放到本地，进行加载。变的数据从服务器获取，然后跟本地的HTML组装后显示。这种需求还是挺普遍的。
实现方式
由web的同事调试好HTML文件，他们把所有的HTML，js,css,image和资源一起打包给我们
我们把这些资源放到assets目录下（也可以专门在assets再建一个子目录来放）
采用Android自带的WebView来加载和显示这些网页。有两个方法loadUrl和loadDataWithBaseUrl方法。
1.loadUrl("file:///android_asset/xxxxxx.html")这种方式适合HTML不需要改变的情况，直接加载展示，省时省力
2.loadDataWithBaseUrl方式需要先把HTML内容现在到内存，然后再展示。这种方式可以随意修改HTML里的内容，修改好再交由WebView展示，灵活性强。
遇到的坑
测试的时候，我们遇到同一个HTML文件，通过loadUrl方式加载展示，没有任何问题。但是通过loadDataWithBaseUrl加载展示，HTML的内容死活展示不出来 ...
comments
Read More
如何写出不太坏的代码
如何写出不太坏的代码
本来想把标题定为“如何写出好代码”的，但是转念一想，觉得自己没那么牛逼，就改成了不太坏的代码。只要不要写出太糟糕的代码，不就是好代码了吗？
以下只是个人的一些总结，如有异议，请出门右转。
1.注重命名
包括文件名，变量名，方法名。一般变量名以功能来命名，看它的名字就能知道它的用途是什么
遵循一些命名规范。Java中成员变量名一般以m开头，而OC中的成员变量一般以_开头
2.遵循低耦合，高内聚的原则编写代码
具体表现遵循分层分模块原则，底层模块不能依赖上层模块，逻辑层不依赖界面，绝不要把逻辑层代码和界面代码混在一起
3.针对接口编程，而不是实现编程
当一个类要暴露一些方法给外部调用或者通信时，先定义好接口。接口定义应该简单明了，不容易引起歧义，接口尽量少。最后才考虑内部实现，而且尽量不暴露给外部，尽量不需要外部知道内部是如何实现的
4.一个类的代码量尽量不要太大，一个方法只做一件事情
一个类（或者一个方法）的代码越多，出错的概率越大。一个类三到5百行代码最佳。如果一个类的代码太多，就要考虑这个类是不是做的东西太多了 ...
comments
Read More
iOS开发如何做外部测试
iOS开发如何做外部测试
我们做APP开发的，开发出来的APP还未上线，又要想给别人用一下，该怎么做？实际上这是我们每个做APP开发的人都会遇到的，但是并不是每个人都清楚怎么做，有哪些方式。今天我们就来讲一讲。
在将iOS的APP如何给别人使用和测试前，先说一下安卓APP开发是怎么做的。安卓端是很简单的，你只要先生成一个证书文件keystone，然后用这个文件给apk签名，就可以将apk发给任意一个人安装使用了。这很简单，也很方便。可是iOS的就没那么容易了。我们还是从最简单的开发人员如何用真机测试开始说起。
真机调试
我们有了一个想法，并开始写代码，模拟器调试很方便，要在iPhone上看效果怎么办了。你直接将iPhone连上电脑是不行的。现在的情况至少你需要一个Apple ID，在Xcode上登录你的账号，在调试前Xcode会自动帮你初始化一些东西，然后就可以将APP安装到你的iPhone上了。在以前，你这个AppleID不能是普通的账号，必须是付了前的开发者账号才行。现在苹果放宽限制了。
这种方式的做法是你的手机必须连上你的电脑，在Xcode上选择你的iPhone来调试，Xcode会自动帮你注册设备的UDID。如果你没办法把iPhone连接到电脑上呢？或者不方便把iPhone连接到电脑上，毕竟如果是老板的手机的话，不方便那种做的。那我们需要一种把安装包提供给别人安装，或者一个地址给别人安装的方式。
adhoc 方式
我们将项目archive后，在导出（现在Xcode叫distribution）的时候，有个选项是adhoc ...
comments
Read More
SVG图片在移动端的应用解决方案
SVG图片在移动端的应用解决方案
近几年来SVG使用得越来越多，就连Android的官方库也加入VectorDrawable的支持。这个类就是用来支持向量图的。SVG图片在web端使用非常广泛，我第一次接触这个也是在做react-native的项目中使用的。当时我们要做一些动画，需要从一个形状变换成另一个形状，这种一般都是用矢量图来做的。当时设计师就给了我一些矢量图，于是我就开始研究这个东西。
在react-native中，有专门一个库叫react-native-svg来处理这个。不过当时要做两个SVG形状的动画变化，并不是任何一个形状都可以的，需要遵循一定的标准。设计师给我的两个SVG文件并不能转换。后来是我自己根据文件里的一些关键参数自己在代码里直接画出来后，再做转换动画。
最近我在做的native项目中，也遇到了要用SVG的图片。我们的项目里要从服务器下载SVG图片来展示。我们要实现的这些文件是需要服务器动态配置的，也就是说我们不能预先打包进我们的APP里。所以我们这里的要提供一个解决方案，跟图片JPG图片一样显示，缓存。
这个需求跟之前我遇到的那个需求是很不一样的，之前的是设计师已经定义好图片，我们工程师直接拿到文件在程序里展示，不需要考虑下载和缓存之类的。这种需求其实很简单，我们实际上大部分的需求就是这种需求，网上有很多库可以完成这种需求。把SVG图片跟JPG等普通图片一样使用，网上的方案还真不多，特别是iOS方面。。。。
要像普通图片一样使用，就要考虑下载，本地缓存，内存缓存。像这种需求，我们移动端都会使用专门的图片框架，像安卓端的glide，UIL等，iOS端的SDWebImage等。但是这种库它是默认都不会考虑SVG图片。但是我们最好还是像使用这种框架来处理SVG图片 ...
comments
Read More
多家公司的人证比对算法体验和开发感想
多家公司的人证比对算法体验和开发感想
最近在开发一个声纹采集一体机系统，这个系统里用到了人证比对功能，即刷身份证后拍照，然后将身份证里面的照片跟拍照比对，验证是否是同一个人。我们不是做人脸识别的公司，所以人脸识别功能当然是接入别人的SDK，这里我们找了好多家的人脸算法，对接过程中也遇到很多问题。经过这次的开发，我了解到这个行业的一些现状。
我们的系统主要运行在Windows电脑上，而且需要无网络也能使用，所以人脸算法必须是用离线版的。人脸算法厂家一般对外提供两种方式：在线版和离线版。一般在线版都可以提供免费试用，离线版需要授权使用。
云端方案
在线版的人脸识别我试用过依图科技的和中科视拓的SDK。在我们的应用声临其境APP上有个声纹购物的场景，需要人脸验证。这两个厂家提供的API都差不多，依图的API安全性考虑更全面，错误码定义的比较详细。还有他们的API共同点是，图片传输都是将图片数据进行base64编码后传输的。至于准确率，感觉都差不多，没有特别明显的差距。
离线方案
离线版的人脸算法用得比对多。因为它是用在我们要卖的机器上，而在线版的我们只是做试验。离线版的集成和使用要比在线版麻烦很多。由于离线版要给出算法库，处于安全和容易被拷贝的原因，都是要先授权的。授权的方式一般有两种：在设备上接入加密狗USB key或者绑定设备机器码的方式。加密狗方式比较方便，我们一般采用这种方式。
我们接入了很多厂家，有阅面科技，中控，杰锐达，商汤，我还把开源的dlib人脸识别也接入了 ...
comments
Read More
Flutter框架研究和与RN对比
Flutter是什么
现在技术更新迭代真的很快，每隔几年就会出现一些新的技术。当然，Flutter出现有有一点时间了，只不过还未真是发布，但是已经有一些人在使用了。这篇文章主要内容来自我在公司内部的一次分享会，所以大部分内容都是提炼。
- Flutter 是由 Google 的工程师团队打造的，用于创建高性能、跨平台的移动应用的框架。
- Flutter 针对当下以及未来的移动设备进行优化，专注于 Android and iOS 低延迟的输入和高帧率
- Flutter的设计跟react-native很像，但是比RN进了一步
- Flutter的开发语言是Dart
移动端跨平台开发技术演进
现在主流的移动开发平台是Android和iOS，之前还有过windows phone，每个平台的开发技术都不太一样。大家都是针对每个平台开发应用。自然有人就会觉得这样效率低下，想进行跨平台开发。从最开始的Hybrid混合开发技术，到RN的桥接技术，到现在新兴的Flutter技术，跨平台开发技术一直在演进。
以往最早的Hybrid开发，主要依赖于WebView。但是WebView是一个很重的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。react-native技术抛开了WebView，利用JavaScriptCore来做桥接，将js调用转为native调用，只牺牲了小部分性能获取的跨平台开发，这是一大进步。所以现在react-native很流行的原因。
上图react-native框架原理
Flutter实现跨平台采用了更为彻底的方案 ...
comments
Read More
Jenkins slave ReactNative项目自动打包
Jenkins slave ReactNative项目自动打包
这次我想在谈谈Jenkins自动打包的问题。针对react-native项目。
一般情况下，我们都是在一台电脑上安装Jenkins，然后在该电脑上打开Jenkins网页进行打包配置。如果我们有很多项目，分布在不同的电脑，而且运行的系统也不同，这时候我们需要一个master来统一管理这些电脑，然后统一在一个网页上进行打包配置。这就是Jenkins的master-slave打包模式。这种模式跟单机模式稍有不同，这里主要讲怎么配置slave。
slave节点配置
- 首先slave上也同样要安装Jenkins和相关的打包所依赖的环境，一个都不能少。配置好之后，我们并不需要在本机上打开Jenkins网页来创建项目，配置项目等，而是要到主机上去配置。在去主机的Jenkins管理页面上新建节点之前，从机还需要做一些其他配置。
- 打开远程登录。在系统设置-->共享，然后选中远程登录，允许所有用户访问。
- 记住本机IP地址。在系统设置-->网络，可以看到当前网络的IP地址。为了以后方便，可以将IP地址设置为一个固定IP地址。不然当该电脑重启之后，IP地址可能会变，然后主机再按照之前配置的旧IP连接从机的时候，就连不上了。Mac电脑配置固定IP也有注意的地方。我第一次配置就是没有成功，上不了网。选择手动方式，然后填上一个没有被占用的IP地址，然后，子网掩码也要注意，如果跟服务器是跨网段访问的，需要注意255.255 ...
comments
Read More
react-native框架源码学习(iOS)(下)
react-native框架源码学习(iOS)(下)
如果没有看过上篇，请先看react-native框架源码学习(iOS)(上)。
JSCExecutor相关初始化
在上篇中说到Instance的初始化方法initializeBridge里，最主要是创建了NativeToJsBridge的实例。而NativeToJsBridge的构造函数里，主要是调用了executorFactory来创建一个JSCExecutor。NativeToJsBridge的构造函数还包含更多的东西。
NativeToJsBridge::NativeToJsBridge(
JSExecutorFactory* jsExecutorFactory,
std::shared_ptr<ModuleRegistry> registry,
std::shared_ptr<MessageQueueThread> jsQueue,
std::shared_ptr<InstanceCallback> callback)
: m_destroyed(std::make_shared<bool>(false))
, m_delegate(std::make_shared<JsToNativeBridge>(registry, callback))
, m_executor(jsExecutorFactory->createJSExecutor(m_delegate, jsQueue))
, m_executorMessageQueueThread(std::move(jsQueue ...comments
Read More