单独h5页面嵌入Android和ios项目具体交互(前端做法)

单独h5页面嵌入Android和ios项目具体交互(前端做法),第1张

场景:Android或ios做的app里边有某个页面需要给前端做成h5页面

前端做好一个页面,然后把这个页面路径给到Android或ios工程师并给到他一个可以调用的方法以便传参
1.创建一个项目(不必多说),也可以直接在当前的项目里边创建一个新的页面,这个页面就是给Android或ios用的
页面路径:

2.在被使用的页面暴漏一个方法给Android和ios工程师调用进行传参
我的做法是在window下边写一个方法暴露出来 ,token和id就是他们要传给我的值

3.如何调试?
*a.*自己测试的话可以在控制台中直接调用signIn方法传参进行调试

*b.*与Android或ios进行调试的话可以先把当前页面的路径给他
注意:此路径必须是通过ip打开的,并且要在同一个局域网下他才能打开 localhost 启动的只能在自己页面访问的

4.前端用到本地缓存的做法
如果用到本地缓存来保存传递过来的值,Android那边的项目是需要设置允许启用本地缓存的

5.ios禁止缩放
解决ios10及以上Safari无法禁止缩放的问题
只需要在项目的index.html里边添加一下代码即可:

window.onload = function () {
  // 阻止双击放大
  var lastTouchEnd = 0;
  document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);

  // 阻止双指放大
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
  });
}

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/994160.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存