小程序内嵌web-view之分享（2）

垚~垚

已于 2024-01-08 18:31:01 修改

阅读量8.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序 web-view 通信分享、转发

于 2018-06-23 19:02:37 首次发布

本文链接：https://blog.youkuaiyun.com/luoyumeiluoyumei/article/details/80786069

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种网页与小程序间通信的方法，通过在web-view中绑定bindmessage事件，实现网页向小程序发送数据，并展示了如何使用wx.miniProgram.postMessage传递单条或多条数据，最后在小程序端接收这些数据。

网页与小程序之间通信，网页引入JSSDK 1.3.2
在web-view中绑定bindmessage事件

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

<web-view src='{{url}}' bindtap='toShare' bindmessage="bindmessage"></web-view>

网页中使用wx.miniProgram.postMessage向小程序传递数据对象

单条数据，赋给data：wx.miniProgram.postMessage({data:xxx})
多条数据-放入对象中：wx.miniProgram.postMessage({data:{}})

在小程序中接收传递的数据

 bindmessage(e) {//接收web-view传递的参数
        this.setData({//存储状态
            title: e.detail....,
            imageUrl: e.detail...
        })
    },

    onShareAppMessage(opt) {
        this.toShare();
        let title = this.data.title;
        let imageUrl = this.data.imageUrl;
        return {
            title: title,
            imageUrl: imageUrl,
            path: 'pages/...,//小程序跳转路径
            success: function (res) {
                console.log(res)
                // 转发成功
            },
            fail: function (res) {
                console.log(res)
                // 转发失败
            }
        }
    },