• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序内h5页面,完成分享

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 <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 }; 
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【干货】小程序内嵌 H5 代码详解发布时间:2022-07-18
下一篇:
软件测试之H5/小程序测试点发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap