Hybrid容器设计之第三方网站

时间 2019-11-05

原文原文链接

平台化容器API释放

接上文：（阅读本文前，建议阅读前三篇文章先）html

以前设计Hybrid整块交互的时候，受众都是本身的团队，没有想往“公司化”和“平台化”方向发展，而近期业务的发展逐渐超出预期了，慢慢会有第三方网站接入咱们的APP，并且第三方网站还会用一些Native的能力，这个时候以前的使用彷佛就不太合适了，所谓JS-SDK就须要存在了。ajax

相似这种需求，作的最完善的当属微信的native容器了，微信这种属于海量容器，对全部的接入方基本一视同仁，就算内部团队会有一些“特权”能力，使用方式与第三方接入都是一套体系，可能只是文档有所不一样罢了。微信容器中，最经常使用的端能力要属：后端

① 统一登陆，获取微信的登陆态&使用微信登陆，微信方给予第三方应用有限的用户信息（非JS-SDK）api

② 分享接口服务器

③ 微信支付微信

咱们今天以微信（中间可能参考其余APP平台）为范本，思考下咱们本身的容器如何处理第三方的状况。网络

咱们作这块设计以前，首先须要明确一个定位：

咱们的Native容器，应该给第三方网站提供哪些能力？

若是不加限制的提供能力，就属于“内部”项目了，如微信容器通常，对外提供的能力屈指可数，这里是咱们一个比较常见的第三方容器：

这个当history过深（不为1时）后也会产生一个关闭按钮，直接回到上一个native页面。

咱们这里约定，对于第三方网站，这些Native UI咱们都不可定制化（可是能经过释放接口配置增添菜单项目），甚至风格色彩都是不可定制的，若是哪天咱们的APP风格变了，那么第三方网站只能适配咱们的APP（虽然APP便总体风格这种事情有点操蛋，可是在中小公司仍是比较常见）

这里可定制的是：

① 标题展现

② 分享出去的文字、图片等（这块参考微信）

③ 不一样的APP这块可能会有定制化需求，这块也最好标准化，不让产品有过多的瞎想

除了登陆以外，另外一个比较经常使用的服务就是唤起支付（APP中的支付），而后APP公共页面再引导用户选择微信或者支付宝支付。

其实唤起支付属于H5跳Native（或者Hybrid）的一类，与之相似的有：

① 打开某一个native页面，比较典型的是在网页贴吧中打开一个网址若是安装了贴吧APP，会直接打开那个页面

② 这里也有多是打开第三方APP，而打开第三方APP这种功能，对于比较大的APP平台会作严格的限制

由于图片上传什么对H5来讲是一个比较麻烦的功能，彻底依赖H5可能体验很差，因而native方可能会释放一些图片操做的接口如：

① H5调用native的选取相册&图片接口

② 图片预览接口（查看大图）

③ 上传图片

④ 下载图片

有些比较特别的网站也许还会有获取当前网络状态的接口或者地理位置接口或者调用扫一扫功能（场景较少），而对于UI层面的操做又会包含关闭当前窗口（同点击关闭按钮）的接口。

全部的这些功能，咱们最初就应该设想清楚，而且清晰的知道每个接口适用于什么场景，在能力列表出来后，咱们就要作另外一个事情了：权限限制。

权限限制

微信使用了一个appid，去限制每个接入方的能力，甚至能够以收费的形式释放某些接口，能够预见，若是微信开放打开第三方App的收费功能，会有不少公司争相埋单。这种appid的行为，至关于一种统一收口的动做，虽然接入方千奇百怪，可是全部的接入方若是要使用容器的能力，甚至想在容器中展现，就必须有一个appid。

另外一方面，appid的使用其实成本比较高，前端须要额外的接口访问不说，平台方还须要提供一个第三方网站让第三方网站管理本身的应用，这个对于一些小平台甚至伪平台有一些得不偿失，咱们来简单看看一个demo：

 1 //第三方网站要用什么接口，必须先声明
 2 wx.config({
 3     debug: false,
 4     appId: 'wxf8b4f85f3a794e77',//服务器端读出
 5     timestamp: 1485169627,//服务器端读出
 6     nonceStr: 'jhGQ4jiN4CQpaGPC',//服务器端读出
 7     signature: 'a19573b7f65427a33a96f2a57a4f40075135a5b4',//服务器端读出
 8     jsApiList: [
 9         'onMenuShareTimeline',
10         'onMenuShareAppMessage',
11         'onMenuShareQQ',
12         'onMenuShareWeibo',
13         'onMenuShareQZone'
14     ]
15 });

 1 // 2. 分享接口
 2 // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
 3 document.querySelector('#onMenuShareAppMessage').onclick = function () {
 4     wx.onMenuShareAppMessage({
 5         title: '分享标题',
 6         desc: '分享描述',
 7         link: 'http://movie.douban.com/subject/25785114/',
 8         imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
 9         trigger: function (res) {
10             // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，由于客户端分享操做是一个同步操做，这时候使用ajax的回包会尚未返回
11             alert('用户点击发送给朋友');
12         },
13         success: function (res) {
14             alert('已分享');
15         },
16         cancel: function (res) {
17             alert('已取消');
18         },
19         fail: function (res) {
20             alert(JSON.stringify(res));
21         }
22     });
23     alert('已注册获取“发送给朋友”状态事件');
24 };

