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) })  

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

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

猜你喜欢

转载自blog.csdn.net/qq_33539839/article/details/120042618