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

老婆出轨  论坛元老 | 前天 09:37 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1877|帖子 1877|积分 5631

功能需求

   H5 页面点击按钮后跳转到对应小程序
  开端实现方案 - 1

   使用微信 sdk 的 API navigateToMiniProgram
  代码

@/utils/wxApi.js 封装 - 微信初始化代码
  1. import wx from 'weixin-js-sdk'
  2. import { wechat_config_init_get } from '@/api/cancel.js'
  3. import { isAndroid } from '@/utils/utils'
  4. import { Toast } from 'vant'
  6. export function wxConfig() {
  7.   return new Promise((resolve, reject) => {
  8.     const url = isAndroid() ? window.location.href : window.location.href.replace(location.hash, '')
  9.     const that = this
  10.     wechat_config_init_get({ url: url })
  11.       .then(result => {
  12.         if (result.code === 200) {
  13.           const config = result.data
  14.           // that.appid = config.appid
  15.           wx.config({
  16.             debug: false,
  17.             beta: true,
  18.             appId: config.appid,
  19.             timestamp: config.timestamp,
  20.             nonceStr: config.nonceStr,
  21.             signature: config.signature,
  22.             jsApiList: [
  23.               'requestWxFacePictureVerify',
  24.               'checkIsSupportFaceDetect',
  25.               'navigateToMiniProgram'
  26.               // 所有要调用的 API 都要加到这个列表中
  27.             ]
  28.           })
  29.           wx.error(function (res) {
  30.             reject(res)
  31.             console.log(res)
  32.             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  33.             Toast.fail('微信配置初始化失败')
  34.           })
  35.           wx.ready(function (data) {
  36.             resolve(data)
  37.             console.log(data)
  38.           })
  39.         } else {
  40.           Toast.fail(result.code + '----' + result)
  41.         }
  42.       })
  43.       .catch(error => {
  44.         reject(error)
  45.         Toast.clear()
  46.         const msg = '获取微信配置失败!'
  47.         Toast.fail(error + msg)
  48.       })
  49.   })
  50. }
复制代码
PoliceAssistant.vue 点击按钮举行小程序跳转 代码
  1. <!-- 交警助手 -->
  2. <template>
  3.   <div class="PoliceAssistant" @click="toAI">
  4.     <img src="@/assets/images/police-assistant@2x.png" />
  5.     <span>交警助手</span>
  6.   </div>
  7. </template>
  9. <script>
  10. import wx from 'weixin-js-sdk'
  11. import { wxConfig } from '@/utils/wxApi'
  12. import { Toast } from 'vant'
  14. export default {
  15.   name: 'PoliceAssistant',
  16.   components: {},
  18.   data() {
  19.     return {}
  20.   },
  22.   computed: {},
  24.   watch: {},
  26.   created() {},
  28.   mounted() {
  29.     if (!this.$isZLbOrWxZlb()) {
  30.       wxConfig()
  31.     }
  32.   },
  34.   methods: {
  35.     toAI() {
  36.       wx.navigateToMiniProgram({
  37.         appId: '小程序的AppID',
  38.         path: 'pages/index/index', // 要跳转的小程序的页面
  39.         success(res) {
  40.           console.log('success', res)
  41.         },
  42.         fail(res) {
  43.           Toast.fail('跳转失败！')
  44.         }
  45.       })
  46.     }
  47.   }
  48. }
  49. </script>
  51. <style lang='scss' scoped>
  52. .PoliceAssistant {
  53.   position: absolute;
  54.   bottom: 10%;
  55.   right: 0;
  56.   img {
  57.     width: 85px;
  58.     height: 80px;
  59.   }
  60.   span {
  61.     position: absolute;
  62.     bottom: 15px;
  63.     left: 20px;
  64.     font-size: 10px;
  65.   }
  66. }
  67. </style>
复制代码
题目


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

  • 找公众号负责人排查当前公众号是否开放当前API权限，也找不到在哪里开权限。
  • 无奈，只能使用下一个办法↓↓↓
  开端实现方案 - 2

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

index.html
  1. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
