容器上的开发,运行在微信与支付宝的地盘上

日期: 25 Dec 2018   

bnorth 开发的 web app 是运行在 web 容器上的网页应用,容器提供了标准 html 定义的浏览器 api。同时 web app 也可能运行在微信或者支付宝等其他容器上,微信与支付宝都提供了平台相关的 api 能力。在使用平台能力时,由于一些注入的 api 存在使用时序问题,部分 api 还需要签名认证,异步操作较为麻烦,为此 bnorth 对容器提供的能力,以 browser 插件方式提供了封装,提供了统一方便的调用方式。

标准浏览器 api

标准的浏览器 api 提供了对容器的操作,cookie 操作,本地存储的操作和历史的操作等,点击参考文档

微信 api

微信的 api 提供了一些移动设备本地能力,比如拍照,定位等,以及一些微信平台提供的特色能力,比如支付等,具体参见 微信JS-SDK说明文档

微信容器为页面注入了 api ,页面通过 window.WeixinJSBridge 对象访问微信提供的能力,不妨称为 bridge 调用方式。后期微信对 WeixinJSBridge 进行封装,提供了 wx 的调用方式,不妨称之为 sdk 方式。

sdk 方式的能力列表是 bridge 方式的超集,而且 sdk 方式提供了统一的标准化的调用接口。但是 sdk 方式需要引入 js 文件,而且需要申请公众号和认证权限。

支付宝 api

支付宝的 api 提供了一些移动设备本地能力,比如拍照,定位等,以及一些微信平台提供的特色能力,比如支付等。

支付宝容器为页面注入了 api ,页面通过 window.AlipayJSBridge 对象访问微信提供的能力,不妨称为 bridge 调用方式,具体参见 蚂蚁金服支付宝H5开放文档。支付宝 10.0 版本以上还提供了 sdk 调用方式,规范了调用方式和参数,具体参见 AlipayJSAPI。 sdk 方式实际是对 bridage 方式的封装,需要引入特定的 js 文件。

容器插件

插件提供了容器的初始化和标准化的接口调用。

浏览器插件

浏览器插件提供了标准的浏览器能力调用接口,比如设置浏览器标题,图标,存储 cookie 异步加载 js 文件等,具体参见 browser 插件

app.plugins.add(require('@bnorth/plugin-browser').default);

微信插件

微信插件提供了微信平台的能力接口调用,具体参见 微信插件。由于微信的 sdk 调用方式,需要公众号认证,因此使用前首先需要申请公众号。然后在认证过程,为了防止公众号信息泄密,一般来说服务器提供接口,获取认证的签名。在微信插件安装时,需要设置 getSignature 参数,该参数是一个返回 promise 对象的回调函数,需要返回微信公众号对当前地址生成的签名信息,供 sdk 认证使用。

app.plugins.add(require('@bnorth/plugin-browser/lib/wechat').default, {getSignature: url=>({})});

插件提供了 bridge 和 sdk 两种方式的底层调用方式,统一为 api 名称和 api 参数,返回值均为 promise 对象,返回内容可能不同具体参见文档。例如:

app.wechat.invokeBridge('chooseImage', {count: 4}).then(result=>{
  if(result.err_msg == "chooseImage:ok"){
    console.log(result.localIds); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  }else if(result.err_msg == "chooseImage:cancel"){
    console.error('cancel');
  }else if(result.err_msg == "chooseImage:fail"){
    console.error('fail');
  }
})

app.wechat.invokeSdk('chooseImage', {count: 4}).then(result=>{
  console.log(result.localIds); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}).catch(error=>{
  console.error(error);
})

同时还对常用的 api 封装成函数,方便调用。第一个参数为调用参数,第二个参数为是使用 bridge 方式还是 sdk。仅是对以上方法的封装,返回值相同。

app.wechat.chooseImage({count}, false).then(result=>{
  console.log(result.localIds); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}).catch(error=>{
  console.error(error);
})

支付宝插件

支付宝插件提供了支付宝平台的能力接口调用,具体参见 支付宝插件

app.plugins.add(require('@bnorth/plugin-browser/lib/alipay').default, {});

插件提供了 bridge 和 sdk 两种方式的底层调用方式,可通过参数决定 api 名称和参数,返回值为 promise 对象。 同时还对常用的 api 封装成函数,方便调用。