改造一个项目上 Google Play 与 App Store 时候，选择了 H5+，就是数字天堂、UniAPP、HBuilder 那家的技术方案。

这里总结下原因分享给大家做个参考，同时把相关的坑也跟大家说下，希望可以在某个时候帮到各位。

背景说明

选择这个方案原因后来想想其实很简单，就是这个应用是先有了 H5 版本，即移动端浏览器版本，然后想要复刻到 APP 端，在应用市场售卖。

请注意，“先有 H5 版本”，然后想要转成APP，不是从零开始哦。

选型与说明

其实参考的技术方案有很多，比如 React Native（Taro），Vue（UniAPP），甚至是 ionic、NativeScript 都简单试过，当然还有类似的 Cordova。

其实像 React Native（Taro）、Vue（UniAPP）以及 NativeScript 被砍掉其实很简单，背景就决定除非完全重构，否则这几个方案就是浪费生命，几乎等于重写一遍。这么说的原因有二：

1、H5 版本有的情况下，不论是 DOM 写法，还是虚拟 DOM 的组件，都是不通用的，比如你无法把 div 直接当做 view 来用，同时也不能将 button 当做 button 用……

2、H5 的 API 与移动端不通用，比如 video 的 API，在 H5 与移动端根本就是两个东西。

然后就是 ionic 与 Cordova 的排除原因，很简单：文档与环境。

1、ionic 与 Cordova 的文档在国内网络环境下不好找，出问题很难搞，尤其大概率我这个玩意儿要写插件……我都写插件了，那干脆上 OC 和 Java 算了。

2、再就是环境，没错，这俩都需要 XCode 与 Android Studio 在你的设备上。虽说我是都有，但是我的目的很单纯，就是把 H5 套壳啊，费那么大劲干嘛？一点都不环保。

剩下我还知道且用过的就是 html5plus 与 apicloud 了，后者已经卖身就算了，只剩下 html5plus。

其实吧，这个“土土”的，还是意外的好用的。

关于过程中的坑分享

这玩意儿怎么用就不介绍了，基本有手就能用。

下载——创建5+项目——把 H5 代码整进去——运行即可。

这里着重说说遇到的坑。

对了，先看下原来的 H5 效果，避免不知道是干嘛的。

简单来说，就是通过浏览器（或 APP 内置浏览器）加载 3D 模型，同时调用摄像头的图像，将 3D 模型与摄像头的拍摄一起绘制出一张图片，用来演示用。比如做工程的工程模型，在现场比划比划就可以大概看出来效果，不需要把场景也建模了。嗯，大概就这么个东西。

H5 端的技术就是 three.js + video + 摄像头，比较简单，安卓浏览器兼容性良好，苹果肾8没问题，其他刘海设备没测（后面打包成 APP 发现有点问题）。

好了，可以说问题了：

1、浏览器可以直接从 a 标签下载图片，APP 不行，需要解决授权问题。

2、苹果设备默认的 video 层级问题。

3、iOS 设备在 APP 内 video 自动播放权限问题。

4、iOS 设备加载本地路径文件问题。

上面几个是比较坑的，就是那种想不到却发生的……

问题1，这个需要把原本 a 标签下载的 base64 内容，通过原生的 bitmap 进行转换，最终再将 bitmap 存到相册。

问题2，先说问题是啥样的，就是 iOS 会把 video 全屏，且层级贼高，与上面图完全不同，就只能看到一个带有“直播”字样的 video。解决方案很简单，给 video 标签添加“webkit-playsinline playsinline”属性，即可要求同层渲染。

问题3，这个就是老生常谈的问题了，属于想不到，但是遇到有会“果然如此”的问题。没啥好办法，不用原生化处理，就只能产品层面变更，所以给加上了“播放”与“停止”的按钮……

问题4，这个最粗暴，直接把本地地址全部换成远程 URL 就好了，因为本来就是让用户自己传远程 URL 的，之前是想要本地演示加载快，所以用了本地地址。

还有就是一些具体的代码怎么写，比如如何获取 Android 与 iOS 的权限状态与申请权限，这种百度搜下就有了。

请注意，还真得用百度……“土土”的，国内还得是百度。

总结

其实现在用 H5 开发一些东西还是很简单，毕竟很多功能 H5 基本都能实现了（不考虑兼容性的话），可以看下这个网站，我比较喜欢去，可以定期学习新东西，强烈推荐收藏：What Web Can Do Today

别的没了，欢迎大家沟通方案，我是被坑的挺难受的，尤其是 iOS……

