H5与原生交互

507 阅读1分钟
一、h5与原生app的交互
(1)h5分享到微信

有两种方式:

1、整个页面是h5,点击分享按钮,调用原生的方法,实现分享。

2、头部(包含分享按钮)是原生的,只有内容展示区域是h5,分享走原生分享的逻辑。

(2)h5页面标题栏,点击“后退”按钮

地址栏带来源标识,from=app

1、如果上一级是原生,调用原生后退方法,既from="app" 2、如果上一级是h5,采用js实现后退 $router.back()

二、h5与小程序的交互

(1)h5跳转到小程序的指定页面

通过小程序的web-view引入h5,然后在h5的网页里引入小程序的jssdk,就可以使用小程序的接口和方法了了

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

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'}) // 跳转到小程序页面
wx.miniProgram.postMessage({ data: 'foo' })   // 向小程序发送消息
window.__wxjs_environment === 'miniprogram' // 在网页内可通过`window.__wxjs_environment`变量判断是否在小程序环境

三、小程序、h5、app互相挑战打开的方式总结

www.jianshu.com/p/ff264ac4c…