html与app交互
1，h5唤醒app方式
参考： https://zhuanlan.zhihu.com/p/71682493
唤醒方式列表
- URL Schemes
- chrome intent
- ios UniversalLink / android appLink
常见唤醒媒介
- iframe
- a 标签
- window.location
URL Scheme
组成
[scheme:][//authority][path][?query] 比如：tuyasmart://home?test=1
是什么
URL Schemes可以理解为一种特殊的URL用来定位一个应用以及应用内的某个功能，类比网页链接便很容易理解
Schemes表示的是URL中的一个位置 - 最初始的位置，既://之前的字符，比如https://www.apple.com的Schemes就是https
通过URL Schemes, 我们就可以像定位一个网页一样，定位一个应用甚至应用内的某个具体的功能。而定位是哪个应用的，就是Schemes部分。比如短信应用的Schemes就是： sms
我们完全可以按照理解一个网页的URL来理解一个应用的URL
| | 网页（苹果）| 应用（微信）| | 网站首页/打开应用 | https://www.apple.com | weixin:// | | 子页面/具体功能 | https://www.apple.com/mac (Mac应用页) | weixin://dl/moments（朋友圈）|
注意点 - 应用是否支持URL Schemes要看App开发者有没有写那部分的代码了 - URL Schemes 不唯一
使用
使用方式十分简单，就像我们打开一个链接一样，常见的有
- location.href
- iframe
- a标签
使用中常见问题及解决方案
- 可能会被app禁掉，比如微信，qq等
- ios9+ 禁止掉了iframe方式。
- ios及部分安卓浏览器会提示用户是否打开App，并且ios在未安装对应App的时候，会提示“打不开网页，因为该网址无效”
- h5无法感知是否唤醒成功
- 大部分浏览器需要用户手动触发链接，js自动触发无效
针对被app禁止掉的情况，通常会判断是否微信等app环境，然后提示用户浏览器内打开 针对ios9+ iframe 被禁掉的情况，判断下ios版本 针对h5无法感知是否唤醒成功的解决办法是，一段时间之后自动跳转下载页，或者是依赖setTimeout在浏览器进入后台后进程切换导致的时间延迟判断。
2，html和app交互的jssdk的源码
在app中打开的页面是可以使用 url scheme跳转或者请求app的
var noop, MediaCloudJSSDK, Event, TransStatusWatch, onload; noop = function () {}; EipiJSSDK = function () { var iframe, self = this; this.debug = false; this._shakeEnable = false; this._event = new Event(); this._request = function (method, params) { var src = 'cloudjs://' + method, copyParams = {}; for (var k in params) { copyParams[k] = params[k]; } if (copyParams) { for (var key in copyParams) { if (copyParams.hasOwnProperty(key)) { if('thumbs' == key){ var _thumbs=[]; for(var i=0;i<copyParams[key].length;i++){ _thumbs.push(encodeURIComponent(copyParams[key][i])) } copyParams[key]=_thumbs; }else if('url' == key){ copyParams[key] = decodeURIComponent(copyParams[key]) }else{ copyParams[key] = encodeURIComponent(copyParams[key]); } } } src += '?params=' + JSON.stringify(copyParams); } iframe.src = src; self._event.trigger('request'); }; this._callback = function (res) { if (+res.errId !== 0) { self._event.trigger('error', res.errId); if (self.debug) { alert('errId:' + res.errId); } return; } self._event.trigger(res.method, res.data); }; this._transStatusWatch = new TransStatusWatch(this._event); iframe = document.createElement('iframe'); iframe.style.position = 'fixed'; iframe.style.left = '-9999px'; iframe.style.width = '0'; iframe.style.height = '0'; if(document.body){ document.body.appendChild(iframe); }else{ var onload = window.onload || function(){}; window.onload = function(){ document.body.appendChild(iframe); onload(); } } }; Event = function () { var _events = {}, self = this; this.on = function (name, func) { var name = name.toLocaleLowerCase().split('.'); type = name[1] || 'default'; name = name[0]; if (!_events[name]) { _events[name] = []; } _events[name].push({ type: type, func: func }); return self; }; this.off = function (name) { var i, name = name.toLocaleLowerCase().split('.'); type = name[1] || 'default'; name = name[0]; if (_events[name] && _events[name].length) { for (i in _events) { if (i !== name) continue; _events[i] = _events[i].filter(function (key, item) { return (type && type !== key); }); if (_events[i].length) { delete _events[i]; } } } return self; }; this.trigger = function (name, data) { var i, l; name = name.toLocaleLowerCase(); if (!_events[name]) return; for (l = _events[name].length, i = l - 1; i >= 0; i--) { _events[name][i].func.call(null, data); } return self; }; }; TransStatusWatch = function (event) { var callbacks = {}; event.on('transStatusQuery', function (data) { if (typeof callbacks[data.id] !== 'function') { return; } callbacks[data.id]({ status: data.status }); delete(callbacks[data.id]); }) this.add = function (id, func) { callbacks[id] = func; } } /** * 使用率较高的事件绑定函数 */ function normalEventBind(event, name, callback) { event .off(name) .on(name, function (res) { callback(res); event.off(name); }); } /** * 获取用户登陆信息 * @constructor * @param {Function} callback */ EipiJSSDK.prototype.userGetInfo = function (callback) { normalEventBind(this._event, 'userGetInfo', callback); this._request('userGetInfo'); };
3，app使用wenbview支持js接口
参考： https://blog.csdn.net/weixin_40998254/article/details/89211882
