在小程序内直联h5的页面(pages/webview/webview.js),该页面为<web-view>的容器,使用<web-view>组件

  <web-view wx:if="{{h5url}}" src="{{h5url}}" bindmessage="h5PostMessage" ></web-view>

需要bindmessage事件和postMessage方法

bindmessage:网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }

也就是说,该事件的触发时机只有三种,是延迟的。

可以将分享的数据通过该事件获取。

1、如何分享这个h5页面

在pages/webview/webview.js这个容器页面需要定义两个事件:

//h5向小程序发送的数据
h5PostMessage: function (e) {
this.h5Data= e.detail.data; //当用户点击这个h5页面的分享时获取到
}, // 用户点击右上角分享
onShareAppMessage: function (options) {
return {
title: this.h5Data.title,
desc: this.h5Data.desc,,
path: this.h5Data.path
}
}

h5.js 中使用微信提供的jssdk中的方法

//该方法在页面create完成之后就可以调用,不需要事件去触发,提前将信息发出去,等到点击分享的时候就可以获取到这个信息了
wx.miniProgram.postMessage({
data: {
title: '分享的标题',
desc:'分享的描述',
path:'/pages/share/share.js?data='+JSON.stringfy({url:encodeURIComponent('当前h5页面的url地址')}) //重点,share.js是小程序的页面中,从分享进入的h5的落地页 });

在小程序中需要两个页面,来做web-view 的容器,一个是内联的h5页面,一个是分享出去后,从分享进入的页面

以上是分享的流程

2、怎么从分享进入时,使页面显示的是分享的h5页面

在/pages/share/share.wxml中

 <web-view wx:if="{{h5url}}" src="{{h5url}}"></web-view>

在/pages/share/share.js中:

onLoad: function (options) {
var data = options.data;//postMessage path中带的url 参数
var url =decodeURIComponent(data.url);
this.setData({url:url}); }, // 用户点击右上角分享
onShareAppMessage: function (options) {
    var path = '/pages/share/share.js';     var url = encodeURIComponent(options.webViewUrl);
path += '?data=' + JSON.stringify({ url: url });
    return { path: path }; 
}

微信小程序内联h5页面,实现分享的更多相关文章

  1. 小程序内嵌H5页面判断微信及小程序环境

    判断微信及小程序环境 1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.matc ...

  2. 微信小程序内嵌网页能力开放 小程序支持内嵌网页文档说明

    为了方便开发者灵活配置微信小程序,张小龙现在开放了小程序的内嵌网页功能,这是一个非常大的惊喜啊,以后意味着你只要开放一个手机端网站,就可以制作一个小程序了哦.操作方法1.开发者登录微信小程序后台,选择 ...

  3. 小程序-web-view嵌入H5页面遇到的bug

    遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...

  4. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  5. 微信小程序内嵌业务域名内的网页

    微信小程序在2017年11月左右开放了内嵌网页的功能,即新组件<web-view>.官方文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/com ...

  6. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  7. 微信小程序内判断是否关注公众号(JAVA)

    微信小程序内判断是否关注公众号(JAVA) 思路来源(第二种): https://blog.csdn.net/Yanheeee/article/details/117295643 /** * 总体思路 ...

  8. 微信小程序内嵌网页的一些(最佳)实践

    前言 3 个月前,微信小程序推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小程序前端生态. 我们曾大胆猜想,这一功能,可能直接导致小程序数量增长迎 ...

  9. 小程序内嵌H5——判断小程序环境的坑

    现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...

随机推荐

  1. 报错ERR_CONNECTION_REFUSED,如何解决(原创)

    当我访问我的一个后天地址的时候,突然出现了ERR_CONNECTION_REFUSED,但是之前是可以访问的. 我先ping了下这个网址,发现是OK的 然后我想可能是80端口有问题,也就是说可能是WE ...

  2. org.apache.thrift.transport.TTransportException: Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083.

    1.启动hive的过程中,[hadoop@slaver1 soft]$ hive --service metastore &错误如下所示: 原因:之前启动hive失败了,但是进程以及启动起来, ...

  3. 开始写博客,学习Linq(1)

    摘自<linq实战>原文: 软件很简单.它可以归结为两件事情:代码和数据. 开发软件却并非那么简单,其中很重要的一项任务就是编写处理数据的代码. 无论选择了哪种语言,在程序开发得某个时候你 ...

  4. Centos6安装SaltStack

    rpm -ivh https://mirrors.tuna.tsinghua.edu.cn/epel/6/x86_64/epel-release-6-8.noarch.rpm yum install ...

  5. 【回顾】html链接、头部

    1.HTML 链接 HTML 使用超级链接与网络上的另一个文档相连.几乎可以在所有的网页中找到链接.点击链接可以从一张页面跳转到另一张页面. HTML 超链接(链接) HTML使用标签 <a&g ...

  6. 【Android】jar包Proguard混淆方法

    本文章的前提条件是,读者已经掌握了正确导出jar包的技能. 1.拷贝Android项目中“proguard.cfg”文件到你指定的位置,并改名为“proguard.pro”,此步是为proguardg ...

  7. nginx反向代理uwsgi django服务器搭建总结

    1.安装python.django.虚拟环境 参考帖子:安装python django https://blog.csdn.net/a249900679/article/details/5152720 ...

  8. 在ionic2中集成swiper插件

    1. 下载官方的js和css文件分别放在assets下的js和css文件夹,然后在index.html中引入 <!DOCTYPE html> <html lang="en& ...

  9. linux查看文件的后几行

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABiCAIAAACAksEXAAAZuUlEQVR4nO2dzdmzuq6G0wRV0ARNMM

  10. bug管理

    BUG提交规范 1.标题 2.步骤描述 ①.步骤使用序号编排 ②.在特定情况下发生的问题,还需提供准确的前提条件 ③.精准的描述bug产生的路径后,再描述现象 如: >打开客户端进行首页-> ...