一阶段：
HTML+CSS:
HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript基础：
Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS基本特效：
常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。
JS高级特征：
正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、
JQuery：基础使用
悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：
HTML5和移动Web开发
HTML5：
HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.
CSS3:
CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。
Bootstrap:
响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。
移动Web开发：
跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：
HTTP服务和AJAX编程
WEB服务器基础：
服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。
PHP基础：
PHP基础语法、使用PHP处理简单的GET或者POST请求、
AJAX上篇：
Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。
AJAX下篇：
JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：
面向对象进阶
面向对象终极篇：
从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。
面向对象三大特征：
继承性、多态性、封装性、接口。
设计模式：
面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：
封装一个属于自己的框架
框架封装基础：
事件流、冒泡、捕获、事件对象、事件框架、选择框架。
框架封装中级：
运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。
框架封装高级和补充：
JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：
模块化组件开发
面向组件编程：
面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。
面向模块编程：
AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：
主流的流行框架
Web开发工作流：
GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
常用库：
React.js、Vue.js、Zepto.js。

第八阶段：
HTML5原生移动应用开发
Cordova：
WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。
Ionic：
Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。
ReactNative：
ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。
HTML5+：
HTML5+中国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段：
Node.js全栈开发：
快速入门：
Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。
核心模块和对象：
全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端。
Web开发基础：
HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。
快速开发框架：
Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。
希望对您有所帮助！~

lus.runtime.openURL()

http://www.html5plus.org/doc/zh_cn/runtime.html

打开第三方程序

plus.runtime.openURL( url, errorCB, identity ); 
url: ( String ) 必选 要打开的URL地址
字符串类型，各平台支持的地址类型存在差异，参考平台URL支持表。
errorCB: ( OpenErrorCallback ) 可选 打开URL地址失败的回调
打开指定URL地址失败时回调，并返回失败信息。
identity: ( String ) 可选 指定打开URL地址的程序名称
在iOS平台此参数被忽略，在Android平台为程序包名，如果指定的包名不存在，则打开URL地址失败。

<template>  
        <view>  
            <button class="button" type="primary" @click="open(0)">使用第三方程序打开指定URL</button>  
        </view>  
</template> 
<script>  
export default {  
    data() {  
        return {  
            url: 'https://uniapp.dcloud.io/'  
        };  
    },  
    onLoad(op) {},  
    methods: {  
        open(types) {  
                plus.runtime.openURL(this.url, function(res) {  
                    console.log(res);  
                });  
        }  
    }  
};  
</script>  

调用第三方程序

plus.runtime.launchApplication( appInf, errorCB );

appInf: ( ApplicationInf ) 必选 要启动第三方程序的描述信息

errorCB: ( LaunchErrorCallback ) 必选 启动第三方程序操作失败的回调函数
启动第三方程序失败时回调，并返回失败信息。

 <template>  
        <view>  
            <button class="button" type="primary" @click="launchApp">打开淘宝</button>  
        </view>  
 </template> 
<script>  
export default {  
    data() {  
        return {  
            url: 'https://uniapp.dcloud.io/'  
        };  
    },  
    onLoad(op) {},  
    methods: {  
        launchApp() {  
            let _this = this;  
            // 判断平台  
            if (plus.os.name == 'Android') {  
                plus.runtime.launchApplication(  
                    {  
                        pname: 'com.taobao.taobao'  
                    },  
                    function(e) {  
                        console.log('Open system default browser failed: ' + e.message);  
                    }  
                );  
            } else if (plus.os.name == 'iOS') {  
                plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {  
                    console.log('Open system default browser failed: ' + e.message);  
                });  
            }  

        }  
    }  
};  
</script>  

常用URLscheme

[  
    // 只在 ios 中生效  
    {  
        name: 'App Store',  
        scheme: 'itms-apps://'  
    },  
    {  
        name: '支付宝',  
        pname: 'com.eg.android.AlipayGphone',  
        scheme: 'alipay://'  
    },  
    {  
        name: '淘宝',  
        pname: 'com.taobao.taobao',  
        scheme: 'taobao://'  
    },  
    {  
        name: 'QQ',  
        pname: 'com.tencent.mobileqq',  
        scheme: 'mqq://'  
    },  
    {  
        name: '微信',  
        pname: 'com.tencent.mm',  
        scheme: 'weixin://'  
    },  
    {  
        name: '京东',  
        pname: 'com.jingdong.app.mall',  
        scheme: 'openApp.jdMobile://'  
    },  
    {  
        name: '新浪微博',  
        pname: 'com.sina.weibo',  
        scheme: 'sinaweibo://'  
    },  
    {  
        name: '优酷',  
        pname: 'com.youku.phone',  
        scheme: 'youku://'  
    }  
]  

例子