微信小程序中的web-view，实现微信小程序与h5页面间跳转

一、从小程序跳转webview

二、从webview（h5）跳转小程序

1.先引入微信JS-SDK

/*方式一*/
const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js'
      document.body.appendChild(script)
/*方式二*/
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

由于我使用了eslint，导致报错 ‘wx’ is not defined no-undef，

解决方案：在.eslintrc.js文件中加入以下内容，就不报错了

globals: { wx: true },

2.判断是否在小程序的webview中打开，还是在浏览器中打开，如果webview中打开显示跳转到小程序的按钮

// 跳转小程序按钮是否显示 ，由于我使用wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) }) 
//获取当前环境好像有点bug(如果有知道的小伙伴，可以评论区或者私信告诉我哦~感谢),
//就采用了让小程序在跳转的时候加了一个参数intoType = webview,如果有此参数就显示，否则不显示
  showWebView() {
    var ua = navigator.userAgent.toLowerCase()
    if (
      ua.match(/MicroMessenger/i) &&
      ua.match(/MicroMessenger/i).toString() === 'micromessenger' &&
      this.getUrlParam('intoType') &&
      this.getUrlParam('intoType') === 'webview'
    ) {
      // ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
      this.isShowWebView = true
      return false
      // wx.miniProgram.getEnv(res => {
      //   if (res.miniprogram) {
      //     this.isShowWebView = true
      //     alert('在小程序里')
      //     return false
      //   } else {
      //     this.isShowWebView = false
      //     alert('不在小程序里')
      //     return false
      //   }
      // })
    } else {
      this.isShowWebView = false
      return false
    }
  },

3.this.getUrlParam(‘intoType’) 方法

// h5页面获取小程序传参
  getUrlParam(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) return unescape(r[2])
    return null
  }

4.点击跳转

// webview 跳转小程序
  backWebView() {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js'
    document.body.appendChild(script)
    wx.miniProgram.reLaunch({
      url: '/pages/agent/goods/list/index',
      success: function () {
        console.log('success')
      },
      fail: function () {
        console.log('fail')
      }
    })
  },