公众号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 真机上才生效 若没效果请加我微信探讨~