精华内容
下载资源
问答
  • 事情起源于公司一个内部项目,App那边说要采用内嵌H5的形式来做,然而此前部门并没有一个成型的框架予以支持,于是上网搜集了一些关于App内嵌H5通信的资料,基于安卓与H5实现了一个通过拦截H5请求与JSBridge的框架,...
  • 需求:APP内嵌H5商城,支付功能要使用APP来调取微信进行支付。 详细描述: 用户在H5商城浏览到喜欢的商品时,点击商品进行下单,H5请求拿到支付需要的参数,H5请求APP暴露的方法并提交支付参数,APP发起支付,收到...

    需求:APP内嵌H5商城,支付功能要使用APP来调取微信进行支付。

    详细描述:
    用户在H5商城浏览到喜欢的商品时,点击商品进行下单,H5请求拿到支付需要的参数,H5请求APP暴露的方法并提交支付参数,APP发起支付,收到支付结果返回给H5,H5做支付结果展示。

    实现逻辑详见代码:

    // 通过UA查询到要发起支付的设备是安卓还是ios,为后续调用不同的方法做准备
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    
    // 使用函数简单封装一下调用APP支付的逻辑
    function appPay(params) {
    	// 前端与app交互
        if (isAndroid) {
        	// 格式:window.Android开发人员定义的对象名.Android开发人员定义的方法名(这里是给android传值的地方);
        	// 参数一般会要求传递json string格式,使用JSON.stringify()将json格式数据转换为json string。
            window.android.wechatPay()
        }
        if (isiOS) {
    	    // window.webkit.ios开发人员定义的方法名.postMessage(这里是给ios传值的地方);
    	    // 参数一般会要求传递json string格式,使用JSON.stringify()将json格式数据转换为json string。
            window.webkit.wechatPay.postMessage(JSON.stringify(payParams));
        }
        // APP与前端交互
        window.payResult = function (data) {
        	// 因为app可以调用前端挂载在window下面的方法。所以前端可以在window对象挂载一个js函数,这样这个函数就能被app调用。
            if (data.errCode == 0) {
                Toast('支付成功');
            } else {
                Toast('支付失败');
            }
        }
    }
    
    展开全文
  • app内嵌h5(2)

    2019-09-25 16:46:11
    1.在经过上次的app内嵌h5需求后,现在又有了新的需求,我们需要在通过jsbridge调用app相关功能的同时,接收app返回的相关参数,来进行app对h5的调用,代码如下: window.WebViewJavascriptBridge.callHandler( ...

    1.在经过上次的app内嵌h5需求后,现在又有了新的需求,我们需要在通过jsbridge调用app相关功能的同时,接收app返回的相关参数,来进行app对h5的调用,代码如下:

    window.WebViewJavascriptBridge.callHandler(
              'jsCallApp',{
              "action" : "jsShowMenuList",
              "entity" : {
                "menuList": [
                    {
                        content: '',
                        name:'问题反馈'
                    }
                ]
                    
                    
                }   // * 添加右上角按钮
            })
        //接收app的相关回调,根据回调来进行相应的操作
            window.WebViewJavascriptBridge.registerHandler(
                "webviewCallback",function(res,res2){
                    // that.msg=JSON.stringify(res)
                    let str=JSON.stringify(res)
                    if(res.indexOf("问题反馈")!=-1){
                        that.goback();
                    }
                }
    
            )    
    

      2.mint-ui的 Indicator组件无效

    在使用mint-ui的时候出现了很多在网上都没搜到解决办法的问题,在使用Indicator的时候,无论怎样,该组件都不显示,没有作用,经过逐行代码的筛查,突然发现,在调用ajax的时候添加了async导致indicator调用无效。ajax的async属性要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

    3.在app内嵌h5中发现img不出现,经过百度后发现,android的webview对于img的src有相应的要求,http与https不能混用,如果网页是https而从服务器获取的img的src协议为http的话,就会出现当前的img没有办法显示在页面中。

    转载于:https://www.cnblogs.com/longflag/p/11395165.html

    展开全文
  • APP 内嵌H5, H5遇到的 兼容性问题

    千次阅读 2019-11-21 11:11:09
    因为需求需要 APP内嵌H5页面 , 所以在开发测试过程中,发现了一下兼容性问题, 都已解决,不好的地方还请指出. 希望对大家有所帮助! 1.ios 中日期格式 new Date('2019-10-11') 无效; 解决: new Date('2019-10-11'....

    H5, 遇到的 ios 兼容性问题

    因为需求需要 APP内嵌H5页面 , 所以在开发测试过程中,发现了一下兼容性问题, 都已解决,不好的地方还请指出. 希望对大家有所帮助!

    1.ios 中日期格式 new Date('2019-10-11') 无效;
    解决:  new Date('2019-10-11'.replace(/\-/g, '/'));
    
    2.ios 中日期格式 new Date(' 2019-07-24 11:35:00.0') 无效;
    解决:  new Date(' 2019-07-24 11:35:00.0'.replace(/\-/g, '/').replace('.0', ''));
    
    3.ios 中 input[type='date'] placeholder 默认显示空白问题;
    解决( 用伪类添加一个placeholder属性, 
    	onfoucs时removeAttribute('placeholder'), 
    	onblur的时候setAttribute('placeholder', '')
    ): 
    input[type='date']:before {
        content: attr(placeholder);
        color: rgba(0,0,0,0.7);
    }
    input:-webkit-input-placeholder{ color: #999; }
    
    4.ios 中 overflow: scroll 滚动效果卡顿;
    解决:  -webkit-overflow-scroll: touch;
    
    5.ios 中 input disabled 时的color 很浅;
    原因:  iPhone Safari/webview input disabled 会有默认样式;
    解决:  
    input:disabled {
        color: #999;
        opacity: 1;
        -webkit-text-fill-color: #999;
    }
    
    6.ios 中 transition, animation 属性支持性很差, 会造成屏幕滑动抖动;(暂时无法解决)
    
    7.使用css伪类的content设置图标时, 图标颜色设置无效;
    需增加以下配置;
    原因: 资料查到说是ios9以后不再支持css更改这种符号的颜色, 如需要,使用 U+FE0E VARIATION SELECTOR-15字符;: content: "\2714\fe0e;
    

    参考原文在此, 如需请点击访问

    8.ios使用input,激活的时候会自动放大页面问题;
    解决:
    1. <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    2. 同时强制设置input字体16px, 或者focus的时候设置16px;(针对小于16px的input)
    

    拆解说明:
    apple-mobile-web-app-capable 删除苹果的默认工具栏和菜单栏。
    content 默认值为 no ,即正常显示。如果设置为 yes,Web应用会以全屏模式运行,可以通过只读属性 window.navigator.standalone 来确定网页是否以全屏模式显示。

    9.iphonex的body设置height:100%;底部会有24px的留白;
    原因: 本人页面因为使用html, body{height: 100%;}, body:100% 这个属性并不能在iphonex撑满可视区域;
    解决: 官方提供的meta(我这里使用好像没效果);
    viewport-fit:有三个值contain:可视窗口完全包含网页内容;cover:网页内容完全覆盖可视窗口;auto:同contain;
    通过给页面设置viewport-fit=cover,可以将页面的布局延伸到页面顶部和底部。
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    于是(暂时解决问题方法时, 使用 height: 100vh)
    
    展开全文
  • 摘要: 本文主要描述的是本人在开发过程中遇到的问题,...前景: APP 内嵌 H5 活动页面, 入口在原生, 活动页面有登陆状态的判断逻辑, 登陆为 APP 原生登陆, 登陆成功返回该活动页面;----- 流程图如下: Created with Ra..

    经过和APP同时沟通可以确定, 两种情况:

    1. 原生入口–>H5–>返回原生;
      这个情况下,原生会销毁H5的webview这种情况;
    2. 原生入口–>H5–>打开新的原生(如登录);
      这个情况下,webview’会缓存,只能使用相关回调(如登陆后的回调;
    3. 原生入口–>H5–>第三方网站(如支付)
      这个情况下,webview’会缓存

    对于上述1和3的情况, 可以监听路由变化如:beforeRouteEnter进行逻辑处理, 亲测有效;

    • 摘要:

    本文主要描述的是本人在开发过程中遇到的问题, 以及如何利用 visibilitychange 解决的相关记录。

    visibilitychange 事件, 简单的说就是 document 对象绑定的一个方法, 在H5页面 隐藏或者显示 的时候触发。

    • 遇到的问题(H5, 指的是Vue的页面)

    前景: APP 内嵌 H5 活动页面, 入口在原生, 活动页面有登陆状态的判断逻辑, 登陆为 APP 原生登陆, 登陆成功返回该活动页面;----- 流程图如下:

    Created with Raphaël 2.2.0 原生入口 H5活动页面 是否登录? 原生登陆页面 登陆成功? no yes
    1. 问题: 未登录进入时, 个人积分不展示, 原生登陆成功后返回该页面, 页面数据没有更新,还是未登录状态;经调试发现, 页面所有的钩子函数都不执行;`
    2. 猜测: APP内部打开H5, 然后离开H5跳转回原生页面, 因为(我们)APP 打开H5的webview是不销毁的(webview可以理解为一个容器,APP用来打开H5页面的,我的理解是类似于浏览器的一个窗口); 所以很可能是APP首次进入,就把H5页面包括资源全部缓存下来,下次在进入这个H5的时候,数据就不会更新了,使用的是之前缓存的数据.`
    • 验证

    1. 网上查阅资料得到的一个方法, HTML的head总增加三个meta标签:
      结果: IOS生效, android 不生效, 开始怀疑是不是缓存导致的, 为什么安卓不生效, 因为能力有限, 所以还是不太清楚 原因;
    `后面的注释, 是我自己的理解`
     <meta http-equiv="Pragma" content="no-cache">  <!-- 关闭缓存 -->
     <meta http-equiv="Cache-Control" content="no-cache"> <!-- 关闭缓存 -->
     <meta http-equiv="Expires" content="0"> <!-- 立即过期,也就是重新请求资源 -->
    

    1. 偶然发现 visibilitychange 这个方法, 于是就开始 google, 最终功夫不负有心人;
      结果: 完美解决了我的问题, 在document.hidden === false的时候, 我重新请求数据接口,更新数据就可以了
      理解: 感觉这种情况, 更像是APP把H5页面后台挂起,(或者通俗说是隐藏掉,用户不可见而已), H5页面还是一直存在, 所以页面不会重新加载, 更别说登陆前后数据变化了.
    // Set the name of the hidden property and the change event for visibility
     var hidden, visibilityChange;
     if (typeof document.hidden !== "undefined") {
       // Opera 12.10 and Firefox 18 and later support hidden = "hidden";
       visibilityChange = "visibilitychange";
     } else if (typeof document.msHidden !== "undefined") {
       hidden = "msHidden";
       visibilityChange = "msvisibilitychange";
     } else if (typeof document.webkitHidden !== "undefined") {
       hidden = "webkitHidden";
       visibilityChange = "webkitvisibilitychange";
     }
    
     handleVisibilityChange() {
       if (document.hidden) { // 页面隐藏
         console.log(document.hidden, document.visibilityState)  // true 'hidden'
       } else { // 页面展示
         console.log(document.hidden, document.visibilityState)  // false 'visible'
       }
     }
    
     // Warn if the browser doesn't support addEventListener or the Page Visibility API
     if (typeof document.addEventListener === "undefined" || hidden === undefined) {
       console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
     } else {
       // Handle page visibility change   
       document.addEventListener(visibilityChange, handleVisibilityChange, false);
     }
    
    1. 因为使用的是 webViewJavascriptBridge 和APP协作开发, 所以可以 H5这边注册一个登陆成功的方法, 让APP调用, 然后回调里 执行 更新数据操作就可以了.

    注意****2. 3 两种方式, 虽然可以成功解决问题, 但是(本人)安卓会出现大概 1s 左右的白屏, 目前还没有解决.希望有大佬可以帮忙指点一下.

    本文参考来自: https://www.jianshu.com/p/e905584f8ed2


    • 学习使我快乐
    展开全文
  • 记一次app内嵌h5

    2019-03-22 16:10:00
    由于公司项目开发需要,小计一次简单的vue开发app内嵌h5页面: 1.在项目使用vue脚手架完全搭建好之后,在main.js中将ios以及android的bridge方法引入 function setupWebViewJavascriptBridge(callback) { ...
  • APP内嵌H5页面开发中,有遇到很多坑,大部分问题还是安卓和IOS 之间的兼容性问题,下面介绍一下遇到的一个很典型问题; 问题:H5页面在IOS系统下APP中滚动时没有惯性 特征:长页面在划动时,手指离开屏幕页面就...
  • 关于APP内嵌H5后退按钮问题

    千次阅读 2017-09-14 21:49:06
    最近都在用vue做APP内嵌H5页面,在APP点击后退时如果在路由中跳转过多次 点后退会后退很多次才能退出页面 用户体验很差。 下面来说下解决方法 因为hisotry模式官方说需要服务器配置所以路由一直在用hash模式,针对...
  • 微软提供了一个在线预览的页面,...。。 这个PC端可以用,app内嵌h5页面打开这个地址报错,指向空页面; 移动端 H5 有什么好的方式可以直接预览 word、Excel?
  • 判断操作系统:var u = navigator.userAgent,app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X...
  • 用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后,可能不想支付使用,或其他原因,随手关闭左上角X关闭浏览器,这时需要监听这个动作,断开蓝牙连接,不然用户手机会一直连着蓝牙设备,别的用户无法进行连接。...
  • 前文APP内嵌H5已经很普遍了,但是每个app提供的webview表现都不太一样,在开发中遇到了一个非常棘手的缓存问题。APP启动时加载了我们商城项目的H5代码,然后把index.html文件缓存到了本地。记录一下问题表现H5项目...
  • IOS app内嵌h5 下载pdf 安卓可以下载 但是ios只能查看不可以下载 使用的是window.open('http://XXXXX/pdf','newpage','width=100,height=100') 问题:ios 无法提示下载 只能浏览 并且页面样式没有变化 ...
  • 关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码。 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什么吗?用第一种或者第...
  • 原生app内嵌H5页面分享到微信之后再进行二次分享 自定义图文链接问题,怎么解决?
  • App内嵌H5的规约

    2021-03-29 12:45:39
    第一步:检查页面是否已禁止缩放,IOS手机号蓝色 页面头部插入禁止模块代码如下: <meta content="width=device-width,initial-scale=1.0,maximum-...第二步:H5仅展示不依赖原生APP,无交互操作,检查网页显示
  • app内嵌h5(h5跳转ios原生)

    千次阅读 2019-10-26 13:57:57
    h5与ios原生之间的交互 ,不仅需要判断是不是ios也要判断是不是Safari,因为ipad的浏览器内核是Safari。 (此时ios的系统是ios13,近期进行了升级) function isIOS(){ //判断是否是IOS var u = navigator....
  • app内嵌H5调用分享

    千次阅读 2019-06-18 20:16:00
    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮调起分享...
  • ios/安卓 内嵌vue H5 页面, 页面可以同步或异步调用app的方法, 同时app也可以调用H5代码中声明的方法 一、dsBridge是什么? 三端易用的现代跨平台 Javascript bridge, 通过它,你可以在Javascript和原生之间同步或...
  • 其实就是在app内部放置一个浏览器内核,这个内核可以是浏览器的系统内核,也可以是腾讯的x5内核,一般使用腾讯浏览器的x5内核,如果环境不允许,则使用默认的系统的内核 使用x5系统内核: 在腾讯tbs官网上下载:x5...
  • APP 内嵌H5, vue中使用WebViewJavascriptBridge

    千次阅读 热门讨论 2018-09-19 15:49:12
    app开发的时候, 需要H5 页面会嵌入到 IOS 客户端 app 中,于是就涉及到了 H5 与 IOS 交互的问题。在这里记录一下项目中用到的交互方式,重点介绍 WebViewJavascriptBridge GitHub 地址。 H5 调用 IOS,无返回 项目...
  • <img src="images/btn.png" ...调用方法,并判断是andriod or ios调用app端的方法 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  • mui制作app,需要在其中的一个页面打开一个网页。并且网页可以获取到当前应用的用户信息。 解决 1、创建壳: 页面里头打开一个网页比较简单: 如下源码,创建一个壳: 壳功能包括: 获取上一个页面传过来的...
  • App内嵌H5活动页面携带用户token

    千次阅读 2020-01-08 17:58:10
    此文章仅记录自己在app端做的一个活动所遇到的各种问题, 帮助大家避免入坑. ...需求:app端通过banner页面进入到投票活动页面(这个活动页面是H5页面),H5页面需要拿到用户的token.并可以进行投票活动. 问题1:通过postm...
  • app内嵌h5一键加QQ群

    千次阅读 2019-11-15 17:47:34
    官方有示例代码,很简单,一个a...然而把页面放到app内打开,就不行了。 在Android和iOS上都无法唤起加群界面。 尝试 1: 升级QQ 不管用。不是QQ版本的问题。 尝试2:使用其它url 通过各种搜索,一共尝试了通过以...
  • 友盟 有引入JS的埋点2.talkingdata 在app埋点中有H5 特有的埋点方法介绍 详情看官网文档href='http://doc.talkingdata.com/posts/36上述埋点分为页面切换的埋点和事件的埋点事件的埋点在本次项目中使用的是调用原生...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,608
精华内容 1,843
关键字:

app内嵌h5