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

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

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