【公众号/小程序】微信H5跳转小程序踩过的坑！！！

【公众号/小程序】H5跳转小程序踩过的坑！！！

Fighting_p

2017人浏览 · 2025-02-28 16:15:33

Fighting_p · 2025-02-28 16:15:33 发布

功能需求

H5 页面点击按钮后跳转到对应小程序

初步实现方案 - 1

使用微信 sdk 的 API navigateToMiniProgram

代码

@/utils/wxApi.js 封装 - 微信初始化代码

import wx from 'weixin-js-sdk'
import { wechat_config_init_get } from '@/api/cancel.js'
import { isAndroid } from '@/utils/utils'
import { Toast } from 'vant'

export function wxConfig() {
  return new Promise((resolve, reject) => {
    const url = isAndroid() ? window.location.href : window.location.href.replace(location.hash, '')
    const that = this
    wechat_config_init_get({ url: url })
      .then(result => {
        if (result.code === 200) {
          const config = result.data
          // that.appid = config.appid
          wx.config({
            debug: false,
            beta: true,
            appId: config.appid,
            timestamp: config.timestamp,
            nonceStr: config.nonceStr,
            signature: config.signature,
            jsApiList: [
              'requestWxFacePictureVerify',
              'checkIsSupportFaceDetect',
              'navigateToMiniProgram'
              // 所有要调用的 API 都要加到这个列表中
            ]
          })
          wx.error(function (res) {
            reject(res)
            console.log(res)
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            Toast.fail('微信配置初始化失败')
          })
          wx.ready(function (data) {
            resolve(data)
            console.log(data)
          })
        } else {
          Toast.fail(result.code + '----' + result)
        }
      })
      .catch(error => {
        reject(error)
        Toast.clear()
        const msg = '获取微信配置失败!'
        Toast.fail(error + msg)
      })
  })
}

PoliceAssistant.vue 点击按钮进行小程序跳转代码

<!-- 交警助手 -->
<template>
  <div class="PoliceAssistant" @click="toAI">
    <img src="@/assets/images/police-assistant@2x.png" />
    <span>交警助手</span>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { wxConfig } from '@/utils/wxApi'
import { Toast } from 'vant'

export default {
  name: 'PoliceAssistant',
  components: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    if (!this.$isZLbOrWxZlb()) {
      wxConfig()
    }
  },

  methods: {
    toAI() {
      wx.navigateToMiniProgram({
        appId: '小程序的AppID',
        path: 'pages/index/index', // 要跳转的小程序的页面
        success(res) {
          console.log('success', res)
        },
        fail(res) {
          Toast.fail('跳转失败！')
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.PoliceAssistant {
  position: absolute;
  bottom: 10%;
  right: 0;
  img {
    width: 85px;
    height: 80px;
  }
  span {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-size: 10px;
  }
}
</style>

问题

在这里插入图片描述

由图中 绿色 框框住的内容可看出，navigateToMiniProgram 并未初始化成功，找了半天问题原因，试着排查权限问题

找公众号负责人排查当前公众号是否开放当前API权限，也找不到在哪里开权限。

无奈，只能使用下一个办法↓↓↓

初步实现方案 - 2

使用开放标签 wx-open-launch-weapp 进行H5跳转小程序

代码

index.html

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag.startsWith('wx-')
        }
        return options
      })
  }
}

@/utils/wxApi.js 封装 - 微信初始化代码

import wx from 'weixin-js-sdk'
import { wechat_config_init_get } from '@/api/cancel.js'
import { isAndroid } from '@/utils/utils'
import { Toast } from 'vant'
export function wxConfig() {
  return new Promise((resolve, reject) => {
    const url = isAndroid() ? window.location.href : window.location.href.replace(location.hash, '')
    // const url = 'https://jj.gaj.ningbo.gov.cn/qxksh5/'
    const that = this
    wechat_config_init_get({ url: url })
      .then(result => {
        if (result.code === 200) {
          const config = result.data
          // that.appid = config.appid
          wx.config({
            debug: false,
            beta: true,
            appId: config.appid,
            timestamp: config.timestamp,
            nonceStr: config.nonceStr,
            signature: config.signature,
            jsApiList: [
              'requestWxFacePictureVerify',
              'checkIsSupportFaceDetect',
              'navigateToMiniProgram'
              // 所有要调用的 API 都要加到这个列表中
            ],
            openTagList: ['wx-open-launch-weapp']
          })
          wx.error(function (res) {
            reject(res)
            console.log(res)
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            Toast.fail('微信配置初始化失败')
          })
          wx.ready(function (data) {
            resolve(data)
            console.log(data)
          })
        } else {
          Toast.fail(result.code + '----' + result)
        }
      })
      .catch(error => {
        reject(error)
        Toast.clear()
        const msg = '获取微信配置失败!'
        Toast.fail(error + msg)
      })
  })
}

PoliceAssistant.vue 点击按钮进行小程序跳转代码

<!-- 交警助手 -->
<template>
  <div class="PoliceAssistant" @click="toAI">
    <!-- 【办法一】 -->
    <!-- <wx-open-launch-weapp id="launch-btn" username="gh_开头的原始id" path="pages/index/index">
      <img src="@/assets/images/police-assistant@2x.png" />
      <span>交警助手</span>
    </wx-open-launch-weapp> -->
    <!-- 【办法2】 -->
    <wx-open-launch-weapp id="launch-btn" username="gh_开头的原始id" path="pages/index/index">
      <script type="text/wxtag-template">
        <style>
          img {
            width: 85px;
            height: 80px;
          }
          span {
            position: absolute;
            bottom: 15px;
            left: 20px;
            font-size: 10px;
          }
        </style>
        <img src="../assets/images/police-assistant@2x.png" />
        <span>交警助手</span>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { wxConfig } from '@/utils/wxApi'