复制代码
vue.config.js
  1. module.exports = {
  2.   chainWebpack: config => {
  3.     config.module
  4.       .rule('vue')
  5.       .use('vue-loader')
  6.       .tap(options => {
  7.         options.compilerOptions = {
  8.           ...options.compilerOptions,
  9.           isCustomElement: tag => tag.startsWith('wx-')
  10.         }
  11.         return options
  12.       })
  13.   }
  14. }
复制代码
@/utils/wxApi.js 封装 - 微信初始化代码
  1. import wx from 'weixin-js-sdk'
  2. import { wechat_config_init_get } from '@/api/cancel.js'
  3. import { isAndroid } from '@/utils/utils'
  4. import { Toast } from 'vant'
  5. export function wxConfig() {
  6.   return new Promise((resolve, reject) => {
  7.     const url = isAndroid() ? window.location.href : window.location.href.replace(location.hash, '')
  8.     // const url = 'https://jj.gaj.ningbo.gov.cn/qxksh5/'
  9.     const that = this
  10.     wechat_config_init_get({ url: url })
  11.       .then(result => {
  12.         if (result.code === 200) {
  13.           const config = result.data
  14.           // that.appid = config.appid
  15.           wx.config({
  16.             debug: false,
  17.             beta: true,
  18.             appId: config.appid,
  19.             timestamp: config.timestamp,
  20.             nonceStr: config.nonceStr,
  21.             signature: config.signature,
  22.             jsApiList: [
  23.               'requestWxFacePictureVerify',
  24.               'checkIsSupportFaceDetect',
  25.               'navigateToMiniProgram'
  26.               // 所有要调用的 API 都要加到这个列表中
  27.             ],
  28.             openTagList: ['wx-open-launch-weapp']
  29.           })
  30.           wx.error(function (res) {
  31.             reject(res)
  32.             console.log(res)
  33.             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  34.             Toast.fail('微信配置初始化失败')
  35.           })
  36.           wx.ready(function (data) {
  37.             resolve(data)
  38.             console.log(data)
  39.           })
  40.         } else {
  41.           Toast.fail(result.code + '----' + result)
  42.         }
  43.       })
  44.       .catch(error => {
  45.         reject(error)
  46.         Toast.clear()
  47.         const msg = '获取微信配置失败!'
  48.         Toast.fail(error + msg)
  49.       })
  50.   })
  51. }
复制代码
PoliceAssistant.vue 点击按钮举行小程序跳转 代码
  1. <!-- 交警助手 -->
  2. <template>
  3.   <div class="PoliceAssistant" @click="toAI">
  4.     <!-- 【办法一】 -->
  5.     <!-- <wx-open-launch-weapp id="launch-btn" username="gh_开头的原始id" path="pages/index/index">
  6.       <img src="@/assets/images/police-assistant@2x.png" />
  7.       <span>交警助手</span>
  8.     </wx-open-launch-weapp> -->
  9.     <!-- 【办法2】 -->
  10.     <wx-open-launch-weapp id="launch-btn" username="gh_开头的原始id" path="pages/index/index">
  11.       <script type="text/wxtag-template">
  12.         <style>
  13.           img {
  14.             width: 85px;
  15.             height: 80px;
  16.           }
  17.           span {
  18.             position: absolute;
  19.             bottom: 15px;
  20.             left: 20px;
  21.             font-size: 10px;
  22.           }
  23.         </style>
  24.         <img src="../assets/images/police-assistant@2x.png" />
  25.         <span>交警助手</span>
  26.       </script>
  27.     </wx-open-launch-weapp>
  28.   </div>
  29. </template>
  31. <script>
  32. import wx from 'weixin-js-sdk'
  33. import { wxConfig } from '@/utils/wxApi'
  34. import { Toast } from 'vant'
  36. export default {
  37.   name: 'PoliceAssistant',
  38.   components: {},
  40.   data() {
  41.     return {}
  42.   },
  44.   computed: {},
  46.   watch: {},
  48.   created() {},
  50.   mounted() {
  51.     if (!this.$isZLbOrWxZlb()) {
  52.       wxConfig()
  53.         .then(() => {
  54.           this.initWxConfig()
  55.         })
  56.         .catch(err => {
  57.           console.error('wx config failed:', err)
  58.           Toast.fail('微信配置失败')
  59.         })
  60.     }
  61.   },
  63.   methods: {
  64.     initWxConfig() {
  65.       wx.ready(() => {
  66.         console.log('wx-jssdk 初始化成功')
  67.         this.bindWxEvents()
  68.       })
  70.       wx.error(err => {
  71.         console.error('wx-jssdk 初始化失败:', err)
  72.         Toast.fail('微信初始化失败')
  73.       })
  74.     },
  76.     bindWxEvents() {
  77.       const btnElem = document.getElementById('launch-btn')
  78.       if (btnElem) {
  79.         btnElem.addEventListener('launch', e => {
  80.           console.log('跳转小程序成功')
  81.         })
  82.         btnElem.addEventListener('error', e => {
  83.           console.log('跳转小程序失败', e.detail)
  84.           Toast.fail('跳转失败！')
  85.         })
  86.       }
  87.     },
  89.     toAI() {
  90.       // 移除这个方法中的事件绑定逻辑，因为现在在 wx.ready 后就绑定了
  91.     }
  92.   }
  93. }
  94. </script>
  96. <style lang='scss' scoped>
  97. .PoliceAssistant {
  98.   position: absolute;
  99.   bottom: 10%;
  100.   right: 0;
  101.   img {
  102.     width: 85px;
  103.     height: 80px;
  104.   }
  105.   span {
  106.     position: absolute;
  107.     bottom: 15px;
  108.     left: 20px;
  109.     font-size: 10px;
  110.   }
  111. }
  112. </style>
