前端与APP混合联调

创建hybrid.js

javascript 复制代码
let hybrid = {
  // 具体用到哪个写哪个?
  isContainer: typeof container == 'object' && container,
  isAndroid: /android/.test(UA),
  isIOS: /iphone|ipad|ipod/.test(UA),

  // 安卓客户端
  isAndroidClient: /android/.test(UA) && typeof container != 'undefined' ,
  // ios客户端
  isIosClient: false, 
  
  // 用于判断是否是客户端
  isClient() {
  	//XXX:app名字如happy就是/happy/i.test(UA)
    return /XXX/i.test(UA) || hybrid.isAndroidClient || hybrid.isIosClient
  },

  // 是否是微信小程序
  isMiniprogram() {
    return UA.indexOf('miniprogram') > -1 && window.wx
  },
  
}
javascript 复制代码
hybrid.openScheme = function(scheme) {
  const iframe = document.createElement('iframe');
  iframe.setAttribute('id', 'iframe-scheme');
  iframe.setAttribute('src', scheme);
  iframe.setAttribute(
    'style',
    'position:absolute;z-index:-99999;top:0;right:0;bottom:0;left:-1000px;',
  );
  document.getElementsByTagName('body')[0].appendChild(iframe);
  setTimeout(function() {
    document.getElementById('iframe-scheme').remove();
  }, 1000);
}

传递给端上方法

与端上IOS定义好方法,其中t=edit_app指的某个方法,from和title是参数

javascript 复制代码
hybrid.editWeight = function(data) {
  const {from,title } = data
  hybrid.openScheme(`test-app://article?t=edit_app&from=1&title=${encodeURIComponent(title)}`)
}

//兼容安卓和IOS 的方法

javascript 复制代码
hybrid.openTab = function() {
  if (typeof container == 'object' && container && container.openTab) {
    container.openTab();
  } else {
    hybrid.openScheme('test-app://article?t=open_tab');
  }
}
javascript 复制代码
export default hybrid
javascript 复制代码
const [formData, setFormData] = useState([])

APP端给前端发送通知 直接发送传递

javascript 复制代码
window.app.editApp = (参数)=> {}  

react中直接

javascript 复制代码
useEffect(() => {
    console.log('process.env.UMI_ENV', process.env.UMI_ENV)
    initList()
    return () => {
     
    }
  }, [])
useEffect(() => {
    initList()
  }, [formData])
javascript 复制代码
const initList = () =>{
 window.app = window.app || {}  
 window.app.editApp = (v) => {
 	if (!v) return 
 	try {
 	 let data = JSON.parse(v)
 	// 对象的话
 	 let newFormData = {}
     for (let key in data) {
       newFormData[key] = data[key]
     }
     // 数组
	 let newFormData = []
     newFormData = data

     setFormData(newFormData)
 	}
 catch(e) { }
 }
}
 
相关推荐
学不会•42 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS2 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10222 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----4 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024064 小时前
SQL SELECT 语句:基础与进阶应用
开发语言
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端