ZH-SDK API

说明

• npm 安装命令

  npm install zh-jsbridge-sdk

• zh-sdk.js 为正和岛APP 内部 H5开发 使用。

• 框架提供 native API, 提供原生组件调用、layout设置、路由等能力

• 暴露在全局中的 namespace 为 window.zh

• 所有api均返回Promise对象实例，用以处理callback。详情请参考 es6 Promise对象

ready(已废弃)

ready(function)

预先调用zhAPI。zh对象为异步注入，如果需要在页面loaded时调用API,为了确保正确执行，请放在ready函数内部执行。

• 用法

      zh.ready(function(){
          zh.setNavigationBarTitle('导航栏')
      })

• 必填

  • 是

navigationBar导航栏

setNavigationBarTitle(String)

动态设置当前页面的导航栏标题

• 参数：

  • title {String}

• 用法

  • zh.setNavigationBarTitle('正和岛')

• 必填

  • 是

setNavigationBarFontColor(String)

动态设置当前页面的导航栏标题颜色

• 参数：

  • color {String}
  • RGB颜色字符串 ‘0xFFFFFF’ 或 '#FFFFFF'

• 用法

  • zh.setNavigationBarFontColor('0xFFFFFF')

• 必填

  • 是

setNavigationBarFontSize(Number)

动态设置当前页面的导航栏标题字号

• 参数：

  • size {Number}

• 用法

  • zh.setNavigationBarFontSize(14)

• 必填

  • 是

setNavigationBarBackgroundColor(String)

动态设置当前页面的导航栏背景颜色

• 参数：

  • color {String}
  • RGB颜色字符串 ‘0xFFFFFF’ 或 '#FFFFFF'

• 用法

  • zh.setNavigationBarBackgroundColor('0xFFFFFF')

• 必填

  • 是

setNavigationBarBackgroundImage(String)

动态设置当前页面的导航栏背景图片

• 参数：

  • imageType {String}
  • 值 未定

• 用法

  • zh.setNavigationBarBackgroundImage('未知')

• 必填

  • 是

setStatusBarStyletype(String)

动态设置导航栏上方系统状态栏样式风格

• 参数：

  • style {Number}
  • 0: 黑色 1:白色

• 用法

  • zh.setStatusBarStyletype(0)

• 必填

  • 是

setNavigationBar(object)

动态设置当前页面的导航栏 标题、标题字号、标题颜色及背景颜色

• 参数：

     {
         title: String,
         fontSize: String,
         color: String,
         backgroundColor: String,
         backgroundImage String，
         statusBarStyletype: Number,
     }

  • RGB颜色字符串 ‘0xFFFFFF’ 或 '#FFFFFF'

• 用法

     zh.setNavigationBar({
         title: '正和岛',
         color: '0xFFFFFF',
         fontSize: 12,
         backgroundColor:  '0xFFFFFF',
         backgroundImage: '未定',
         statusBarStyletype: 0,
     })

• 必填

  • 至少一项

leftButton导航栏左侧按钮相关

setBackButtonStyletype (String)

设置 后退按钮 样式

• 参数：

  • navBtnType {String}
  • 'navBack'(默认) , 'navBackWhite'

• 用法

  • zh.setBackButtonStyletype('navBackWhite')

• 必填

  • 是

setCloseTextFontColor (color)

设置 关闭层按钮 文字颜色 (关闭按钮 在页面重定向二次以上并触发一次后退行为后 出现在backBtn 右侧未知)

• 参数：

  • color {String}
  • 0x000000 或 #000000

• 用法

  • zh.setCloseTextFontColor('#000000')

• 必填

  • 是

rightButton导航栏右侧按钮相关

showTxtRightButton (object, function)

创建导航栏按钮（右侧）定义 按钮显示文字和点击触发的事件

• 参数

      (
          buttonConfig: {
              txt : String, 按钮文案
              color : String, 常规颜色 色值 '#333333' or '0x333333',
              tapColor : String, 手势颜色 色值 '#333333' or '0x333333',
          },
          event: Function,
      )

• 用法

      zh.showTxtRightButton({
          txt:'发布机会',
          color: '#333333',
          tapColor: '#333333',
      }, function (){//event 无参数
          //发布机会相关代码
      })
  
      //不设置颜色 可简写为
      zh.showTxtRightButton('发布机会', function (){//event 无参数
          //发布机会相关代码
      })

• 必填

  • txt 是
  • color 否
  • tapColor 否
  • event 是

showGraphicalButton (string, function)

创建导航栏按钮（右侧）定义 按钮显示icon和点击触发的事件

• 参数

      (
          buttonType: String, // ['navBack', 'navShare', 'navAdd', 'navSearch', 'navClose', 'navMore']
          event: Function,
      )

• 用法

      zh.showGraphicalButton('navShare', function (){//event 无参数
          //发布机会相关代码
      })

• 必填

  • 是

navigate导航

navigateTo(object)

保留当前页面， 打开一个新层 , 使用 zh.navigateBack() 可以关闭层

• 参数：

  • {url: String}

• 用法

  • zh.navigateTo({url: 'www.zhisland.com'})

• 必填

  • 是

