小程序的webview里面的h5点击按钮跳到小程序的页面；h5唤

  <div v-show="showIcon" style="width: 50px;height: 57px;z-index:9999;" :style="{ position: 'fixed', right: buttonStyle.right, top: buttonStyle.top, transform: buttonStyle.transform }"
     @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" @touchcancel="endDrag"   >
    <div style="position: absolute;z-index:1" class="floating-button" v-if="userAgent==1||userAgent==2">
      <img :src="serviceImg" @click="gotoMin"/>
    </div>
    <div style="width: 50px;height: 57px;position:absolute;z-index:2"  v-if="userAgent==2" >
      <wx-open-launch-weapp id="kefu-btn" :username="username" path="pages/home/main" 
      @launch="onLaunchSuccess"
      @error="onLaunchError"
      style="width: 50px;height: 57px;position:absolute; z-index: 3;" >
        <script type="text/wxtag-template">
          <div style="width: 50px;height: 57px;"></div>
        </script>
      </wx-open-launch-weapp>
    </div>
  </div>

根据业务需求按钮必须得是一个图片，具体标签根据自己的业务实现。
userAgent==1是在小程序里面打开的h5，通过点击图片，跳转到小程序，执行的是gotoMin方法；
userAgent==2是在微信h5打开的页面，点击图片，本质执行的是wx-open-launch-weapp，根据我的项目需求样式的原因要展示图片所以就吧wx-open-launch-weapp罩在图片上方了。其中username是对应小程序后台设置里面的原始ID的值。
其中wx-open-launch-weapp 的引入先通过后端接口获取到jssdk_param 参数，然后通过微信的hssdk引入这个组件。

this.$http.get(CONFIG_BURYING.jssdk).then(res => {
          let response = res.data;
          if (response.code == 0) {
            this.jssdk_param = response.data.jssdk;
          } else {}
        }).catch(e => {})
 this.$nextTick(() => {
          let jssdk_param = this.jssdk_param;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: jssdk_param.appId, // 必填，公众号的唯一标识
            timestamp: jssdk_param.timestamp, // 必填，生成签名的时间戳
            nonceStr: jssdk_param.noncestr, // 必填，生成签名的随机串
            signature: jssdk_param.signature, // 必填，签名
            jsApiList: [
              "onMenuShareTimeline", //分享到朋友圈
              "onMenuShareAppMessage", //分享给朋友
              "onMenuShareQQ", //分享到QQ
              "onMenuShareWeibo", //分享到腾讯微博
              "onMenuShareQZone", //分享到QQ空间
              "hideMenuItems", //批量隐藏功能按钮接口
            ], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
          });
}）

mounted() {
      var that = this;
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        wx.miniProgram.getEnv((res) => {
          if (res.miniprogram) {
            that.userAgent = 1;
          } else {
            that.userAgent = 2;
          }
        })
      }
      that.wxparams = {
        ...that.jssdk_param
      }
    },
    methods: {
      onLaunchSuccess(event) {
        console.log('成功打开小程序', event);
      },
      onLaunchError(event) {
        console.log('打开小程序失败', event);
      },
      getUrlparams(key) {
        let url = location.search.substring(1) || ''
        let value = ''
        url.split('&').forEach(item => {
          let keyArr = item.split('=')
          if (keyArr[0] === key) {
            value = keyArr[1]
          }
        })
        return value
      },

      gotoMin() {
        var that = this;
        if (that.userAgent == 1) {
          wx.miniProgram.navigateTo({
            url: `/pages/customMessage/main`
          })
        }

      },
}

项目亲测可用。

生活纵然有一万个为什么。 终究也抵不过一句没什么， 苦而不言， 喜而不语， 或许才是生活最好的状态。

005u6VFBly1hh57uwx4qjj30j60j60xp.jpg