Vue项目(H5)与微信小程序来回跳转

新建H5页面

在小程序里面新建一个名为H5的文件夹,以及H5页面

javascript 复制代码
H5.WXML
<web-view src="{{h5Url}}" bindmessage="handleGetMessage"></web-view>

H5.JS
  data: { 
  h5Url:'https://xxx.com/login' 要跳转的H5页面
  },

H5回来的回调方法
  handleGetMessage: function (e) {
    console.log('handleGetMessage', e)
    if (e.detail.data[0].result == 'success') {
      // 确认支用-签约成功调用
    }
  },

onLoad(options){

H5跳转回来后的参数在options里面

}
Vue处理
javascript 复制代码
在index.html里面新增
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

// 跳回小程序
    goBackMini() {
      wx.miniProgram.navigateTo({
        url: `/pages/insure/pay?paymentNo=33&checkNo=222`, // 指定跳转至小程序页面的路径
        success: (res) => {
          console.log(res); // 页面跳转成功的回调函数
        },
        fail: (err) => {
          console.log(err); // 页面跳转失败的回调函数
        },
      });
    },
相关推荐
DaMu16 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员16 分钟前
一文读懂Font文件
前端
Asort18 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer19 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安22 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑22 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码25 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉26 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin26 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin28 分钟前
TypeScript设计模式:观察者模式
前端·后端·typescript