若是没有第一段代码的声明，第二段代码就没用；若是appid没有相关接口权限，这里就注册不了，也不能调用接口，好比咱们就能够为某一个appid赋予打开第三方app的权限，或者咱们定义某个appid具备app，其余应用能够根据打开对应app，没有的话就引导下载：

wx.openApp(appid);

这里的实现方案能够是这样，通常来讲，咱们对外释放的接口都是比较通用的，像一些私密的接口才会有白名单维护，好比咱们本身的app对应的几个图片操做接口：

 1 //选取图片接口
 2 wx.chooseImage({
 3     count: 1, // 默认9
 4     sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
 5     sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
 6     success: function (res) {
 7         var localIds = res.localIds; // 返回选定照片的本地ID列表，localId能够做为img标签的src属性显示图片
 8     }
 9 });
10 //上传图片接口
11 wx.uploadImage({
12     localId: '', // 须要上传的图片的本地ID，由chooseImage接口得到
13     isShowProgressTips: 1, // 默认为1，显示进度提示
14     success: function (res) {
15         var serverId = res.serverId; // 返回图片的服务器端ID
16     }
17 });
18 //预览图片接口
19 wx.previewImage({
20     current: '', // 当前显示图片的http连接
21     urls: [] // 须要预览的图片http连接列表
22 });

其中预览我把他做为私密接口不予释放，须要特定的appid才能使用，就能够这样：

 1 //1表明公共接口,0表明私密接口
 2 var apilist = {
 3     'chooseImage': 1,
 4     'uploadImage': 1,
 5     'previewImage': 0
 6 };
 7 //全部的应用id
 8 var appids = [1, 2, 3, 4];
 9 //白名单
10 var whitList = [{1: ['previewImage', '其余私密能力']}];

实话实说维护一个appid，这样作的成本比较高，单单作appid和秘钥对于调用者来讲也挺麻烦，对于有些比较小的平台来讲，能够采起域名白名单的方法，后端维护一个列表：

1 //域名白名单
2 var whitList = [
3     {'domain.com': ['previewImage', '其余私密能力']},
4     {'domain2.com': ['previewImage', 'uploadImage', '其余私密能力']}
5 ];

这种方法比较作起来成本较低，一些小一点的平台能够这样作，而这样作的话，须要考虑每一个域名对应的App打开协议，可能会有打开需求，咱们这里采用的比较简单的方案，域名白名单，表设计大概这样：

1 var whitList = [
2     {id: 'domain.com', apis: ['previewImage', '其余私密能力'], schema: 'xxxx://'},
3     {id: 'domain2.com', apis: ['previewImage', 'uploadImage', '其余私密能力'], schema: 'xxxx://'}
4 ];

咱们明确知道某个域名具备哪些能力，若是不具备这些能力就不予理睬，咱们也知道某个域名具备打开某个app的权限。

能力列表

明确了能力，以及能力限制，接下来咱们便来整理一下几个核心的对外接口。

header的定义

咱们这里作的第一件事情，依旧是header的定义，而且对于第三方，咱们要求header只能是这个样子：

针对header咱们有如下约定：

① 进入一个页面默认包含，返回+title+功能菜单三个按钮

② 返回按钮默认执行history.back()的操做，若是history.length为1，则退到native上一步操做

③ title默认读取html中的title标签，可以使用接口更改

④ 关闭按钮默认不存在，在history比较深而且点击过一次返回按钮后展现出来，防止页面死循环假死

⑤ 功能菜单默认弹出如下菜单项，其中分享文案默认读取当前tdk（title+description）标签，和第一张图片，也可读取页面标签订制（也可使用接口定制，事实上容器不会作这种业务工做，是业务框架层bridge作的工做），好比：

1 <meta name="med-title" content="分享标题">
2 <meta name="med-description" content="分享内容">
3 <meta name="med-link" content="http://....">
4 <meta name="med-img" content="http://....">

咱们业务层代码，或者bridge代码会将之翻译为：

 1 wx.onMenuShareTimeline({
 2     title: medTitle,
 3     link: medLink,
 4     imgUrl: medImg,
 5     trigger: function (res) {
 6     },
 7     success: function (res) {
 8     },
 9     cancel: function (res) {
10     },
11     fail: function (res) {
12     }
13 });

分享到朋友圈&QQ空间

