第一步:检查页面是否已禁止缩放,IOS手机号蓝色
- 页面头部插入禁止模块代码如下:
<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 插入业务数据
}