wx-open-launch-weapp

wx-open-launch-weapp 怎么拿到vue data中的属性

答案参考Chatgpt解答
要在 Vue 的 data 中访问属性，并将其传递给 wx-open-launch-weapp 组件，您可以按照以下步骤进行操作：

在 Vue 的 data 中定义您想要访问的属性。例如，假设您有一个名为 appName 的属性，您可以在 data 中这样定义：

data() {
  return {
    appName: 'My App',
    // 其他属性...
  };
},

在模板中使用该属性。您可以在模板中通过双花括号语法（{{ }}）或指令（v-bind）来访问和绑定该属性。例如，将 appName 属性传递给 wx-open-launch-weapp 组件的 appname 属性：

<template>
  <wx-open-launch-weapp appname="{{appName}}"></wx-open-launch-weapp>
</template>

或者使用 v-bind：

<template>
  <wx-open-launch-weapp v-bind:appname="appName"></wx-open-launch-weapp>
</template>

确保您的组件和模板正确导入和注册。请确保在 Vue 组件中正确导入和注册 wx-open-launch-weapp 组件。

import wxOpenLaunchWeapp from 'wx-open-launch-weapp';

export default {
  components: {
    wxOpenLaunchWeapp,
  },
  // 其他组件选项...
};

通过以上步骤，您应该能够从 Vue 的 data 属性中访问并将其传递给 wx-open-launch-weapp 组件。请根据您的实际需求和组件属性进行适当的调整。

这篇博客: vue 使用wx-open-launch-weapp 打开微信小程序中的 前期准备： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

“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以上。

以下回答由chatgpt基于相关博客总结生成:
在Vue的data对象中获取wx-open-launch-weapp的属性值的方法和data对象无关，需要在使用wx-open-launch-weapp标签的地方获取相应的属性值。具体代码可参考参考资料中的例子。另外，在使用wx-open-launch-weapp标签前需要先在Vue的main.js中配置Vue.config.ignoredElements = ['wx-open-launch-weapp']，避免出现未定义的错误。