@bbtfe/native

封装了 H5 页面与原生 APP 交互的方法

引用方式

npm 引用

npm i @bbtfe/native

import bbtNative from '@bbtfe/native';

script 引用

<script src="//h5cdn.babytreeimg.com/h5_fe_lib/release/native/0.3.12/index.js"></script>
<script src="//h5cdn.babytreeimg.com/h5_fe_lib/release/native/0.3.12/index.min.js"></script>

使用 API

App 内加载完 webview 时，会调用 pageLoadFinish 这个方法，封装到这个方法中:bbtNative.ready, 其他调用方法，都需要在 ready 方法中才能使用

bbtNative.ready(() => {
  console.log('页面加载完成，可以使用原生方法了');
});

调用原生方法：window.USER_INFO

bbtNative.userinfo;

根据 window.USER_INFO 是否返回了 login_string, 判断用户是否登录

bbtNative.isLogin();

判断是否在 APP 中，该方法不区分时光和孕育

bbtNative.isApp();

调起原生登录 nativeLogin('ask_reload_webview', 'ask_reload_webview');

bbtNative.login();

原生加密方法加密 nativeGetApiEncryption(data); 加密回调方法 window.nativeGetApiEncryptionFinishCall=function(data){}

// 参数1:object; 参数2:回调方法
bbtNative.encryptApi({ name: '' }, callback);

获取 App（孕育或时光）信息, 从加密后的参数中取到的 id 和 version , 不推荐使用这个方法

bbtNative.appinfo;

设置 Title Bar 中的标题 nativeSetTitle（'Hello, Title'）

bbtNative.setTitle('Hello Title');

打开新的 webview: adAction(title, url);

bbtNative.openWebview('', 'https://m.babytree.com');

关闭当前 webview: nativeWebviewClose();

bbtNative.closeWebview();

原生查看大图 nativePhotoBrowse(src)

// src为http或https协议的图片url
bbtNative.previewImage(src);

