自定义页面分享

src/pages/wxArticle/index.vue

-<!--
- * @Author: your name
- * @Date: 2020-10-21 09:51:48
- * @LastEditTime: 2020-10-21 10:35:55
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \mayi-mp-shop\src\pages\wxArticle\index.vue
--->
+<script>
+import { serialize, getQueryVariable, DFSImg } from "@/utils/index";
+export default {
+    data(){
+        return{
+            link : '',
+            shareShopName: '',//分享名称
+            shareLogoUrl: '',//分享图片url
+            newWindowHref: '',//分享页面url
+        }
+    },
+    onLoad(options){
+        console.log(decodeURIComponent(options.link),'地址')
+        this.link = decodeURIComponent(options.link)
+    },
+    async onShareAppMessage(res) {
+        let url = ''
+        console.log(this.newWindowHref + 'this.newWindowHref')
+        //分享路径
+        if(this.newWindowHref){
+            url = this.newWindowHref;
+        }else{
+            url = res.webViewUrl;
+        }
+        //分享页面去掉登录态
+        if (url.indexOf("sessionid") > -1) {
+            url = url.split("?")[0] + "?mixid=" + this.shopId;
+        }
+        this.shareUrl = url ;
+        console.log(this.shareUrl, "index12");
+        console.log(`/pages/index/main?link=${encodeURIComponent(this.shareUrl)}`, '测试直播分享相关')
+        return {
+        title: this.shareShopName, // 默认是小程序的名称
+        path: `/pages/wxArticle/main?link=${encodeURIComponent(this.shareUrl)}`, // 默认是当前页面
+        imageUrl: this.shareLogoUrl,
+        success: function(res) {
+            // 转发成功之后的回调
+            if (res.errMsg == "shareAppMessage:ok") {
+            console.log(res, "分享成功");
+            }
+        },
+        fail: function() {
+            // 转发失败之后的回调
+            if (res.errMsg == "shareAppMessage:fail cancel") {
+            // 用户取消转发
+            console.log(res, "分享失败");
+            } else if (res.errMsg == "shareAppMessage:fail") {
+            // 转发失败，其中 detail message 为详细失败信息
+            }
+        },
+        complete: function() {
+            // 转发结束之后的回调（转发成不成功都会执行）
+        }
+        };
+    },
+    methods: {
+        //加载成功
+        handleLoad() {
+            console.log("网页加载成功");
+        },
+        //右上角分享时触发
+        getMessage(res) {
+            let len = res.target.data.length - 1;
+            console.log(res, "h5消息", res.target.data[len]);
+            this.shareShopName = res.target.data[len].shareShopName || "";
+            this.shareLogoUrl = DFSImg(res.target.data[len].shareLogoUrl, 500, 400);
+            this.newWindowHref = res.target.data[len].shareImgUrl;// + '&fromVisitorOpenId=' + wx.getStorageSync("openid")
+            console.log("分享信息：", this.shareLogoUrl, this.shareShopName,1111111,res);
+        },
+        handleError(data) {
+            wx.showLoading({
+                title: "网页加载失败 请右上角刷新",
+            });
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped></style>
+
 <template>
   <div>
     <web-view
@@ -23,6 +95,9 @@ export default {
   data() {
     return {
         link: "",
+        shareShopName: '',//分享名称
+        shareLogoUrl: '',//分享图片url
+        newWindowHref: '',//分享页面url
     };
   },
   async onLoad(options) {
@@ -63,6 +138,15 @@ export default {
           .catch((err) => {});
       });
     },
+    //右上角分享时触发
+    getMessage(res) {
+        let len = res.target.data.length - 1;
+        console.log(res, "h5消息", res.target.data[len]);
+        this.shareShopName = res.target.data[len].shareShopName || "";
+        this.shareLogoUrl = DFSImg(res.target.data[len].shareLogoUrl, 500, 400);
+        this.newWindowHref = res.target.data[len].shareImgUrl;// + '&fromVisitorOpenId=' + wx.getStorageSync("openid")
+        console.log("分享信息：", this.shareLogoUrl, this.shareShopName,1111111,res);
+    },
     //加载成功
     handleLoad() {
       console.log("网页加载成功");
@@ -73,6 +157,46 @@ export default {
       });
     },
   },
+  async onShareAppMessage(res) {
+        let url = ''
+        console.log(this.newWindowHref + 'this.newWindowHref')
+        //分享路径
+        if(this.newWindowHref){
+            url = this.newWindowHref;
+        }else{
+            url = res.webViewUrl;
+        }
+        //分享页面去掉登录态
+        if (url.indexOf("sessionid") > -1) {
+            url = url.split("?")[0] + "?mixid=" + this.shopId;
+        }
+        this.shareUrl = url ;
+        console.log(this.shareUrl, "index12");
+        console.log(`/pages/index/main?link=${encodeURIComponent(this.shareUrl)}`, '测试直播分享相关')
+        return {
+        title: this.shareShopName, // 默认是小程序的名称
+        path: `/pages/wxArticle/main?link=${encodeURIComponent(this.shareUrl)}`, // 默认是当前页面
+        imageUrl: this.shareLogoUrl,
+        success: function(res) {
+            // 转发成功之后的回调
+            if (res.errMsg == "shareAppMessage:ok") {
+            console.log(res, "分享成功");
+            }
+        },
+        fail: function() {
+            // 转发失败之后的回调
+            if (res.errMsg == "shareAppMessage:fail cancel") {
+            // 用户取消转发
+            console.log(res, "分享失败");
+            } else if (res.errMsg == "shareAppMessage:fail") {
+            // 转发失败，其中 detail message 为详细失败信息
+            }
+        },
+        complete: function() {
+            // 转发结束之后的回调（转发成不成功都会执行）
+        }
+        };
+    },
 };
 </script>