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

这篇具有很好参考价值的文章主要介绍了Vue项目(H5)与微信小程序来回跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

新建H5页面

在小程序里面新建一个名为H5的文件夹,以及H5页面文章来源地址https://www.toymoban.com/news/detail-851026.html

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处理
在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); // 页面跳转失败的回调函数
        },
      });
    },

到了这里,关于Vue项目(H5)与微信小程序来回跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp项目编译成H5后跳转到微信小程序(支持微信扫码、支付宝扫码)

    uniapp项目编译成 H5 后跳转到 微信小程序 (支持微信H5、支付宝H5) 场景:1、微信扫码跳转到该H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序;2、支付宝扫码跳转到H5中后点击某事件(或者不点击直接跳转)需要跳转到微信小程序 思路:调用后端接口返回

    2024年02月13日
    浏览(50)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果: 1.登录微信公众平台,进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后,可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中,将js-sdk挂载

    2024年02月11日
    浏览(62)
  • H5页面跳转微信小程序

    微信浏览器中实现跳转 使用微信官方接口 wx-open-launch-weapp (该方法只开放给已认证的服务号或者小程序云开发的静态网站托管绑定的域名下的网页) 案例代码 相关文档 目录 | 微信开放文档 微信开发者平台文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.htm

    2023年04月17日
    浏览(68)
  • 微信小程序如何跳转H5页面

    1、登录微信公众后台,进入【开发-开发管理-业务域名】,点击修改。 2、首先请下载校验文件,并将文件放置在域名根目录下。 我是把文件放在nginx主机的data目录下,然后通过增加nginx.config配置,重启nginx后可以通过域名直接访问该校验文件;  nginx.config配置如下:  如何

    2024年02月11日
    浏览(56)
  • 微信小程序跳转H5、小程序、App

    日常开发业务中会遇到微信小程序与H5、其他小程序、App之间的相互跳转,客户对引流用户非常在意。此处粗浅的介绍了微信小程序跳转H5、小程序、App的实现思路。 1、跳转H5 使用微信开放组件 web-view 在微信公众平台-小程序后台配置业务域名,要将校验文件放置到域名根目

    2024年02月16日
    浏览(39)
  • 微信小程序与h5的相互跳转

    微信小程序跳转内嵌的h5: 在微信小程序内编写webview文件,通过webview去跳转h5,loadUrl为h5的地址 嵌套的h5跳回微信小程序内部 h5中引入微信jsSdk,通过wx.miniProgram.navigateTo返回至微信小程序内部 可以通过wx-open-launch-weapp,URL Scheme和URL Link三种方式,每天生成 URL Scheme 和 URL Lin

    2024年02月10日
    浏览(32)
  • vue网页实现与微信小程序进行数据通信

    我们是利用的微信小程序web-view引入的vue网页链接,所以我们先查看一下web-view的默认属性和方法 属性 类型 默认值 必填 说明 最低版本 src string 否 webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 1.6.4 bindmessage eventhandler 否

    2024年02月16日
    浏览(38)
  • uniapp webview H5跳转微信小程序

    第一步:manifest.json 第二步:index.html 第三步 H5跳转微信小程序代码

    2024年02月10日
    浏览(55)
  • uniapp微信公众号(h5)端跳转微信小程序

    !!!不是微信公众号菜单跳转小程序 微信公众号菜单跳转小程序:公众号和小程序相互关联,在公众号的自定义菜单中配置即可 1、 绑定域名  2、安装依赖 jweixin-module 3、 引入挂载 !!!main.js引入挂载 !!!单页面引入挂载 4、 通过 config 接口注入权限验证配置(需要后

    2024年02月13日
    浏览(111)
  • 微信H5(公众号)跳转微信小程序实现及其传参

    其中:         username:目标小程序的原始id;         path : 所需跳转的小程序内页面路径及参数( 传参采取挂参的形式传递 ); ps:目标小程序接收参数时要在index的onload里面接收直接 options.XXX就可以。 https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-lin

    2024年02月09日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包