小程序 公眾號/h5相互跳轉-webview

小程序與h5的跳轉

前提小程序管理后台配置域名白名單，並且h5頁面是嵌在小程序里面（相互跳的前提條件）

在業務域名中設置好訪問的h5地址 

 

微信官方web-view 介紹地址 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序跳轉h5需要用到web-view這個原生組件

pages生成一個webview的目錄

 

wxml中

<web-view src="{{url}}"></web-view>

js中接受頁面傳來的url值

/**
   * 頁面的初始數據
   */
  data: {
   url:null,
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      url: options.url
    })
  },

　　這樣就完成了 小程序跳轉 h5頁面

2019-03-19

 h5跳轉小程序

h5跳轉小程序 一個是 這個h5必須是 小程序內嵌的h5，同樣需要在小程序后台進行業務域名設置

在小程序內能夠訪問到的h5頁面 ，就可以在h5頁面上進行小程序的跳轉  （h5跳轉小程序 需要在小程序的環境中進行跳轉 才能 找到目錄） 

在h5頁面 引入 微信的官方js 

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

　　

然后 點擊的時候 回跳小程序  這里的目錄 和 app,json的目錄保持一致

  wx.miniProgram.navigateTo({url: '/pages/card/card'})

 

就可以實現 h5跳回小程序了