显示 Title Bar 分享按钮 showShareButton(‘yes')

bbtNative.showShareButton();

隐藏 Title Bar 分享按钮 showShareButton(‘no')

bbtNative.hideShareButton();

设置分享 Card 内容 window.share

// 调用原生分享钱，一定先设置分享card内容
bbtNative.setShareContent({
  url: '',
  title: '',
  content: '',
  imageUrl: '',
  onShared: (tyhpe, status) => {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

设置分享 Card 内容 window.share 新增了 isSame 参数，注意区分传参

// 0.2.0新增参数：isSame为true时，参数需完全按照原生的参数传入
bbtNative.setShareContent({
  isSame: true, // 0.2.0新增参数：isSame为true时，参数需完全按照原生的参数传入
  share_url: 'http://m.babytree.com/community/group42064/topic_49220389.html',
  share_title: '分享share_title',
  share_content: '分享share_content',
  image_base64:
    'http://pic02.babytreeimg.com/foto3/thumbs/2015/1208/31/3/29008e5535dd2f064d04d9_ss.jpg',
  onShared: function (type, status) {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

设置分享图片

// 方法1
bbtNative.setShareContent({
  type: 'picture',
  imageBase64:
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAUCAYAAABbLMdoAAAABGdBTUEAALGPC/xhBQAAAKhJREFUKBWN0jEOwyAMBVCM2DP1FD1Cpg4MjDlpp4oxU46QU3TqjkT9URQJxQ72EEXifQthU4zx45ybQghLzvnL/2p5PplqrXMpZU0pPVTJBx4diWjnwHMUIHRCR0AEEOQGL+lKDVsDJ7YEOjwKXPBdQMRaQMVCYMNQzKV2lt5exBLEkC5Yg7hrh+9gh0fwxBbYsBUCe17N92g1AVEYyo93eNN2uKnj8wf21sSNpp2ADAAAAABJRU5ErkJggg==',
  onShared: function (type, status) {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

// 方法2
bbtNative.setShareContent({
  isSame: true,
  share_type: 'shareSinglePicture',
  image_data_base64:
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAUCAYAAABbLMdoAAAABGdBTUEAALGPC/xhBQAAAKhJREFUKBWN0jEOwyAMBVCM2DP1FD1Cpg4MjDlpp4oxU46QU3TqjkT9URQJxQ72EEXifQthU4zx45ybQghLzvnL/2p5PplqrXMpZU0pPVTJBx4diWjnwHMUIHRCR0AEEOQGL+lKDVsDJ7YEOjwKXPBdQMRaQMVCYMNQzKV2lt5exBLEkC5Yg7hrh+9gh0fwxBbYsBUCe17N92g1AVEYyo93eNN2uKnj8wf21sSNpp2ADAAAAABJRU5ErkJggg=='.replace(
      /^data:image\/(?:jpeg|jpg|png|gif);base64,/,
      ''
    ),
  onShared: function (type, status) {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

设置分享小程序

bbtNative.setShareContent({
  isSame: true,
  share_type: 'knowledge',
  mini_username: 'gh_b52a0b058b71',
  mini_path: '/pages/knowview/index?id=7260',
  mini_img_url:
    'http://pic02.babytreeimg.com/foto3/thumbs/2015/1208/31/3/29008e5535dd2f064d04d9_ss.jpg',
  onShared: function (type, status) {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

打开分享面板 shareAction()

// 需传参 onShared回调方法，才可以成功调用分享成功事件
// 右上角的原生分享按钮，也需传参onShared回调才生效；
bbtNative.share({
  onShared: (tyhpe, status) => {
    console.log(
      '分享成功回调方法的返回值：type:' + type + '; status: ' + status
    );
  }
});

直接分享到不同的端 原生方法:window.shareSinglePlatform('qq'); ios 调用分享到不同的端，需要先获取安装了哪个能分享的端： window.installSharePlatform = function (data) { window.sharePlatform = data; //返回值'wxsession,wxtimeline,qq,qzone,sina' };

// 微信，朋友圈，qq，空间，微博
// wxsession, wxtimeline, qq, qzone, sina
bbtNative.share({
  target: 'wxsession'
});

网页拨打电话 nativeCallByNumber('15...')

bbtNative.call('+86 10 6113 8080');

从本地上传照片，返回 photoid 和 url, 原生方法 catchPhoto('', '', '') 回调方法：window.catchPhotoFinishCall = function (tag, photo_id, middle_url) {}

bbtNative.catchPhoto({
  callback: function (data) {
    console.log('catchPhoto回调:', data);
  }
});

将照片上传到七牛，最少一张，最多 9 张, 原生方法：uploadPhoto

bbtNative.uploadPhoto({
  max: 5,
  callback: function (data) {
    console.log('upload-photo:上传七牛照片', JSON.parse(data));
  }
});

通过 uri 启动页面 openScheme

bbtNative.openScheme({
  scheme: 'bbtrp://com.babytree.pregnancy/home/homepage', // 跳转路由
  callback: function (res) {
    // 成功的回调
    console.log('打开页面：', res);
  }
});

二维码扫描来绑定用户 openQRScanner4BindUser()

bbtNative.openQRScanner4BindUser(function (state, url) {
  console.log('扫描二维码绑定用户', state, url); // 返回state和url字段
});

与客户端同步绑定关系 updateBindUserStateSuccess('1')

// 用户接受绑定成功'1'、解绑成功'2'、删除宝宝'3'
bbtNative.updateBindUserStateSuccess('1');

获取设备信息 getDeviceInfo()

bbtNative.getDeviceInfo(function (res) {
  console.log(res.result);
});

将 base64 位编码的图片下载到本地相册 downloadBase64ImageToNativeAlbum(base64)

bbtNative.downloadBase64ImgToAlbum(base64, function (res) {
  console.log(res);
});

通知客户端更新任务状态 updateRemindTaskStatus(id, status)

bbtNative.updateRemindTaskStatus('1', 1);

在 app 中打开小程序 openMiniProgram(mini_path,mini_username)

bbtNative.openMiniProgram(
  'pages/details/index?id=3333&share=1',
  'gh_7446aad5912f'
);

获取阿里 ab 桶信息 客户端方法：getAliABTest() 回调方法： window.getAliABTestCallBack=function (type, sampleId) {} // type：试验号；sampleId：桶号

bbtNative.getAliABTest(function (type, sampleId) {
  console.log('获取阿里分桶信息', type, sampleId);
});

加入主题弹框 launchAddThemePage(contentId,contentType,status)

// 参数都string类型
// contentId ： 内容id
// contentType ： 内容类型 1-达人文章 2-帖子 3-知识 4-问答 5-专家答 6-妈妈看 7-专家开讲 8-关注人发布文章 9-关注人发布帖子 10-关注人回答问题 11-关注人转发文章 12-关注人转发帖子 13-关注人转发知识 14-关注人转发问答 15-首页达人 16-主题主页可能感兴趣的人
// status: '0'未收藏；'1'已收藏   //8.8.0加的这个参数
bbtNative.launchAddThemePage(contentId, contentType, status);

相关主题弹框 launchRelativeThemePage(contentId,contentType) // 参数都 string 类型 // contentId ： 内容 id // contentType ： 内容类型 1-达人文章 2-帖子 3-知识 4-问答 5-专家答 6-妈妈看 7-专家开讲 8-关注人发布文章 9-关注人发布帖子 10-关注人回答问题 11-关注人转发文章 12-关注人转发帖子 13-关注人转发知识 14-关注人转发问答 15-首页达人 16-主题主页可能感兴趣的人

bbtNative.launchRelativeThemePage(contentId, contentType);

评论模块交互方法 原生方法 ios：nativeLaunchReply(option); 原生方法 android: nativeLaunchReply(JSON.stringify(option)); 回调方法：window.nativeLaunchReplyCallBack = function (opt) {}

bbtNative.nativeLaunchReply(
  {
    type: 'post', //String, 发送请求的方式：post || get
    maxlength: 200, //int, 最多输入字数
    placeholder: '请输入评论内容', //String
    value: '这里传入点击取消时，输入框中的文案', //String  客户端还未实现，备用
    url: '/app/pregnancy/knowledge/create_comment_ajax', //api请求地址
    contentName: 'content', //评论发布框中发布内容的key值
    data: {
      questionId: 1, //int
      answerId: 1, //int
      replayId: 1, //int
      knowledge_id: '',
      login_string: ''
    }, //data,   api需要传的参数都放到这里，不需要的不放
    expression: 0, //int; 1，可发表情；0，不可发表情
    img: 0, //int; 1，可发图片；0，不可发图片
    audio: 0 //int; 1，可发音频；0，不可发音频
  },
  function (opt) {
    console.log('评论成功回调', opt);
    /*	
	// opt = {
		// status: '',  //1,ajax成功；2，ajax失败；3，取消
		// text: '',   //输入框中的内容
		// json: '' //ajax返回来的json
	// }
	*/
  }
);

获取美囤 token: getMeitunToken()

bbtNative.getMeitunToken(function (res) {
  console.log('获取美囤token', res);
});

获取地理位置信息 客户端方法：nativeLocation() 回调方法：window.nativeLocationCallBack = function ({status,longitude,latitude}) {}

// status: 是否开启定位的js方法， 1已开启，0未开启
// longitude: 经度
// latitude:纬度
// 返回参数都是字符串
bbtNative.nativeLocation(function ({ status, longitude, latitude }) {
  console.log('获取地里位置', status, longitude, latitude);
});

会客厅好运卡弹窗 nativeLuckPopup({data}) // data：好运卡数据对象

8.11.0 版本及以后，修改为 3 个参数 nativeLuckPopup(data, status, uid) data：好运卡数据对象； status: 字符串，1，自己；2，他人;
uid：字符串， 被访问者的 uid, 用于跳转到其他会客厅页面的时候，追加到 url 后面&uid=

// 封装的方法bbtNative.nativeLuckPopup, 只支持8.11.0及之后版本
bbtNative.nativeLuckPopup({ data: {}, status: ''2, uid: '' });

获取美囤收货地址 客户端方法：openMeitunReceivingAddress() 回调方法：window.openMeitunReceivingAddressFinish = function(data){}

bbtNative.openMeitunReceivingAddress(function (res) {
  console.log(res);
});

是否侧滑返回 客户端方法：nativeSwipeBack(status); status: 0 禁止

bbtNative.客户端方法：nativeSwipeBack(status);

会客厅项目中获取邻居的信息 客户端方法：getNeighborInfo(value1, value2); 回调方法：window.nativeNeighborCallBack = function(res) {} value1: "1" value2: "2"

bbtNative.getNeighborInfo(value1, value2, function (res) {
  console.log(res);
});

刷新客户端爱心值数据 客户端方法：nativeUpdateEnergy(value, id) value: 收取的爱心值 id: 访问者 uid

bbtNative.nativeUpdateEnergy(value, id);

关闭所有会客厅相关页面 客户端方法：nativeParlorClose()

bbtNative.nativeParlorClose();

知识收藏互通方法 客户端方法：nativeCollectStatus('0'); 参数 string 类型 status: '0'未收藏；'1'已收藏 回调方法:nativeCollectStatusCallBack（status） = function () {}

// status:string; callback: 回调方法
nativeCollectStatus(status, callback);

获取 cms 分桶信息 客户端方法：getCmsABTest() 回调方法：window.getABTestCallBack = function(isCms){} isCms: 0,非新框架，1，新框架

bbtNative.getCmsABTest(function (isCms) {
  console.log(isCms);
});

孕育百科关键字弹层 客户端方法：nativeGetEncyclopedia(id); id: 知识中关键字点击 id 回调方法：window.nativeGetEncyclopediaFinishCall = function(id, title, content){}

bbtNative.nativeGetEncyclopedia(id, function (id, title, content) {});

视频播放 客户端方法：videoPlay(id) id:参数是 cc 视频 id 或者七牛视频 url

bbtNative.videoPlay(id);

以下方式是 0.2.1 新增方法

跳转妈妈看详情页 客户端方法：motherWatchAdAction(id, url) 参数：(String shareId, String url)

bbtNative.motherWatchAdAction(id, url);

打开本地工具 客户端方法：openNativeTool(type, name, url) 参数：(int type, String name, String url)

bbtNative.openNativeTool(type, name, url);

H5 页面插入阿里推荐视图 客户端方法： loadWebViewATAD(type, id) @param pageType 视图类型 @param divId 往该 div 位置插入

bbtNative.loadWebViewATAD(type, id);

以下方式是 0.2.2 新增方法

获取网络信息 客户端方法：nativeGetNetState()

bbtNative.nativeGetNetState();

点赞点踩 素材位 id（int）、内容类型（int）、内容 id（String），素材位 id 目前测试环境我创建了 478（踩）和 477（赞> ）用来测试，线上会不一样，内容类型（1 是文章。2 是知识。3 是工具。4 是帖子），内容 id 就是相应的 id nativeBafFBFeedBack(materialId, contentType, contentId) 客户端方法: nativeBafFBFeedBack(materialId, contentType, contentId) @param 素材位 id（int） @param 内容类型（int) @param 内容 id（String)

bbtNative.nativeBafFBFeedBack(materialId, contentType, contentId);

分享小程序 客户端方法：window.shareWeixinMini(mini_title, mini_id, mini_path, share_url, share_imgUrl);

bbtNative.shareWeixinMini(
  mini_title,
  mini_id,
  mini_path,
  share_url,
  share_imgUrl
);
// mini_title:  {string} 分享标题，默认值为document.title
// mini_id:  {string}  必传，小程序的id
// mini_path:  {string}  要跳转的小程序的url
// share_url:  {string}  分享的h5的url，为了兼容不支持小程序的旧版本微信，如果没有对应h5，就传空字符串
// share_imgUrl:  {string}  分享图片的url

音频相关方法

音频回调方法 音频播放状态方法, 客户端调用前端方法：window.nativeResponseAudioStatus 音频播放进度方法, 客户端调用前端方法：window.nativeResponseAudioProgress

bbtNative.nativeAudio.init({
  audioStatusCB: ({ audio_flag, id, type, path, status }) => {
    console.log(audio_flag, id, type, path, status);
  },
  audioProgressCB: ({
    audio_flag,
    id,
    type,
    path,
    progress,
    position,
    duration
  }) => {
    console.log(audio_flag, id, type, path, progress, position, duration);
  }
});

音频相关操作方法

加载音频方法 客户端：window.nativeAudioLoad(audio_flag, audio_list, position);

bbtNative.nativeAudio.load(audio_flag, audio_list, position);

播放音频方法 客户端：window.nativeAudioPlay(audio_flag, audio_list, position);

bbtNative.nativeAudio.play(audio_flag, audio_list, position);

暂停音频方法 客户端：window.nativeAudioPause(audio_flag, id, type, path);

bbtNative.nativeAudio.pause(audio_flag, id, type, path);

音频进度调整方法 客户端：window.nativeAudioSeek(audio_flag, id, type, path, position);

bbtNative.nativeAudio.seek(audio_flag, id, type, path, position);

隐藏当前页面的悬浮窗方法 客户端：window.nativeAudioWindowHide();

bbtNative.nativeAudio.hideAudioWindow();

显示当前页面的悬浮窗（如果有悬浮窗可以展示的话） 客户端：window.nativeAudioWindowShow();

bbtNative.nativeAudio.showAudioWindow();

检测当前业务的播放状态 ， 客户端收到后会回调函数：nativeResponseAudioStatus 客户端：window.nativeAudioCheckStatus(audio_flag);

bbtNative.nativeAudio.checkStatus(audio_flag);

使原生音频视频失去焦点 客户端：window.nativeAudioFocusLoss();

bbtNative.nativeAudio.focusLoss();

设置本地 push 客户端： window.nativePushAction(config); 前端的使用

window.bbtNative.nativePushAction({
  config: {
    id: 'goodluck', //本地push的ID 唯一
    push_action: '1', //本地push开关 1 开 0关
    time: time, //时间戳
    title: '每日好运', //push标题
    content: '赶紧去领取今日的日签吧！', //push 内容
    url: 'bbtrp://com.babytree.pregnancy/home/homepage', //路由
    repeat_type: '1' //是否每天重复
  },
  callback: () => {
    window.bbtNative.closeWebview();
  }
});

获取本地 push 客户端： window.getNativePushAction(config); 前端的使用

window.bbtNative.getNativePushAction({
  id: 'goodluck', //本地push的ID 唯一
  callback: data => {
    // data 本地push状态 参考nativePushAction
    // repeat_type为 1 会获取所有状态 repeat_type为 0 表示未设置  repeat_type不存在 表示app获取异常
  }
});

打开全局弹层 客户端：window.notifyH5OpenFloatingWindowAuth(); 前端的使用

window.bbtNative.openFloatingWindowAuth();
window.bbtNative.getFloatingWindowAuthState(isHaveAuth => {
  console.log(isHaveAuth);
});
window.bbtNative.notifyH5OpenFloatingWindowAuth(isOpen => {
  console.log(isOpen);
});

获取 APP 推送权限 前端的使用

window.bbtNative.getAppPushAuthAction(isHaveAuth => {
  console.log(isHaveAuth);
});

设置 APP 状态栏 前端的使用

// @param {*} status  0: 「iOS状态栏黑色,android不隐藏状态栏」  1:「iOS状态栏白色,android隐藏状态栏」
window.bbtNative.nativeStatusBarAction(status);

退出登录态 前端的使用

window.bbtNative.forcedLogoutAccount();