App内嵌H5的规约

第一步：检查页面是否已禁止缩放，IOS手机号蓝色

1. 页面头部插入禁止模块代码如下：

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport">
<meta content="telephone=no" name="format-detection">

第二步：H5仅展示不依赖原生APP，无交互操作，检查网页显示是否正常

• 方法一：直接用chrome浏览器F12里面的手机模式打开对应的网页
• 方法二：使用手机浏览器打开

第三步： H5依赖原生APP(不适用于weex框架)

h5和native的通信

• 客户端作为h5的载体，不负责逻辑处理，将所有事交由h5去处理。
• h5页面作为业务承载方，除了负责页面内的业务逻辑，还要做的就是控制客户端的视图状态

接入是否在应用内的判断

// 是否在应用内的判断, 原生会在webviwer的UA上新增标识，例如：掌上吉祥app 如下

const userAgent = window.navigator.userAgent
const tag = 'zhangshangjixiang'
if (!_.includes(userAgent, tag)) {
  return
}

布局显示问题

传递的参数字段说明

// 不显示 visible: false
// 显示 visible: true
// type: 'image',则读取icon中的路径,忽略text, 只是展示图片
// type: 'text',则读取text中的文本,忽略icon, 只是展示文本
// type: 'image-text', 则读取icon和text, 图片和文本都展示

TitleBar - 顶部头操作
• 是否采用原生标题栏 + 标题名称设置

/**
 * 初始化客户端视图代码
 */
initClientView () {
  // h5与native交互参数
  let params = [
    {
      icon: 'XXX', // icon 路径地址
      type: 'text', // 图片类型: image, 文本类型: text, 图文: image-text
      labelName: '标题', // 显示操作文本
      visible: true, // 显示: true, 只有在显示状态下其他设置才有意义; 隐藏: false,
      action: {  // 操作native拉起h5的方法约定 -- 因标题设置这里无需回跳故只需传空结构或不传
        params: {}, // 参数
        method: '' // 点击的回调方法
      }
    }
  ]
  // 将对象转换为JSON文本
  params = window.JSON.stringify(params)
  // h5与安卓交互
  if (this.isAndroid) {
    window.JYTitleInterface.show(params)
    return
  }
  // h5与ios交互
  window.webkit.messageHandlers.show.postMessage(params)
}

• 左 + 右 上角功能(icon, text, icon + text)

// h5与native交互功能部分代码块
// 将标记与问卷提交方式暴露出来给native事件调用
window.operate = this.operate
/**
 * 初始化客户端视图代码
 */
initClientView () {
  // 左侧:left, 右侧:right
  const direction = 'left'
  // h5与native交互参数
  let params = [
    {
      icon: 'XXX', // icon 地址
      type: 'image', // 图片类型: image, 文本类型:text
      labelName: '操作', // 显示操作文本
      visible: true, // 是否显示
      action: {  // 操作native拉起h5的方法约定
        params: {
            
        }, // 参数
        method: 'operate' // 点击的回调方法
      }
    }
  ]
  // 将对象转换为JSON文本
  params = window.JSON.stringify(params)
  // h5与安卓交互
  if (this.isAndroid) {
    window.JYTitleInterface.addButtonListener(direction, params)
    return
  }
  // h5与ios交互
  window.webkit.messageHandlers.addButtonListener.postMessage(direction, params)
}
/**
 * 执行原生的回调事件
 */
operate () {
  // 处理h5的操作/操作native
  // 若有这类需求如：后续A—>B—>C，C中要求直接返回页面A，则需要新增与native的扩展
  // 跳转至h5页面
  this.$router.push({
    path: '/signature',
    query: {
      token: _.get(this.$route.query, 'token')
    }
  })
  // 接入native的返回
  if (this.isAndroid) {
    window.commonInterface.goBack()
    return
  }
  // h5与ios交互
  window.webkit.messageHandlers.goBack.postMessage(null)
}

多媒体功能

• 拍照 + 录音 + 录像 功能

// 将标记与问卷提交方式暴露出来给native事件调用
window.showMedia = this.showMedia
// 上传功能uploadMedia
// type: 'image', 拍照
// type: 'audio', 音频
// type: 'video', 视频
upload (type = 'image') {
  // TODO 加入是否在应用内判断
  if (this.isAndroid) {
    window.dongruijsBridge.uploadMedia(type)
    return
  }
  window.webkit.messageHandlers.uploadMedia.postMessage(type)
}
/**
 * 执行原生的回调事件
 */
showMedia (value) {
    // value 为多媒体信息
  // TODO 插入业务数据
}