微信H5点击入口区域（图片）跳转小程序

首先获取签名并初始化config，封装一个公共方法，可以在src下的tools下建一个common.js。

import { getWXConfig } from '@/api/index'
import wx from 'weixin-js-sdk'
// 获取签名并初始化config
export function WXInit (jsApiList,openTagList) {
	return getWXConfig().then(res => {
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.appId, // 必填，公众号的唯一标识
			timestamp: res.data.timestamp, // 必填，生成签名的时间戳
			nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
			signature: res.data.signature, // 必填，签名
			jsApiList: jsApiList, // 必填，需要使用的JS接口列表 ['getLocation', 'openLocation']
			openTagList: openTagList, // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']

		})
	})
}

页面部分。 wx-open-launch-weapp放在如下位置这个是关键，之前把入口样式写在wx-open-launch-weapp里面，会导致从二级页面返回来不显示这个区域的样式。

<template>
    <div  class="item" style="position:relative;">
        <div class="itemcont">
            <div><img style=" width: 90px; height: 90px;margin-right: 5px;"
                    src="（图片地址，不能用本地图片，必须是线上地址图片）"
                    alt="" /></div>
            <div>
                <div class="itemtitle">充值缴费</div>
                <div class="itemtext" style="color: #A96DF8;">
                    一键充值即充即到
                </div>
            </div>
        </div>
        <wx-open-launch-weapp id="launch-btn" :username="wx_username" :path="wx_path"
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
            <script type="text/wxtag-template">
                <style>
                    .box {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;}
                    </style> 
               <div class="box"></div>
            </script>
        </wx-open-launch-weapp>
    </div>
    </template>

<script>
import { WXInit } from '@/tools/common'
export default {
  data() {
        return {
            wx_username: 'gh_xxxxxx',
            wx_path: 'pages/index/index.html',
        };
    },
     mounted() {
      WXInit(['getLocation'], ['wx-open-launch-weapp'])
        this.$wx.ready(() => {
            console.log("跳转小程序成功");
        })
     },
         methods: {
        // 监听跳转小程序方法,我觉得如果不需要写回调，就不用换这个
        toPage() {
            let launchButton = document.getElementById('launch-btn')
            console.log("launchButton=====", launchButton);
            launchButton.addEventListener('launch', function (e) {
                console.log('success', e)
            })

            launchButton.addEventListener('error', function (e) {
                console.log('fail', e)
            })

        },
}
</script>

<style lang="scss" scoped>
      .item {
        background-color: #ffffff;
        margin-bottom: 20px;
        padding: 17px 7px;
        box-shadow: 0px 0px 9px 0px rgba(199, 42, 9, 0.64),
          inset 0px 0px 8px 0px rgba(252, 82, 44, 0.5);
        border-radius: 15px;

        .itemcont {
          display: flex;
          text-align: left;

          .itemtitle {
            padding-top: 10px;
            font-size: 33px;
            font-weight: bold;
            color: #333333;

          }

          .itemtext {
            font-size: 20px;
            color: #999999;
            font-weight: 500;
          }
        }

        img {
          width: 90px;
          height: 90px;
          margin-right: 5px;
        }
      }
</style>