目录

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

JAY.LIN 收录于未分类

2024-10-14 约 699 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=130742570

目录

微信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>