Web化能力介绍
业务价值
web化能力实现了一套代码多端使用，不仅能在bilibili App上应用，也可以在微信，QQ，手机浏览器等webview里进行h5页面展示，很好的起到了引流的作用、优化了SEO。
小程序项目不仅可以在本地通过命令npm run dev进行h5调试，也能执行npm run web构建出一个h5的dist资源包，业务方可以上传到服务器上进行访问。
拿 demo小程序 做示例，下面是APP里打开小程序和浏览器里打开h5的截图：
小程序
H5
但是，由于环境的差异，h5上部分bl api实现、返回结果等与小程序有所不同，需要业务方做些兼容。
Web API与小程序 API的差异
bl.navigateToMiniProgram
1: 仅支持在真机内拉起app内小程序
2: 必填参数目标小程序appId未填写或参数格式不是 String、用户点击取消、未安装app均进错误回调
3: 无 success 回调
bl.getSystemInfo
success返回参数说明
Object res
| 属性 | 类型 | 说明 | 值 |
|---|---|---|---|
| brand | string | 手机品牌 | 空 |
| model | string | 手机型号 | 空 |
| pixelRatio | number | 设备像素比 | 和小程序一致 |
| screenWidth | number | 屏幕宽度 | 和小程序一致 |
| screenHeight | number | 屏幕高度 | 和小程序一致 |
| windowWidth | number | 可使用窗口宽度 | 和小程序一致 |
| windowHeight | number | 可使用窗口高度 | 和小程序一致 |
| statusBarHeight | number | 状态栏的高度 | NaN |
| language | string | app设置的语言 | 空 |
| version | string | app版本号 | 空 |
| system | string | 操作系统版本 | 空 |
| platform | string | 客户端平台 | web |
| fontSizeSetting | number | 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px | 空 |
| SDKVersion | string | 客户端基础库版本 | 空 |
bl.getSystemInfoSync
bl.getSystemInfo 同歩方法
bl.downloadFile
1: 参数url对应下载资源无大小50M以内限制；
2: 无 success 和 fail 回调，即无返回参数 tempFilePath （临时文件路径）、statusCode （开发者服务器返回的 HTTP 状态码）和 downloadTask 对象。
参数说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 |
bl.startPullDownRefresh
1: 不支持下滑手势触发调用接口
2: 调用接口后可触发下拉刷新动画，再调用bl.stopPullDownRefre完成下拉刷新
3: 目前下拉动画 icon 为 loading
4: 无 fail 回调
bl.stopPullDownRefresh
无 success 和 fail 回调
bl.setStorage
无数据存储最大为10MB限制
bl.setStorageSync
bl.setStorage 同步方法
bl.getLocation
1: 入参 type 仅支持 gcj02 类型
2: success返回参数，当返回参数类型为 Number 且无值返回时，返回 NaN
参数说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| type | string | gcj02 | 否 | |
| altitude | boolean | false | 否 | 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 |
bl.share
1: 与现有小程序分享界面不同
2: 仅支持分享至新浪微博、QQ空间、百度贴吧、QQ好友
3: 点击相应分享渠道，若需登录，仅支持网页版登陆，不会拉起相应app
4: 无 success 和 fail 回调
参数说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 是 | 分享内容的标题 | |
| decs | string | 是 | 分享内容的介绍 | |
| imgUrl | string | 是 | 分享内容的图片 | |
| url | string | 是 | 分享内容的跳转链接 |
bl.authorize
参数说明
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| scope | string | 是 | 需要获取权限的scope | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 |
scope列表
| scope | 说明 |
|---|---|
| scope.userInfo | 是否授权用户信息 |
| scope.userLocation | 是否授权地理位置 |
| scope.address | 是否授权通讯地址 |
bl.openSetting
所有 authSetting 按钮均为打开状态，切不可关闭
success返回参数说明
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| authSetting | object | 用户授权结果 |
authSetting 的结构
| 属性 | 说明 |
|---|---|
| scope.userInfo | 是否授权用户信息 |
| scope.userLocation | 是否授权地理位置 |
| scope.address | 是否授权通讯地址 |
bl.getAccountInfo
返回参数只有小程序 appId，无 VappId
success 返回参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| miniProgram | object | 小程序帐号信息 |
miniProgram 的结构
| 属性 | 类型 | 说明 |
|---|---|---|
| appId | string | 小程序 appId |
bl.getAccountInfoSync
bl.getAccountInfo 同步方法
bl.chooseAddress
无 success 和 fail 回调
bl.saveImageToPhotosAlbum
暂不支持
bl.chooseImage
暂不支持
bl.setEnableDebug
暂不支持
bl.getMenuButtonBoundingClientRect
暂不支持