复制代码
题目

   PoliceAssistant.vue 文件中
  

  • 【办法一】的按钮能出来，但是点击没有任何反应
  • 【办法二】的按钮不表现
  • 再去排查开放标签题目 ↓↓↓
  

   如图所示 红色 框框住的内容，开放标签 'wx-open-launch-weapp' 没有初始化成功，微信初始化 debug 报错 {"errMsg":"configk","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
  1. import request from '@/utils/request'
  3. /** 获取宁波AI小程序地址 **/
  4. export function getUrlLink(params) {
  5.   return request({
  6.     url: '/application/miniProgram/getUrlLink?path=/pages/index/index',
  7.     method: 'get',
  8.     params
  9.   })
  10. }
复制代码
PoliceAssistant.vue 点击按钮举行小程序跳转 代码
  1. <!-- 交警助手 -->
  2. <template>
  3.   <div class="PoliceAssistant" @click="toAI">
  4.     <img src="@/assets/images/police-assistant@2x.png" />
  5.     <span>交警助手</span>
  6.   </div>
  7. </template>
  9. <script>
  10. import { getUrlLink } from '@/api/common'
  11. import { Toast } from 'vant'
  13. export default {
  14.   name: 'PoliceAssistant',
  15.   components: {},
  17.   data() {
  18.     return {}
  19.   },
  21.   computed: {},
  23.   watch: {},
  25.   created() {},
  27.   mounted() {},
  29.   methods: {
  30.     toAI() {
  31.       getUrlLink()
  32.         .then(res => {
  33.           if (res.data) {
  34.             window.location.href = res.data
  35.           } else {
  36.             Toast.fail('跳转小程序失败，请稍后重试！')
  37.           }
  38.         })
  39.         .catch(() => {
  40.           Toast.fail('跳转小程序失败，请稍后重试！')
  41.         })
  42.     }
  43.   }
  44. }
  45. </script>
  47. <style lang='scss' scoped>
  48. .PoliceAssistant {
  49.   position: absolute;
  50.   bottom: 10%;
  51.   right: 0;
  52.   img {
  53.     width: 85px;
  54.     height: 80px;
  55.   }
  56.   span {
  57.     position: absolute;
  58.     bottom: 15px;
  59.     left: 20px;
  60.     font-size: 10px;
  61.   }
  62. }
  63. </style>
复制代码
最终效果


别人类似的题目

https://juejin.cn/post/6932023969759363080

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

老婆出轨

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表