改造一个项目上 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……

// 默认截屏全屏
const obj = {
 top: '0px',
 left: '0px',
 width: '100%',
 height: '100%'
}
// 动态获取时间作为文明标识
function getDateStr() {
 return String(Date.parse(new Date()));
}
/**
 * @params {function} successCB 必填的成功回调
 * @params {function} errorCB 失败回调
 * @params {string} fileName 文件名
 * @params {string} imgID 图片 id
 * @params {boolean} overwrite 是否覆盖已有文件
 * @params {string} format 格式
 * @params {number} quality 成图质量
 * @params {object} clip 截屏区域
 */
function save(successCB, errorCB = () => {}, fileName = getDateStr(), imgID = getDateStr(),
 overwrite = true, format = 'png', quality = 50, clip = obj) {
 const cw = plus.webview.currentWebview();
 const bitmap = new plus.nativeObj.Bitmap(imgID);
 //绘制截图
 cw.draw(bitmap, function() {
 // 保存Bitmap图片
 bitmap.save('_doc/' + fileName + '.' + format, {
 overwrite,
 format,
 quality,
 clip
 }, function(i) {
 //保存到系统相册
 plus.gallery.save(i.target, function(details) {
 //销毁Bitmap图片
 bitmap.clear();
 successCB({
 success: 'success',
 details,
 });
 }, function(e) {
 //销毁Bitmap图片
 bitmap.clear();
 errorCB({
 error: '图片保存至相册失败',
 details: e
 });
 });
 }, function(e) {
 bitmap.clear();
 errorCB({
 error: '图片保存失败',
 details: e
 });
 });
 }, function(e) {
 errorCB({
 error: '截屏绘制失败',
 details: e
 });
 });
}
// 调用保存
function clickSave() {
 save(function() {
 alert('保存成功，请前往相册分享');
 })
}

者 | Derek Yeung

编辑 | Nodejs技术栈

转发链接：https://mp.weixin.qq.com/s/C3PUMDlQxbndar9oHXixWg