通过微信小程序webview嵌套vue2项目相互跳转_微信小程序 webview 如何和里面的vue项目通讯

首先如果你是小程序嵌套，而不是公众号嵌套的话，根本不需要按照网上的,说要配置在vue项目中引入weixin-js-sdk插件，并且需要wx.config配置

对于小程序中的 WebView 嵌套 Vue2 项目，不需要进行类似公众号中的 wx.config 相关的配置。小程序中的 WebView 是在小程序环境内嵌入的网页，可以直接通过小程序提供的 wx.navigateTo、wx.navigateBack 等 API 进行页面跳转和参数传递，不需要进行额外的配置。

而在公众号中的 WebView 嵌套 Vue2 项目，则通常需要使用微信公众平台提供的 JSSDK，通过 wx.config 来注入权限验证配置，以实现在公众号环境下与 WebView 之间的通信。这是因为公众号在安全考虑上要求进行权限验证，而小程序则不需要。

所以，在小程序中嵌套 Vue2 项目时，并不需要进行 wx.config 相关的配置。直接使用小程序提供的 API 进行页面跳转和参数传递即可。

npm到项目中：

在vue组件中引入：

import wx from "weixin-js-sdk";

 现在在vue2项目中使用微信的api了（注意 ！如果当前没有被微信webview嵌套的话是没有任何效果的）

跳转微信小程序普通页面

wx.miniProgram.navigateTo({ url: 这里写上要跳转的小程序页面路径 });

小程序部分：

onLoad(options) {
    wx.getSetting({
      withSubscriptions: true,
      success(res) {
        // 判断用户是否已经授权订阅消息
        if (res.subscriptionsSetting.mainSwitch === true && res.subscriptionsSetting.itemSettings) {
          // 用户已经授权，可以进行相应操作
          console.log("用户已经授权订阅消息");
          wx.navigateBack({
            delta: 1, // 返回的页面数，根据实际情况进行调整
            success: function() {
 
            }
          });
        } else {
          // 用户未授权，展示订阅消息提示
          console.log("用户未授权订阅消息，展示提示");
          showSubscriptionMessageTip();
        }
      },
      fail(res) {
        console.log("获取用户订阅消息设置失败", res);
      }
    });
 
    function showSubscriptionMessageTip() {
      wx.showModal({
        title: "订阅消息提醒",
        content: "我们将向您发送消息通知，请允许通知。",
        confirmText: "确定",
        showCancel: false,
        success(res) {
 
 
 
          if (res.confirm) {
 
            // // 调用订阅消息的逻辑
            let workTaskTemplateId = 'NQrgV4zYF7naJ34NbjigkWaVm_VrgyjHe_lbGPeYzDk'; // 替换为你自己的模板ID
            let workTaskTemplateId2 = 'NQrgV4zYF7naJ34NbjigkWaVm_VrgyjHe_lbGPeYzDk'; // 替换为你自己的模板ID
            wx.requestSubscribeMessage({
              tmplIds: [workTaskTemplateId, workTaskTemplateId2],
              success(res) {
                console.log(res);
                if (res[workTaskTemplateId] == "accept") {
                  console.log("成功");
 
 
                  //  成功就回去
                  wx.navigateBack({
                    delta: 1, // 返回的页面数，根据实际情况进行调整
                    success: function() {
 
                    }
                  });
 
 
                } else {
                  console.log("用户拒绝");
                  wx.navigateBack({
                    delta: 1, // 返回的页面数，根据实际情况进行调整
                    success: function() {
                      const pages = getCurrentPages(); // 获取当前页面栈
                      if (pages.length >= 2) {
                        const prevPage = pages[pages.length - 2]; // 找到上一层页面
                        prevPage.receiveParam('someValue'); // 调用上一层页面的接收参数方法，并传递参数
                      }
                    }
                  });
 
                }
              },
              fail(res) {
                console.log(res);
                // 处理订阅消息失败的逻辑
              }
            });
 
 
 
          }
        }
      });
    }
  },

小程序效果：

 

然后再从小程序返上一层也就是webview包裹的vue项目中来