import { Toast } from 'vant'

export default {
  name: 'PoliceAssistant',
  components: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    if (!this.$isZLbOrWxZlb()) {
      wxConfig()
        .then(() => {
          this.initWxConfig()
        })
        .catch(err => {
          console.error('wx config failed:', err)
          Toast.fail('微信配置失败')
        })
    }
  },

  methods: {
    initWxConfig() {
      wx.ready(() => {
        console.log('wx-jssdk 初始化成功')
        this.bindWxEvents()
      })

      wx.error(err => {
        console.error('wx-jssdk 初始化失败:', err)
        Toast.fail('微信初始化失败')
      })
    },

    bindWxEvents() {
      const btnElem = document.getElementById('launch-btn')
      if (btnElem) {
        btnElem.addEventListener('launch', e => {
          console.log('跳转小程序成功')
        })
        btnElem.addEventListener('error', e => {
          console.log('跳转小程序失败', e.detail)
          Toast.fail('跳转失败！')
        })
      }
    },

    toAI() {
      // 移除这个方法中的事件绑定逻辑，因为现在在 wx.ready 后就绑定了
    }
  }
}
</script>

<style lang='scss' scoped>
.PoliceAssistant {
  position: absolute;
  bottom: 10%;
  right: 0;
  img {
    width: 85px;
    height: 80px;
  }
  span {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-size: 10px;
  }
}
</style>

问题

PoliceAssistant.vue 文件中

【办法一】的按钮能出来，但是点击没有任何反应

【办法二】的按钮不显示

再去排查开放标签问题 ↓↓↓

在这里插入图片描述

如图所示 红色 框框住的内容，开放标签 'wx-open-launch-weapp' 没有初始化成功，微信初始化 debug 报错 {"errMsg":"config:ok","verifyJsApiList":["requestWxFacePictureVerify","checkIsSupportFaceDetect"],"verifyOpenTagList":[]} ,

开启 DeepSeek 之路 ↓

搜索报错信息

参考 deepseek 给的回复，解决方法 1-7 中只有 3 可能有问题，就去排查 检查开放标签权限 ，但是在 接口权限 页面中并没有找到 wx-open-launch-weapp ，怀疑是不是微信公众号性质 微信订阅号 / 微信服务号 的问题。

继续 deepseek ↓↓↓

微信订阅号 wx-open-launch-weapp 开放标签权限

通过以上 deepseek 回答，明白大概可能是因为我们的公众号是 订阅号 的问题,

想去小程序后台生成 url 跳转 ，但是找不到 工具 就找不到在哪里生成 url 跳转

继续deepseek ↓↓↓

小程序后台找不到工具栏

最后后端配合生成小程序跳转 url

最终解决办法

调用后端接口生成 url 直接跳转 url 地址打开小程序
获取加密URLLink

@/api/common.js

import request from '@/utils/request'

/** 获取宁波AI小程序地址 **/
export function getUrlLink(params) {
  return request({
    url: '/application/miniProgram/getUrlLink?path=/pages/index/index',
    method: 'get',
    params
  })
}

PoliceAssistant.vue 点击按钮进行小程序跳转代码

<!-- 交警助手 -->
<template>
  <div class="PoliceAssistant" @click="toAI">
    <img src="@/assets/images/police-assistant@2x.png" />
    <span>交警助手</span>
  </div>
</template>

<script>
import { getUrlLink } from '@/api/common'
import { Toast } from 'vant'

export default {
  name: 'PoliceAssistant',
  components: {},

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    toAI() {
      getUrlLink()
        .then(res => {
          if (res.data) {
            window.location.href = res.data
          } else {
            Toast.fail('跳转小程序失败，请稍后重试！')
          }
        })
        .catch(() => {
          Toast.fail('跳转小程序失败，请稍后重试！')
        })
    }
  }
}
</script>

<style lang='scss' scoped>
.PoliceAssistant {
  position: absolute;
  bottom: 10%;
  right: 0;
  img {
    width: 85px;
    height: 80px;
  }
  span {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-size: 10px;
  }
}
</style>

最终效果

在这里插入图片描述

别人类似的问题

https://juejin.cn/post/6932023969759363080

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

编程行业必备干货！12 个热门 AI 工具详细介绍

基于 AI 的代码补全工具，支持本地模型运行，确保代码隐私。AWS 推出的 AI 编程助手，支持 Python、Java、JavaScript 等，提供实时代码建议和安全漏洞检测，适合云服务开发场景。AI 项目管理工具，自动生成任务描述和进度报告，集成 Jira、Linear 等平台，提升团队协作效率。通过草图或文本生成前端代码的 AI 工具，支持 React、HTML/CSS 输出，适合快速原型

2048 AI社区

手把手教你学Simulink--基于基于智能电网与AI融合的场景实例：基于深度学习的电网负荷预测与调度建模

在智能电网（Smart Grid）时代，电力系统的运行正从“源随荷动”向“源-网-荷-储协同互动”转变。其中，精准的负荷预测经济调度需求响应新能源消纳电网安全稳定运行的核心前提。传统预测方法（如ARIMA、SVM）难以捕捉负荷的非线性、时变性、多影响因素特性。而深度学习（Deep Learning）模型，特别是LSTM（长短期记忆网络）、GRU，在处理时间序列数据方面表现出色，能有效学习负荷的日周