内嵌的H5是用的vue2版本开发的,期间有很多的坑要踩:

1、调用app返回上一个页面不触发页面的onmouted和window.onPageShow

  app返回上一个页面调用的方法并不会出发vue的页面更新也不触发浏览器的回退事件。

  最后使用的是window.history才触发了页面的回退事件

2、唤起软键盘后页面高度变化

  因为是内嵌app的H5页面,没有测试机,也未安装虚拟机暂时无法测试

3、因为是内嵌页面,会遇到一个问题就是,底部tab打开的页面相当于浏览器的窗口,同时存在几个窗口,vuex没有触发,但是这个时候又需要几个页面之间进行通信

  解决方案是使用local缓存,然后在页面使用watch进行监听,变相的实现了事件触发

app内嵌H5踩坑的更多相关文章

  1. 移动端开发利器vConsole.js,app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  2. app内嵌H5调用分享

    最近产品提出了一个需求:我们在合作方的app中提供的部分页面中增加分享页面,具体要求是在3个二维码推广页面调用app的分享接口,分享方式有3种,分别是点击”分享链接“按钮调起分享,点击”分享图片“按钮 ...

  3. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  4. app内嵌H5网页(webviewJavaScriptBridge)

    摘要:使用的插件为webviewJavaScriptBridge,app端需要引入一下这个包,html页面只需一段JS代码 与IOS交互 <! 申明交互(此处代码固定) > functio ...

  5. app内嵌h5分享到小程序分享功能

    if (this.GLOBAL.env !== 'production') { try { window.JSBridge.shareMiniProgramToWx('https://www.lexi ...

  6. app内嵌H5的上传图片的功能

    1.上传组件 <!-- - hasBorder {Boolean} cell底部边框,oneline 为 true 有效 - inlineBorder {Boolean} cell底部短边框 - ...

  7. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  8. app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件

    我们的目的是再滑动的时候 不要触发到touchstart事件. // 再滑动的时候无法点开视频 var is_scroll_start,is_scroll_end; $(window).on({ 't ...

  9. APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法

    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...

  10. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

随机推荐

  1. 洛谷P8567 真·基础数论问题

    基础数论重定向 今天蒟蒻切水题切到一道建议评黄的红题,一下子给我整不会了-- 题目传送门 理解题意 首先,我们要理解题意. [JRKSJ R6] Nothing 我们定义 \(f(x)\) 表示 \( ...

  2. mysql常用命令,检查数据库连接情况以及修改时区

    常用操作 注:也可以运行 mysql -u 用户名(root) -p 密码(root) 数据库名(bank) ,然后回车 导入文件:source e:bank.sql (你的sql文件) 回车 PS ...

  3. Vue.js 前端项目在常见 Web 服务器上的部署配置

    Web 服务器是一种用于存储,处理和传输Web内容的软件.它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力.Web服务器支持多种编程语言,如 PHP,Ja ...

  4. 快速实现一个简单阉割版的HashMap

    简单实现一个底层数据结构为数组 + 链表的HashMap,不考虑链表长度超过8个时变为红黑树的情况. 1.示例图 2.分析需求 put数据时: key值hash后的索引处没有元素,需要创建链表头节点, ...

  5. 记录一次前端hack尝试

    背景 playcode很好用,但是给的免费时间很短,于是想hack他 hack的步骤全部来源于bilibili视频:https://www.bilibili.com/video/BV1N3411v7C ...

  6. 微信小程序【关于地址信息的接入以及自动选择当前位置】

    在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方公告,下面就是关于地 ...

  7. pycharm+robotframework自动化指南

    习惯了用pycharm写代码,突然让我用ride写,着实不爽,这才有了这篇教程. 一. pycharm配置 1. pycharm安装依赖插件:IntelliBot#patch,安装完重启pycharm ...

  8. 微信小程序的全局弹窗以及全局实例

    全局组件 微信小程序组件关系中,父组件使用子组件需要在父组件index.json中引入子组件,然后在父组件页面中使用,这种组件的对应状态是一对一的,一个组件对应一个页面.如果有一个全局弹窗(登录),那 ...

  9. git拉取新分支、删除分支、修改远程分支

    1.拉取新分支 git checkout master           切换到master分支 git pull                                   更新到最新代码 ...

  10. 把 URL 中文和一堆百分号转换成字符串

    https://www.cnblogs.com/Enziandom/tag/Web%20%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91 JS 有解析这样的 URL 的函数,主 ...