• 使用 wx.miniProgram.postMessage 传递网站数据来分享网站程序页面


    在小程序里使用web-view组件,在对小程序点击顶部分享按钮分享时,分享的内容为当前页面的内容,需要使用wx.miniProgram.postMessage来进行处理

    H5页面代码

    created() {
        this.$store
          .dispatch({
            type: "user/saveCurrentUrl",
            data: {
              current_url: window.location.pathname + window.location.search,
              page_type: "3"
            }
          })
          .then(res => {
            if (res.code == 1) {
              window.wx.miniProgram.postMessage({
                data: {
                  title: res.data.title, // 标题
                  desc: "", // 描述
                  imgUrl: "", // 图片
                  link: res.data.url, // 链接
                  unique_mark: res.data.unique_mark
                }
              });
            }
          });
        let id = this.$route.params.id;
        let activityId = this.$route.query.activityId;
        this.getActivityProductDetail(id, activityId);
      }
    

      小程序端代码

      <web-view src='{{weburl}}' bindmessage="getSharePage"></web-view>
    

      

      onShareAppMessage: function() {
        let _this = this;
        let title = "发现一件好物";
        if (app.globalData.shopname) {
          title = app.globalData.shopname;
        }
        console.log(this.data.sharePageModel);
        let path = "pages/index/index";
        if (this.data.sharePageModel) {
          path += "?share_openid=" + app.globalData.openid + "&unique_mark=" + this.data.sharePageModel.unique_mark;
          title = this.data.sharePageModel.title;
        }
    
        return {
          title: title,
          path: path,
          success: _suc => {
            wx.showToast({
              title: '分享成功',
            })
          },
          fail: _fail => {
            wx.showToast({
              title: '分享失败',
            })
          }
        };
      },
      getSharePage: function(e) {
        console.log("获取网页内容");
        console.log(e);
        if (e && e.detail && e.detail.data) {
          let len = e.detail.data.length;
          this.setData({
            sharePageModel: e.detail.data[len - 1]
          });
        }
    
      },

    调试截图

     注意点:wx.miniProgram.postMessage该方法的使用有条件,小程序分享、销毁等都会执行,H5页面每执行一次,会在小程序端记录一条数据(数组形式),我目前做的是用户分享时取的是数组下标最大的,但是也存在一个缺陷,当H5页面未设置分享参数,而用户点击了顶部分享操作,分享数据将取最后一条,目前还在处理中(每个H5页面加上分享postMessage感觉不现实),求招...

  • 相关阅读:
    Vue 项目在手机上,当input、时间组件获取焦点后组件变大问题
    关于部分手机whitespace失效问题
    网络安全环境IP纯净
    搭建蜜罐HFish
    windows隐藏某某命令
    mysql密码相关
    在k8s集群部署jenkins遇到的问题
    Mongodb简单的操作
    MongoDB安装
    上机编程认证03
  • 原文地址:https://www.cnblogs.com/WQ1992/p/11508540.html
Copyright © 2020-2023  润新知