webview加载的h5页面明明按照uniapp官方文档引入了uni-webview.js，但仍无法使用uni.navigateTo等方法？

若是普通html那可能是引入方式不对，若webview中加载的H5是使用uniapp开发的话，就需要修改uni.webview.js源码来解决了

修改方式：

下载uni.webview.1.5.6.js后格式化一下方便查看，在js中搜索uni然后修改这2处地方，我这里改为uniWeb，在后续使用过程中使用uniWeb来调用SDK内的方法

引入方式：

<body>

<script type="text/javascript">

    var userAgent = navigator.userAgent;

    if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {

        // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。

        document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');

    }

</script>

<!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->

<!-- 由于本H5项目是使用uniapp开发的，uni-webview.js文件导出了uni对象，会被uniapp本身的uni对象覆盖，所以把源码中的uni变量改为uniWeb -->

<script type="text/javascript" src="./js/uni.webview.1.5.6.js"></script>

<script>

    document.addEventListener('UniAppJSBridgeReady', function() {

        // uni-webview.js源码修改后，使用uniWeb来调用SDK中的方法

        uniWeb.getEnv(function(res) {

            console.log('当前环境：' + JSON.stringify(res));

        });

    });

</script>

</body>

小姿势：

h5嵌入微信小程序时 wx.miniProgram 等API已经被 uni.webview 重写兼容了，所以不用写 wx.miniProgram.navigateTo，而是使用 uniWeb.navigateTo就能够跳转宿主小程序的页面

uniapp开发的h5引入uni.webview.js注意事项的更多相关文章

  1. uni-app开发的h5，使用微信授权登录（前置条件+具体代码）

    原文 微信内嵌浏览器运行H5版时,可以调起微信登录 普通浏览器调起微信登陆是不开放的,只有个别开发者才有,比如京东 前置条件 在微信内嵌浏览器运行H5版时,调起微信登录,需要配置回调域名 (请注意,这 ...

  2. uni-app开发小程序-使用uni.switchTab跳转后页面不刷新的问题

    uni.switchTab({ url: '/pages/discover/discover', success: function(e) { var page = getCurrentPages() ...

  3. uni-app开发的h5 访问url自动添加 #的问题

    在manifest.json配置文件修改h5的内容,添加router部分 "h5" : { "title" : "xxx", "d ...

  4. uniapp开发使用 web-view APP 与 H5 (vue)通信

    需求:这边是uniapp开发的APP  需要内嵌H5(vue),就得使用web-view跳转网页 H5端 在vue的index,html文件引入web-view的插件 <script type= ...

  5. uniapp H5引入腾讯地图

    在网上搜索了许多关于uniapp引入腾讯地图的方法都以失败告终,我开发的应用主要使用于H5,小程序与H5是不同的sdk,就不在这说了,况且小程序有手把手教学,可参考腾讯地图官网https://lbs. ...

  6. UI标签库的话题：JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 演示样例 <t:base type="jquer ...

  7. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  8. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  9. uniapp登录流程详解uni.login

    uni.login(OBJECT)登录 H5平台登陆注意事项: 微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见普通浏览器上实现微信登陆,并非开放API,需要向 ...

  10. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

随机推荐

  1. ts 运行时和打包问题

    esm问题 两个关于模块配置项 compilerOptions.module 决定tsc打包模块后的输出,如esm或cjs compilerOptions.moduleResolution 影响的是在 ...

  2. 前端开发系列122-进阶篇之Floating point addition

    本文简单说明 JavaScript 中常见的进制转换函数以及浮点数计算的注意点. 如何把任意进制的数据转换为十进制? 假设我们有二进制数据110,如果要把该数据转换为十进制数据可以参考下面的处理过程. ...

  3. 前端开发系列044-基础篇之TypeScript语言特性(四)

    本文主要对TypeScript中的函数进行展开介绍.主要包括以下内容 ❏ 函数的创建和类型 ❏ 函数参数情况说明 ❏ 泛型函数简单介绍 一.函数的创建和类型 函数的创建 函数的创建主要有两种方式:通过 ...

  4. 5分钟带你搞懂从0打造一个ChatGPT

    前言 欧阳上一次写文章还是4个月前,之所以断更有两个原因:换工作和业余时间ALL IN AI了.不管你是否承认,AI时代已经来了,依然埋头研究前端的那一亩三分地和源码在未来可能就是蒸汽时代被淘汰的纺织 ...

  5. ETLCloud平台组件模版的使用技巧

    ETL工具介绍 在ETLCloud平台中配备了各种不同的组件.模板.规则,用户可运用不同类型的组件来实现想要的业务流程.接下来直接进入平台组件模板的使用技巧说明吧. 使用技巧 1.组件复制 平时在使用 ...

  6. iPaas数据传输的方式

    一.iPaas平台概述 iPaas(Integration Platform as a Service)平台,作为一种先进的云计算服务模式,为开发者和企业提供了一种全面且灵活的应用集成解决方案.它构建 ...

  7. Lebesgue Measure and Lebesgue integral

    Citation : Lee, JeongHwan, "MEASURE AND INTEGRATION" (2021). Electronic Theses, Projects, ...

  8. 管理心理学 Management Psychology

    管理心理学 Management Psychology 作者: 浏览量:4046 [课程编号][所属模块]专业方向课 [学分数]3学分 [适用专业]心理学 [学时数]52学时 [开设学期]秋季 [已开 ...

  9. U558032 芒果的收获季-区间dp

    T4 解析 对于 \(20 \%\) 的数据范围, 保证 \(1\le T \le 20, 1 \le n \le 300,1 \le a_i \le b_i \le 10^4, 1 \le d_i ...

  10. 【16位RAW图像处理五】任意位深16位图像的中值模糊快速实现及其应用。

    在我博客里,也多次提到了中值模糊的优化,比如以下两篇文章: [算法随记三]小半径中值模糊的急速实现(16MB图7.5ms实现) + Photoshop中蒙尘和划痕算法解读.     任意半径中值滤波( ...