分享到朋友圈前端代码为：

 1 MED.origin = MED.origin || {};
 2 //shareTimeline分享到朋友圈;shareAppMessage分享给朋友;shareQQ分享给qq好友;shareQZone分享到空间，设置方面稍做更改便可
 3 MED.origin.medShareXXX = MED.medShareXXX = function (o) {
 4     _.requestHybrid({
 5         tagname: 'shareTimeline',
 6         param: {
 7             title: o.title,
 8             desc: o.desc,
 9             image: o.img,
10             url: o.link
11         },
12         callback: function(data) {
13             if(data.code === 0) {
14                 o.success &&  o.success(data.data);
15             } else {
16                 o.cancel &&  o.cancel(data.data);
17             }
18         }
19     });
20 };

H5上传图片方面的体验不好，这块咱们在H5状况下依旧使用file上传，可是在容器里面释放几个图片操做接口

图片操做

 1 //选取图片，最初想把选取和上传合并的，后面想一想仍是分开合适
 2 _.requestHybrid({
 3     tagname: 'chooseImage',
 4     param: {
 5         //1-9张限制
 6         count: 1,
 7         sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
 8         sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
 9     },
10     callback: function(data) {
11         if(data.code === 0) {
12             //这块有一些疑问,选择和上传仍是连着一块儿算了
13             o.success &&  o.success(data.data.localIds); // 返回选定照片的本地ID列表，localId能够做为img标签的src属性显示图片;
14         } else {
15             o.error &&  o.error(data.data);
16         }
17     }
18 });
19 
20 //上传图片
21 _.requestHybrid({
22     tagname: 'uploadImage',
23     param: {
24         //由chooseImage获取
25         localId: 1,
26         isShowProgressTips: 1 // 默认为1，显示进度提示
27     },
28     callback: function(data) {
29         if(data.code === 0) {
30             o.success &&  o.success(data.data.url); // 返回src;
31         } else {
32             o.error &&  o.error(data.data);
33         }
34     }
35 });
36 
37 //图片预览,预览的地方作个图片下载的功能
38 _.requestHybrid({
39     tagname: 'previewImage',
40     param: {
41         current: '', // 当前显示图片的http连接
42         urls: [] // 须要预览的图片http连接列表
43     }
44 });

获取网络状态

1 //获取网络状态
2 _.requestHybrid({
3     tagname: 'getNetworkType',
4     callback: function(data) {
5         //data.networkType 2g 3g 4g wifi
6     }
7 });

地图操做

Native的地理操做一块相对H5体验要好一些，特别是地图展现一块的体验要好得多，因此这两块也须要释放API：

 1 //获取经纬度信息
 2 _.requestHybrid({
 3     tagname: 'getLocation',
 4     callback: function(data) {
 5         if(data.code !== 0) return;
 6         var res = data.res;
 7         var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
 8         var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
 9         var speed = res.speed; // 速度，以米/每秒计
10         var accuracy = res.accuracy; // 位置精度
11     }
12 });
13 
14 //根据经纬度等信息打开native地图
15 _.requestHybrid({
16     tagname: 'openLocation',
17     params: {
18         latitude: 0, // 纬度，浮点数，范围为90 ~ -90
19         longitude: 0, // 经度，浮点数，范围为180 ~ -180。
20         name: '', // 位置名
21         address: '', // 地址详情说明
22         scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
23         infoUrl: '' // 在查看位置界面底部显示的超连接,可点击跳转
24     }
25 });

所谓的name和地址是指下面信息框这一坨：

界面操做

关闭当前webview，回到native上一次操做：

1 _.requestHybrid({
2     tagname: 'closeWindow'
3 });

native键盘

H5在文字输入一块能够说是弱爆了，比Native体验差远了，因此咱们在native键盘这块也作了一个nativeUI，若是需求容许可使用：

 1 //唤起输入文字的软键盘
 2 //这块代码有一些业务耦合,须要如何处理下????
 3 _.requestHybrid({
 4     tagname: 'showKeyboard',
 5     param: {
 6         hasImg: 1, //是否须要上传图片区域,若是须要则为1,不须要为0
 7         count: 1, //若是须要图片上传,这里限制图片选择的数量,1-9
 8         sizeType: ['original', 'compressed'], // 能够指定是原图仍是压缩图，默认两者都有
 9         sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
10         textMin: 20, //文字要求最少输入字符数
11         textMax: 500 //文字要求最多输入字符数
12     },
13     //输入结束的回调或者说点击发送时候的回调
14     callback: function (data) {
15         var content = data.content;//文字内容
16         var urls = data.urls;//图片地址
17     }
18 });

结语

今天分析了一下第三方webview须要释放的接口，接下来我这边开始落地，咱们真实工做中可能还要考虑新老容器过渡等问题，本文含金量相对较小，各位谨慎阅读吧。