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

Posted 打个大西瓜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.jiquer.com/vity/gdsen.xhtm?value=" + options.value;
    } else {
      webUrl = "https://www.jiquer.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 ‘‘;
	}
}

  本文链接:https://blog.csdn.net/qq_37235231/article/details/82053062

以上是关于web-view小程序转发功能,web-view和小程序之间传参的主要内容,如果未能解决你的问题,请参考以下文章

小程序总结(十五)- 关于web-view嵌套的H5页面的分享功能

微信小程序web-view , 嵌入H5页面

微信小程序web-view , 嵌入H5页面

微信小程序之web-view中的页面分享

diy手机壳功能,小程序 web-view 选择图片,在页面进行预览渲染,

网页程序迁移至微信小程序web-view详解