公众号网页分享到小程序

骑猪看日落 2022-10-22 13:53 206阅读 0赞

场景：从天天学农小程序点击banner图，web-view打开公众号页面（321春种节），再把公众号页面分享到朋友圈或者好友

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 4][]

实现思路：

1.公众号321页面添加网页向小程序发送消息的代码

mounted:{
        this.wechatShare();
    }, 
    methods: { 
        wechatShare() {
          wx.miniProgram.postMessage({
              data: {
                url:"https://uat-h5.ixuenong.com/wx/marketing/activity312",
                title: "天天学农——321春种节！",
                imgUrl:"https://ttxn.oss-cn-shenzhen.aliyuncs.com/static/img/log/jqnmLogo.png",
              },
            });
    }

2.在小程序web-view接受

<web-view  src="{
       {url}}" bindmessage="onceBindmessage"></web-view>
    
    
    onceBindmessage(e) {
        this. onShareAppMessage(e);
    },
    
    onShareAppMessage(e){
      return {
          title: e.title,
          imageUrl: e.imageUrl,
          path: e.path
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210317160724762.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210317160753709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210317160820710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210317160844183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 4]: /images/20221022/d9a88b88ff2c4ffcbe86422be0cbb352.png