uni-app 小程序点击按钮跳转其他小程序

270 阅读1分钟

这篇笔记主要记录uni-app 小程序点击按钮跳转其他小程序,通过wx.navigateToMiniProgram方法实现。 参考文档

image.png

跳转代码,就是一个按钮加一个点击事件,然后调用微信的wx.navigateToMiniProgram, 按要求传参就行了

<template>
  <view class="homeLayout">
    记录生活
    <button @click="navigateToMiniProgram">Go to Mini Program</button>
   </view>
</template>

<script setup>

</script>

<script setup>
const navigateToMiniProgram = () => {
  wx.navigateToMiniProgram({
    appId: "wx511abe7a13783591", // 要打开的小程序 appId
    path: "pages/index/index", // 打开的页面路径,如果为空则打开首页
    extraData: { // // 需要传递给目标小程序的数据
      foo: "bar",
    },
    envVersion: "release",
    success(res) {
      console.log("Navigation successful:", res);
    },
    fail(err) {
      console.error("Navigation failed:", err);
    },
  });
};
</script>
<style lang="scss">
    .homeLayout {
        height: 100vh;
        //background: #BDE1FB;
        display: flex;
        flex-direction: column;
    }
</style>

动图说明点击按钮跳转,点击按钮会弹出一个信息框,是否允许跳转,点击允许后就可以跳转。

miniProgram.gif