vue3项目中实现调用微信小程序中的wx.miniProgram.navigateTo()跳转值指定小程序

最新推荐文章于 2026-06-05 22:37:25 发布

原创最新推荐文章于 2026-06-05 22:37:25 发布 · 219 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

if时光重来

关注

标签

#小程序 #微信小程序

分类前端开发

收录于

跳转小程序前提：需要当前小程序（或公众号）与跳转的小程序有关联

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

wechatDemo.vue

<template>
<button @click="toWechat(extraData)">点击跳转</button>
</template>
<script lang="ts" setup>
const wx = window.wx;
let params = {token: ''};
const extraData = ref(JSON.stringify(params));
// extraData是其他参数，如果有自行传入
const toWechat = (extraData) => {
return new Promise((resolve, reject) => {
    wx.miniProgram.navigateTo({
      url: `/pages/pub/other?appCode=跳转小程序appid&appName=小程序名称&path=/pages/index/index&extraData=${encodeURI(extraData)}`,
      success: resolve,
      fail: reject,
    });
  });
}

</script>