公众号H5跳转小程序

第一步：引入jweixin

<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二步：签名

import { getSignatureConfig } from '@/api/signature'
import wx from 'jweixin-module'
export const wxSdkConfig = () => {
    const params = {
        url: window.location.href.split('#')[0]
    }
    getSignatureConfig(params).then(res => {
        if (res.errCode === 0) {
            const data = JSON.parse(res.data)
            // console.log('打印配置参数', data)
            setSignatureConfig(data)
        } else {
            console.log('签名接口报错1', res.errMsg)
        }
    }).catch(err => {
        console.log('签名接口报错', err)
    })
}

function setSignatureConfig (data) {
    console.log("签名数据",data);
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'previewImage', 'hideMenuItems', 'chooseImage'], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-weapp']
    })

    wx.ready(function () {
        console.log("执行了ready");
        // const params = {
        //     title: 'Eppendorf 产品商城', // 分享标题
        //     desc: 'Eppendorf 产品商城', // 分享描述
        //     link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        //     imgUrl: 'https://eppendorf.juplus.cn/eppendorf_single/logo.png' // 分享图标
        // }
        // wxShare(params)
    })

    wx.error(function (err) {
        console.log('打印错误', err)
    })
}

// 分享给朋友或者朋友圈
export function wxShare (params) {
    wx.updateAppMessageShareData({
        ...params,
        success: function () {
            // 设置成功
            console.log('分享成功,自定义“分享给朋友”及“分享到QQ”按钮的分享内容')
        }
    })

    wx.updateTimelineShareData({
        ...params,
        success: function () {
            // 设置成功
            console.log('分享成功,自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容')
        }
    })
}

// 隐藏功能按钮
export function hideMenuItems (params) {
    wx.hideMenuItems({
        menuList: [...params] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
    })
}

// 获取微信签名
wxSdkConfig();

第三步：main.js中配置

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

第四步：使用微信开放标签

<template>
    <div class="main">
      <epp-banner :type="1"></epp-banner>
      <div class="menu-list">
          <div class="menu-item" v-for="(item,index) in menuList" :key="index">
              <div v-if="item.jumpApplet">
                  <wx-open-launch-weapp
                      style="height: 100%;width: 100%;"
                      id="launch-btn"
                      appid="wx78248ab2e6a420ec"
                      username="gh_464305d43974"
                      path="pages/index/index"
                      >
                      <script type="text/wxtag-template">
                          <style>
                              .menu-item-img {
                                  position: relative;
                                  display: flex;
                                  justify-content: center;
                                  margin-top: .8rem;
                              }
                              .menu-item-img .menu-img {
                                  width: 2.6rem;
                                  height: 2.4333rem;
                              }
                              .menu-item-img .menu-img-bgc {
                                  position: absolute;
                                  bottom: 0;
                                  width: 4.3667rem;
                                  height: 1.3667rem;
                              }
                              .f-s-12 {
                                  margin-top: .6rem;
                                  font-size: 12px;
                                  text-align: center;
                              }
                          </style>
                          <div class="menu-item-img">
                              <img fit="fill" class="menu-img" src="{{ cdnUrl + item.img }}" />
                              <img fit="fill" class="menu-img-bgc" src="{{ cdnUrl + 'FkilH56BxBbo7on8WBbu1eXwwHip' }}" />
                          </div>
                          <p class="f-s-12">{{ item.name }}</p>
                      </script>
                  </wx-open-launch-weapp>
              </div>
              <div v-else  @click="handleUrl(item.url)">
                  <div class="menu-item-img">
                      <van-image fit="fill" class="menu-img" :src="cdnUrl + item.img" />
                      <van-image fit="fill" class="menu-img-bgc" :src="cdnUrl + 'FkilH56BxBbo7on8WBbu1eXwwHip'" />
                      <span v-if="item.tip" class="hot-tip">HOT</span>
                  </div>
                  <p class="f-s-12">{{ item.name }}</p>
              </div>
          </div>
      </div>
    </div>
  </template>