redirectTo(object)

在当前层跳转页面， 使用zh.redirectBack() 回到原页面

• 参数：

  • {url: String}

• 用法

  • zh.redirectTo({url: 'www.zhisland.com'})

• 必填

  • 是

navigateBack()

关闭一组页面（一个层）

• 参数：

  • 无

• 用法

  • zh.navigateBack()

redirectBack()

后退页面 。 如果当前 层 的history栈已空 ， 则关闭 层 同 navigateBack()

• 参数

  • 无

• 用法

  • zh.redirectBack()

industry行业二级菜单

chooseIndustry(object, function)

唤起选择行业菜单， 配置参数默认选中，无参数正常打开

• 参数

      (
          config: {
              industries : [{tagId: String, tagName: String}], //tagName不可填
          },
          callback: Function,
      )

• 用法

      zh.chooseIndustry({
          industries: [tagId: 'ind_2202', tagName: '金融业']
      },
      function (res){
          var checkedIndustrys = res.industries
          // Array<object> res.industries 为 {二级行业id, 行业名称} 数组
      })

• 必填

  • config 否
  • callback 是

image图片相关

chooseImage(object, function)

调用上传图片组件。

• 参数

      (
          config: {
              maxCount: Number,
              sourceType : String // 'camera' 或 'album' 枚举参数 ，可不设置，默认二者都有
          },
          callback : Function,
      )

• 用法

      zh.chooseImage({
          maxCount: 1,
          sourceType: 'camera' //重要！！ 可忽略此参数
      },function(res){
          var urls = res.tempFilePath
          //res.tempFilePath 为 图片在临时服务器的url 数组 Array<String>
      })

• 必填

  • maxCount 是
  • sourceType 否
  • callback 是

previewImage(object, function)

预览图片组件

• 参数

      (
          config: {
              current: String,
              urls: Array<String>,
              quality: String
          },
          callback: Function,
      )

• 用法

      zh.previewImage({
          current: 'img.pic.com/222222', //选填 默认第一张
          urls: [
              'img.pic.com/111111',
              'img.pic.com/222222',
              'img.pic.com/333333',
          ],
          quality: 'high',//选填 //['origin', 'high', 'low'] 对应  原图  高品质 低品质  default：low
      }, function (res){
          var deleteUrls = res.deleteUrls
          // res.deleteUrls  例如删除了222222 则值为 ['img.pic.com/222222']
      })

• 必填

  • current 否
  • urls 是
  • quality 否
  • callback 是

ActionSheet

showActionSheet(object)

调用actionsheet组件。 actions为按钮配置的数组, 没一个对象对应actionsheet上一个button

• 参数

      ({
          actions:[
              {
                  name: String,
                  type: String,//"primary|default|warn" 3种状态中的一种
                  msg: String,// 当type 为 'primary' or 'warn'时  操作流程会增加dialog进行2次确认 此时需要填写msg 作为提示信息
                  disabled: Boolean,//默认 false
                  handlerEvent: Function,
              }
          ]
      })

• 用法

  zh.showActionSheet({
      actions: [{
              name: '删除',
              type: 'warn', //'primary' 'default' 'warn',
              msg: '确定要删除嘛',
              disabled: true, //选填
              handlerEvent : function (){
                  //button点击事件
              }
          }]
  })

• 必填

  • actions 是
  • name 是
  • type 否
  • msg 否
  • disabled 否
  • handlerEvent 是

分享相关

• 实用写法

      var config = {
          title: '',
          desc: '',
          content: '',
          imgUrl: '',
      }
      zh.onMenuShareWxTimeLine(config)
      zh.onMenuShareWxMessage(config)
        
      //配置与weixin通用 可在分享类型为 link music video时 直接配置给weixin分享接口
  
      zh.showShareMenu()
  
  
      // or
      var config = {
          type: 'picture',
          dataUrl : 'http://www.zhisland.com/static/share.jpg'
      }
      zh.onMenuShareWxTimeLine(config)
  
      zh.showShareMenu({columCount: 2})
  

分享配置相关

• onMenuShareWxTimeLine(config)
• onMenuShareWxMessage(config)
• onMenuShareFeed(config)
• onMenuShareShearPlate(config)
• onMenuShareShearImpress(config)

调用上列api，以开启分享时相对应的分享渠道。 请在分享前完成配置。建议配合showShareMenu部分阅读

• 参数

      (
          //标准分享网页字段
          title: String,
          desc: String,
          content: String,//分享feed内容默认值  由zhisland app支持
          imgUrl: String,
          link: String,//所有shareType 都需要填写link字段，确定分享的内容链接
          //分享资源字段
          type: String, //['link', 'picture', 'music', 'text', 'video'] 分享源类型  默认为0  !!!所有渠道类型必须保持一致 目前只支持link和picture
          dataUrl: '', //在 type 是picture music video时 附带的资源链接
          //callback
          success: Function, //暂不支持
          cancel: Function, //暂不支持
          complete: Function, //暂不支持
      })

