vue 使用wx-open-launch-weapp 打开微信小程序

最新推荐文章于 2025-04-23 20:10:10 发布

郭小洛

最新推荐文章于 2025-04-23 20:10:10 发布

阅读量3.4k

点赞数 2

分类专栏： vue 文章标签： vue 小程序 js 前端

本文链接：https://blog.youkuaiyun.com/u011389485/article/details/113766408

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

官网API说明：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

前期准备：

“weixin-js-sdk”: “^1.6.0”，必须1.6.0版本以上，因为需要支持配置openTagList: [‘wx-open-launch-weapp’]
当前域名需要在公众号后台配置js安全域名后，封装微信SDK函数，用于组件调用

// 下面是封装的axios,只需关注openTagList: ['wx-open-launch-weapp']与微信验签结束后是否返回config:ok
export default {
 	setShare(param = {}, callback) {
    let registerUrl = window.location.href
    // 需要encodeURIComponent 不然会有问题
    apiList.getGryJsapiSignerToken({
        query: {
          url: encodeURIComponent(registerUrl)
        },
        hasLoading: false
      }).then(res => {
        let { code,  data } = res
        console.log('请求微信配置成功>>>>', new Date().getTime(), data)
        if (Number(code) === 0) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: [
                'wx-open-launch-weapp'
            ], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
          })
          wx.ready(function () {
          })
          wx.error(function (res) {
            console.error(res, '>>>>>>>')
          })
        }
      })
    },
  }

在组件内部使用wx-open-launch-weapp拉起小程序，代码如下

<wx-open-launch-weapp
       id="launch-btn"
       username="gh_xxxxxxxxxxx"
       @launch="handleLaunchFn" 
       @error="handleErrorFn"
       path="/pages/index/index">
       <script type="text/wxtag-template">   
           <style>.btns{font-family: PingFangSC-Semibold;font-size: 13px;color: #F1C087;text-decoration: underline;}</style>
           <span class="btns">“打开小程序”</span>
       </script>
   </wx-open-launch-weapp>

官网demo中使用<template></template>会跟vue有冲突，需要修改成<script type="text/wxtag-template"></script >;
username是小程序原始id，没有的小伙伴请找你们对应的运营或者后台程序员索取；path是指跳转的小程序链接
需要在main.js添加一句代码过滤掉wx-open-launch-weapp组件声明，不然会报wx-open-launch-weapp未定义的错误！！！！重要

Vue.config.ignoredElements = ['wx-open-launch-weapp']

问题总结：如有遇到真机标签不显示，请使用<script type="text/wxtag-template"></script >；或者遇到点击没反应的情况则需要在开发工具上看看与weixin-js-sdk.js握手时是否返回config:ok；版本必须是1.6.0以上。