实现小程序和H5页面之间互相跳转

需求

H5页面，点击按钮进入到指定路径的小程序中。

H5跳转到小程序

从H5页面返回小程序页面，须要使用微信SDK提供的跳转方法。 使用微信的SDK方法，须要先发送签名验证wx.config。

web-view网页中可以使用JSSDK1.3.2提供的接口返回小程序页面

1. H5：wx.miniProgram. 跳转

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

<script>
    $(function () {
        //要运用web-view
        let productId = 'IIeC';
        let webViewUrl = 'http://wx.gemii.cc/gemii/wenjuan/'
       
        //向小程序发送消息
        wx.miniProgram.postMessage({ data: 'foo' });
    
         // 跳转到小程序的一个页面
         wx.miniProgram.navigateTo({ 
            url: `/pages/buyer/bargain/bargain?scene=${productId}&webViewUrl=${webViewUrl}` })
            
        wx.miniProgram.redirectTo({
            url: `/pages/sell/poster/index?dataUrl=${res2.resultContent}&scene=${parmas.id}&updateState=${parmas.updateState}`
        })

    })

</script>
复制代码

2. 小程序：经过options获取相关数据

onLoad: function (options) {
    this.setData({
        updateState: options.updateState || null,
        imgUrl: options.dataUrl,
        scene: options.scene
    });
    SELL.getGoodDetail(options.scene, res => {
        "use strict";
        //console.log(res)
        if (res.data.resultCode === '100') {
            this.setData({
                dataParams: res.data.resultContent
            })
        }
    })
},
复制代码

小程序跳转到H5

webview.js
onLoad:function:(options){
    this.setData({
        url:options.url
    })
}

webview.wxml
<web-view src="{{ url }}"></web-view>
复制代码

index.js
handleGoH5:function(){
    wx.navigateTo({
      url: '/pages/webview/index?url=http://grouppet.chaojibaoma.com/common/tmall/index.html?ticketcode=gnc1122_1&clickcode=GNC-914njOkO',
    })
}

index.wxml
<button bindtap="handleGoH5" >跳转H5</button>
复制代码