vue uniapp wx-open-launch-weapp开放标签的使用

在Vue和uni-app中使用wx-open-launch-weapp开放标签，可以用来引导用户在微信外部打开小程序。以下是一个简单的示例：

首先，确保你的项目已经配置了对应的微信开放能力。

1. 在pages.json中配置你的页面：

{
  "pages": [
    // ... 其他页面配置
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    // ... 全局样式配置
  }
}

2. 在页面中使用wx-open-launch-weapp开放标签：

<template>
  <view>
    <button @click="launchWeapp">打开小程序</button>
    <wx-open-launch-weapp username="小程序username" path="小程序页面路径">
      <template v-slot:default>
        <image src="自定义的图片路径" mode="aspectFit"></image>
      </template>
    </wx-open-launch-weapp>
  </view>
</template>
 
<script>
export default {
  methods: {
    launchWeapp() {
      // 调用微信API打开小程序
      wx.openLaunchWeapp({
        username: "小程序username", // 小程序原始id
        path: "小程序页面路径" // 打开的页面路径，若不填则打开首页
      });
    }
  }
};
</script>

在上面的代码中，替换username和path为你的小程序信息。wx-open-launch-weapp的default插槽可以用来自定义打开小程序时的按钮样式。

注意：wx-open-launch-weapp是微信小程序开放数据组件，在非微信环境下不会生效。确保你的项目配置正确，并且在微信小程序中测试该功能。