Taro webview中的h5页面如何使用原生小程序API

Taro小程序开发过程中，往往会遇到h5页面与原生页面互相通讯的过程，而微信小程序为webview组件提供了JSSDK，使用方式：
1.在h5项目的入口文件(即index.html)中与meta标签同一层级下，添加远程依赖

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

以上即在整个项目全局引入了JSSDK(这里不得不吐槽一下微信小程序开发官方文档，我一开始愣是没有看明白，谁让咱是新手呢)。

2.接下来就是使用api了，但是目前我们只能使用sdk提供的有限方法。
举例常见的页面跳转方法：
// javascript 跳转到小程序原生页面

wx.miniProgram.navigateTo({url: '/path/to/page'})

这里taro webview小程序有个小bug，即如果h5页面内部跳转之后，虽然设置了h5页面的title标题，但在webview顶部只会显示第一次加载的title，在web端跳转之后title切换正常。这里有个不算友好但能解决title无法改变的方法，即在h5页面跳转代码修改为调用桥接的原生api再次跳转到webview页面以达到可以刷新title的目的。
至于为什么不用Taro提供的修改title的方法，见我另外一篇博客：Taro小程序webview使用及API

向原生webview页面发送消息：

//h5页面向原生webview页面发送消息通讯，注意不是立即发送，一般在特定时机（小程序后退、组件销毁、分享）触发并收到消息
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

webview页面 webview组件监听onMessage事件，即可接受到此消息通知数组。这里也可以参考我的另外一篇博客：Taro小程序webview使用及API，两者加起来一起使用。

//判断当前是否是小程序的环境，返回boolean值

wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

以上即为本人的使用心得，如有帮助，请记得点赞、关注三连~

先别走~微信扫一扫个人开发的小程序，琳琅街比价

Taro webview中的h5页面如何使用原生小程序API相关推荐

在h5页面中调起支付宝小程序中的某一个页面以及URLScheme 之支付宝
在h5页面中调起支付宝小程序中的某一个页面直接上代码: window.location.href = 'alipays://platformapi/startapp?appId=2021001181 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
h5页面跳转微信小程序。
一.先说页面表现,页面上有几点需要注意: 1.标签写的时候,button按钮一定要包在template标签里面.没有用vue的话,可以直接用<template>去包,如果是vue2用 & ...
h5页面跳转微信小程序页面
// 判断环境是否在微信小程序里 function isMiniProgram(){var ua = navigator.userAgent.toLowerCase();var envType='#' ...
判断h5页面是不是在微信小程序里面打开呢？
(1)安装依赖: npm install weixin-js-sdk --save (2)在App.vue里面引入: import wx from 'weixin-js-sdk' (3)在页面上写判断 ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
公众号h5页面跳转到小程序
前言: 最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp 公众号h5页面跳转小程序呢,需要先关联下 ...
关于微信公众号的h5页面跳转微信小程序的详细介绍
简介关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据
项目开发中赶上三端接入h5的需求,因此本身动手作h5页面,可是在作的过程当中也赶上了许多的问题javascript 小程序端不支持在本地引入,因此须要将h5发布服务器,以请求接口的形式进行访问html ...

Taro webview中的h5页面如何使用原生小程序API

Taro webview中的h5页面如何使用原生小程序API相关推荐

最新文章

热门文章