H5页面对接React Native App

最新推荐文章于 2024-01-31 14:35:23 发布

connie__wu

最新推荐文章于 2024-01-31 14:35:23 发布

阅读量738

点赞数 1

分类专栏：移动端开发 web前端技术

本文链接：https://blog.csdn.net/connie_1990/article/details/106213142

版权

这篇博客详细记录了H5页面使用ant design mobile框架对接React Native App过程中遇到的问题与解决方案，包括移动端调试工具vconsole的使用，通过postMessage进行页面通讯，解决安卓端fastclick报错、软键盘遮挡input、文件上传和大小计算等问题，以及安卓端文件选择权限问题的分析。同时，还提及了iOS端尚待解决的软键盘遮挡问题。

摘要由CSDN通过智能技术生成

H5页面开发笔记

本次开发一个H5页面，H5页面用的框架是ant design mobile，对接的是react native 开发的App 程序，其中遇到了一点坑，在此记录一下。

移动端调试神器vconsole

// 安装vconsole 
npm install vconsole --save

// 引入项目当中
import Vconsole from 'vconsole'
const vConsole = new Vconsole()  

// 然后console.log()的日志就可以通过vconsole 输出在移动端了
console.log('移动端可见日志')

// 如果是使用VUE框架，可以在main.js中加入如下代码
Vue.use(vConsole)

通过postMessage与app页面通讯

通讯总共包含如下三个步骤

H5页面在组件挂载之后，注册监听程序，以便接收App发送的数据
通过window.postMessage方法给App发送请求
App在接受到H5的请求之后，解析命令，返回H5所需要的数据
H5通过receiveMessage 处理接收到的数据

具体样例代码如下：

// 判断是否是IOS操作系统
const isIosDev = () => {
   
  let u = navigator.userAgent
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  return isIOS;
}
const isIos = isIosDev()

// 与app约定的构造命令的函数
const createCommand = (command, params) => {
   
  return JSON.stringify({
   
    command: command,
    params: params,
  });
}

const postMessage = (command, params) => {
   
	// 注意！！！此处需要异步，200ms以后发送请求，app那边才可以收到请求
    setTimeout(() => {
   
      window.postMessage(createCommand(command, params), "*");
    }, 200);
}

const receiveMessage = (event) => {
   
    console.log('-------receiveMessage接受到的信息 -----------')
    console.log(event.data)
    const data = event.data
    if (typeof data === 'string') {
   
      try {
   
        const jsonData = JSON.parse(data)
        const {
    command, params = {
   } } = jsonData
        // 与APP测约定command_accept_info命令为所需接收的命令
        if (command === 'command_accept_info') {
   
			console.log('处理后续接收到的params')
        }