h5与小程序互相跳转,传参和获取参数

本文介绍H5页面如何跳转到小程序及传参,并演示了小程序跳转到H5的方法。同时,提供了从H5获取小程序传参和从小程序获取H5传参的实现方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、h5跳转到小程序

首先引入js文件
法一:

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

法二:

npm install weixin-js-sdk

在使用的vue单页面内引入:'import wx from 'weixin-js-sdk'

跳转方法
①跳转到小程序内页

wx.miniProgram.navigateTo({
        url: '/pages/content/content',
        //url: '/pages/content/content?id=1', 传参  
 });

②跳转到小程序tabbar页面

wx.miniProgram.switchTab({url: "/pages/index/index"})

2、小程序跳转到h5

①用webview标签,传入h5地址

<web-view src="{{path}}"></web-view>

②传参

this.setData({
      path: options.path + '?id=' + '哈哈哈'
})

3、h5页面获取小程序传参

function getSearchString(key, Url) {
    var str = Url;
    str = str.substring(1, str.length);
    var arr = str.split("&");
    var obj = new Object();
    for (var i = 0; i < arr.length; i++) {
      var tmp_arr = arr[i].split("=");
      obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
    }
    return obj[key];
  }
var search = window.location.search;
var data = getSearchString('data', search);

4、小程序获取h5传参

onLoad方法中获取

onLoad: function (options) {
	console.log(options.id);
},
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值