公众号h5跳转第三方小程序

1. 封装wx-open-launch.js

2. 需要的页面使用

1. html+css部分

2. js部分

重要

转载地址

公众号h5跳转第三方小程序 | 刘维_个人博客_编程秘籍_开发技巧_入门到精通_生活感悟

前言：用uniapp最新脚手架 vite+vue3同时开发微信小程序和微信公众号小程序跳转第三方小程序挺简单的 h5跳小程序就比较麻烦因为官方文档并不是那么直观

1. 封装wx-open-launch.js

export const launchWeApp = (info) => {
    if(info.active)
    {
        var btn = document.getElementById(info.eleId); 
        let script = document.createElement("script"); 
        script.type = "text/wxtag-template"; 
        script.text = info.content
        let html =
            `<wx-open-launch-weapp style="width:100%;height:100%;display:block;" appid="${info.appid}" 
                        path="${info.url}">${script.outerHTML}</wx-open-launch-weapp>`;
        btn.innerHTML = html;
        btn.addEventListener("launch", info.launchEvent);
        btn.addEventListener("error", info.errorEvent);
    }else{
        var btn = document.getElementById(info.eleId); //获取元素
        let html =
            `<view style="width:100%;height:100%;display:block;">${info.content}</view>`;
        btn.innerHTML = html;
        btn.addEventListener("click", info.noAtiveEvent);
    }   
}

export const launchApp = (info) => {
    if(info.active)
    {
        var btn = document.getElementById(info.eleId); 
        let script = document.createElement("script"); 
        script.type = "text/wxtag-template"; 
        script.text = info.content
        let html =
            `<wx-open-launch-app style="width:100%;height:100%;display:block;" appid="${info.appid}" 
                        extinfo="${info.extinfo}">${script.outerHTML}</wx-open-launch-app>`;
        btn.innerHTML = html;
        btn.addEventListener("launch", info.launchEvent);
        btn.addEventListener("error", info.errorEvent);
    }else{
        var btn = document.getElementById(info.eleId); //获取元素
        let html =
            `<view style="width:100%;height:100%;display:block;">${info.content}</view>`;
        btn.innerHTML = html;
        btn.addEventListener("click", info.noAtiveEvent);
    }   
}

2. 需要的页面使用

1. html+css部分

<template>
 <view class="bottom" style="position: relative;">
    <swiper
        circular
        :indicator-dots="false"
        autoplay="false" 
        :interval="4000"
        indicator-color="rgba(0, 0, 0, .3)"
        indicator-active-color="#F8526F"
        class="custom-swiper"
        :duration="500"
    >
        <swiper-item v-for="(item, index) in rightBotList" :key="index" class="custom-swiper-item">
            <view style="height:100%;position: relative;">
                <!-- 这个当做蒙版 盖在轮播图上面-->
                <view class="launch-btn" :id="`launch-btn-${index}`"></view>
                <image class="img" :src="item.url" mode="widthFit"></image>
            </view>
        </swiper-item>
    </swiper>
</view>
</template>

<style lang="scss" scoped>
.custom-swiper {
  width: 100%;
  height: 206upx;
  .launch-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
  }
  .custom-swiper-item {
      width: 100%;
      height: 430upx;
  }
  .img {
      width: 100%;
      height: 430upx;
   }
}
</style>

2. js部分

<script setup>
import { getSignApi } from '@/apis/home.js'
import { launchWeApp } from '@/utils/wx-open-launch.js'

const bannerList = ref([])

// 1、获取轮播图数据
async function getBannerData() {
 // 这里写死了美团外卖领红包的小程序页面跳转的路径和appid
 bannerList.value = [
     {
         toUrl: '/index/pages/h5/h5?weburl=https%3A%2F%2Fclick.meituan.com%2Ft%3Ft%3D1%26c%3D2%26p%3D
         zq7j_r5zV1Nn&lch=cps:w
aimai:5:86081985a9be798ae7437656dbae0d4d145:0fa9565545bbfc0077a7:
33:65604&f_token=1&f_userId=1',
         appid: 'wxde8ac0a21135c07d'
     }
 ]
 getSignData()
}
getBannerData()

// 2、获取签名数据 微信开发者工具打印config:ok才是生效的(这一步很关键 不然没效果)
async function getSignData() {
    const signData = await getSignApi({ url: location.href.split('#')[0] })
    wx.config({
        debug: false,
        appId: signData.appId, // 公众号的唯一标识
        timestamp: signData.timestamp, // 生成签名的时间戳
        nonceStr: signData.noncestr, // 生成签名的随机串
        signature: signData.signature, // 签名
        jsApiList: ['miniProgram'],
        openTagList: ["wx-open-launch-weapp"]
    })
    bannerList.value.forEach((item, index)=> {
        launchWeap(item, index)
    })
}

function launchWeap(item, index) {
    // 这里面的样式尽量铺满轮播图或者按钮 透明度调成0 层级比按钮要高
    let content = `
        <view  style="position: absolute; top: 0px; left: 0px; width: 200px; height: 
        200px; font-size: 20px; color: #000; z-index: 99; 
        background-color: rgba(255, 1, 0, 0); opacity: 0;">
        美团神券
        </view>
    `;

    let launchParams = {
        eleId: `launch-btn-${index}`, // 页面元素标签ID，必填
        url: item.toUrl,
        appid: item.parameter,
        content: content, // 按钮HTML元素及样式，必填
        launchEvent: function(e) {}, // 点击按钮正常跳转触发，必填
        errorEvent: function(e) {}, // 点击跳转抛出异常，必填
        active: true, // 按钮是否激活跳转小程序，为了满足个别情况下改按钮不需要跳转小程序
        noAtiveEvent: function() {} // 按钮不跳转小程序时的点击事件，active 为 true 时必填
    };
    launchWeApp(launchParams); // 引入JS之后调用launchWeApp
}
</script>

重要

必须先拿到获取到签名数据 wx.config初始化后再用原生方法插入dom 真机上才生效若没效果请加我微信探讨~

公众号h5跳转第三方小程序

1. 封装wx-open-launch.js

2. 需要的页面使用

1. html+css部分

2. js部分

重要

悦读