在小程序内直联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. 452. Minimum Number of Arrows to Burst Balloons

    There are a number of spherical balloons spread in two-dimensional space. For each balloon, provided ...

  2. 令人疑惑的 std::remove 算法

    摘自<Effective STL>第32条 remove的声明: template<class ForwardIterator, class T> ForwardIterato ...

  3. rxjs简单入门

    rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...

  4. Python_lambda简单函数表达式

    lambda表达式只能用于简单函数的书写 def funx(a): a+=1 return a print(funx(99)) 用lambda实现上面函数: funx = lambda a: a+1 ...

  5. k8s 英文文档翻译

    https://medium.com/google-cloud/understanding-kubernetes-networking-pods-7117dd28727 

  6. PHP页面间传值的几种方法

    方法一:require_once //Page a: <?php $a = "hello"; ?> //Page b: <?php require_once &q ...

  7. 51Nod1773 A国的贸易 多项式 FWT

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1773.html 题目传送门 - 51Nod1773 题意 给定一个长度为 $2^n$ 的序列,第 $ ...

  8. Python编程基础（一）

    1.Python中的变量赋值不需要类型声明 2.等号(=)用来给变量赋值 3.字符串拼接用  “+”  号 temp=‘123’ print('temp的值是%s'%temp) #整数和字符创的转换, ...

  9. TF：TF下CNN实现mnist数据集预测 96%采用placeholder用法+2层C及其max_pool法+隐藏层dropout法+输出层softmax法+目标函数cross_entropy法+AdamOptimizer算法

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # number 1 to 10 ...

  10. codeforces 1058D.Vasya and Triangle (gcd)

    <题目链接> <转载于  >>> > 题目大意: 给出n.m.k.求一个三角形使它的面积等于n*m/k  并且这个三角形的三个顶点所在的坐标为整数点,且顶点满 ...