• 用法

      //正常的分享内容 shareType: 0
      zh.onMenuShareWxTimeLine ({
          shareType: 0, //可不填
          title: '正和岛',
          desc: '正和岛邀请您',
          content: '我想分享给你的',
          imgUrl: 'http://fakeimg.pl/10x10',
          link: 'www.baidu.com',
      })
  
  
      //分享图片 shareType: 1
      zh.onMenuShareWxMessage ({
          type: 'picture',
          dataUrl: 'www.zhisland.com/static/share.jpg',
      })

• 必填

  • title 否
  • desc 否
  • imgUrl 否
  • link 否
  • type 否
  • dataUrl 否
  • success 否
  • cancel 否
  • complete 否
  • content 否

showShareMenu(config)

开启分享窗口。确保在调用前配置了分享配置

• 参数

      (
          {
              columnCount : Number, //安卓专用字段 用来控制一行并排显示几个图标， 默认值为 2
          }
      )

• 用法

      //默认值
      zh.showShareMenu()
      //设置安卓分享渠道窗口一行显示3列
      zh.showShareMenu({columnCount: 3}) 

实名认证相关

notifyAuthstep(callbacks)

注册 实名认证 回调通知。 请在调用实名认证前配置。推荐与ready()搭配使用

• 参数

       (
           callbacks: {
               success: Function,
               fail: Function,
               complete: Function,
           }
       )

• 用法

      zh.ready(function(){
          zh.notifyAuthstep({
              success: function(){},
              fail: function(){},
              complete: function(){},
          })
      });

• 必填

  • success 否
  • fail 否
  • complete 否

authstep()

开启认证流程

• 参数

  • 无

• 用法

  zh.authstep()

个人向导相关

notifyProfileGuide(callbacks)

注册 个人向导 回调通知。 请在调用个人向导前配置。推荐与ready()搭配使用

• 参数

       (
           callbacks: {
               success: Function,
               fail: Function,
               complete: Function,
           }
       )

• 用法

      zh.ready(function(){
          zh.notifyProfileGuide({
              success: function(){},
              fail: function(){},
              complete: function(){},
          })
      });

• 必填

  • success 否
  • fail 否
  • complete 否

profileGuide()

开启个人向导流程

• 参数

  • 无

• 用法

      zh.profileGuide()

h5广播 broadcast

broadcast(broadId, ...param)

为已监听该h5广播自定义事件的用户派发事件 *只有存在的页面可接收到广播

• 参数

      (
          broadId: String, //第一个参数为 注册事件名
          /**
           通常 broadId 由 eventName 和 channel 两部分组成
           eventName 为 自定义事件  例： onlogin
           channel  则是为了区分监听event的 访问权限
           channel的推荐取值为 项目名
           通过location.pathname.match(/wmp\/user\/\d+\/(\w+)/)[1]截取
           添加channel时 通过 ":" 连接 例： 'onlogin:resource'
           */
          ...param: undefined,// 其余参数为 传递给该事件的参数
      )

• 用法

      var channel = /wmp\/user\/\d+\/(\w+)/.test(location.pathname) ?
          /wmp\/user\/\d+\/(\w+)/.exec(location.pathname)[1]: ''
      zh.broadcast("onlogin:" + channel, "haha", {id: 11111}, true)

• 必填

  • broadId 是
  • param 否

addBroadcastListener(broadId, handlerFunc)

注册h5广播自定义事件监听

• 参数

      (
          broadId: String, //第一个参数为 注册事件名
          callback: Function,// 回调事件
      )

• 用法

      var channel = /wmp\/user\/\d+\/(\w+)/.test(location.pathname) ?
          /wmp\/user\/\d+\/(\w+)/.exec(location.pathname)[1]: ''
      //匹配wmp路径下的项目名作为频道标识
      zh.addBroadcastListener("onlogin:" + channel, function(arg1, arg2, arg3){
          //arg1 === haha
          //arg2 === {id: 11111}}
          //arg3 === true
      })

• 必填

  • broadId 是
  • callback 是

卡券相关

addCard(cardIdList, callback)

调起卡列表

• 参数

      (
          cardIdList: Array, //cardId(String) 数组
          callback: Function,// 回调事件
      )

• 用法

      zh.addCard(['id123', 'id234'], function(res){
          res.cardCodes // code 数组 ['code', 'code']
          res.cardIds // cardId 数组
      })

• 必填

  • cardIdList 是
  • callback 是

支付相关

requestPayment(config, callback)

调起卡列表

• 参数

      (
          config: {
              cardCodes: Array, //code(String) 数组 由卡券接口callback获得
              payOrderNo: String // 订单号
          },
          callback: Function,// 回调事件
      )

• 用法

      zh.requestPayment({
          cardCodes: ['code1', 'code2'],
          payOrderNo: "订单号"
      }, function(res) {
          res.code // 支付状态 1: 支付成功 0: 支付失败
      })

• 必填

  • cardCodes 否
  • payOrderNo 是
  • callback 是

Popup

popup(config, callback)

调起弹出框

• 参数

      (
          config: {
              text: String, // 
              type: ['success', 'error'] // 枚举 弹出框样式
          }
      )

• 用法

      zh.popup({
          text:'',
          type:'success'
      })

• 必填

  • text 是
  • type 否