web-view小程序转发功能,web-view和小程序之间传参

web-view的src只能带一个参数src="…?a=1"

h5页面

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

 var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {   //判断是否是微信环境
  
//微信环境
wx.miniProgram.getEnv(function (res) {
  if (res.miniprogram) {
    // 小程序环境下逻辑
    //小程序发送信息```
    var info = {
      title: '11', //参数一
      value: '22', //参数二
    };

    wx.miniProgram.postMessage({
      data: info
    });

  } else {
    window.location.href = 'https://www.baidu.com';
    //非小程序环境下逻辑

  }
})
  } else {
    //非微信环境逻辑
    window.location.href = 'https://blog.csdn.net/qq_37235231/article/details/82053062';

  }

小程序页面
index.wxml页面
<web-view src="{{webUrl}}" bindmessage="msgHandler"></web-view>
index.js页面

 Page({
   msgHandler: function (e) {    //(h5像小程序传递参数)
    console.log(e.detail.data) //获取到来自也页面的数据
     var info = (e.detail.data)[0]
	    this.setData({
	      value: info.value
	    });
	    this.setData({
	      title: info.title
	    });
    },
 onShareAppMessage: function (options) {   //转发时执行
    var that = this;
    console.log(this.data.webUrl);
    return {
      title: that.data.title,
      path: '/pages/index/index?value=' + that.data.value,//小程序像h5传递参数
      success(e) {
        // shareAppMessage: ok,
        // shareTickets 数组,每一项是一个 shareTicket ,对应一个转发对象
        // 需要在页面onLoad()事件中实现接口
        wx.showShareMenu({
          // 要求小程序返回分享目标信息
          withShareTicket: true
        });
      },
    }
  },
  onload:function(options){
    var webUrl = '';
    if (options.value) {//获取转发过来的参数
      webUrl = "https://www.jsssser.com/vity/gdsen.xhtm?value=" + options.value;
    } else {
      webUrl = "https://www.jsssser.com/vity/gdsen.xhtm"
    }
    this.setData({
      webUrl: webUrl
    })
 }
  })

h5的js页面(获取并处理小程序传递过来的参数)

function getParamer() {

	var url = window.location.href.split("?")[1]; /*获取url里"?"后面的值*/
	if (url) { /*判断是否是一个参数还是多个参数*/
		url = url.split("=")
		return url[1]; /*返回想要的参数值*/
	} else {
		return '';
	}
}

以上是个人做web-view转发所用到的知识,若有不很正确的地方,愿意改之

### 微信小程序向H5页面传递参数 在微信小程序中,`<web-view>`组件用于加载并展示网页。为了实现从小程序向H5页面传递参数功能,可以通过URL查询字符串的方式,在`src`属性设置时就携带所需的信息[^1]。 对于更复杂的消息通信需求,则可采用`postMessage`接口来完成跨环境的数据交互。具体来说,当希望从微信小程序主动向内嵌的H5页面发送信息时,应该调用`web-view`组件实例上的`postMessage`方法,并传入要发送的对象作为参数[^2]。 下面是一个简单的例子说明如何操作: #### 小程序端代码(WXML) ```xml <!-- 小程序页面的WXML部分 --> <view class="container"> <!-- 使用bindmessage绑定事件处理器 --> <web-view id="myWebView" src="{{webviewUrl}}" bindmessage="onMessage"></web-view> </view> <button type="primary" bindtap="sendMessage">Send Message to H5</button> ``` #### 小程序逻辑层(JS) ```javascript Page({ data: { webviewUrl: 'https://example.com/h5page' }, sendMessage() { const message = { text: "Hello from Mini Program!" }; this.selectComponent('#myWebView').postMessage(message); } }) ``` 这段代码展示了如何创建一个按钮触发器,用来发起一次消息传输至指定的H5页面。这里假设目标网址为`https://example.com/h5page`,实际应用中应替换为目标站点的真实地址。 #### 接收方(H5页面) JavaScript 实现 为了让H5页面能够接收到这些来自小程序的消息,需要监听`window`对象上的`message`事件: ```html <script> // 监听来自父窗口(即小程序)的消息 window.addEventListener('message', function(event){ console.log('Received message:', event.data); // 输出接收到的内容 // 可在此处对接收到的数据做进一步处理... }); </script> ``` 此段脚本会捕获任何通过`postMessage`发出的通知,并将其打印出来供调试使用。当然还可以根据业务逻辑扩展更多功能
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值