1.微信商品详情分享

拼搏现实的明天。 2023-09-29 11:03 17阅读 0赞

// 引用微信分享 sdk
    //安装方法
    npm install weixin-js-sdk
    var wx = require('weixin-js-sdk');
    
    
    methods: {
        // 微信商品详情分享
    			fenXBtn() {
    				const url = 'Index/ajaxGetWxConfig'; //location.href.split('#')[0]
    				let idS = window.location.href;
    				let shareShopId = this.$store.state.shop_id;
    				// console.log(idS.replace(/shop_id/,));
    				// let askUrl = this.IndexDemo('shop_id') != -1 ? idS : `${idS}&shop_id=${this.$store.state.shop_id}`
    				let askUrl = this.$uti.IndexDemo('shop_id') != -1 ? idS : (shareShopId ? `${idS}&shop_id=${shareShopId}` :
    					`${idS}`);
    				// let askUrl = `${window.location.href}&shop_id=${this.$store.state.shop_id}`
    				let wxTitle = this.shopInfo.name
    				let wxDesc = this.shopInfo.goods_remark
    				let imgBox = this.$uti.getImgCon(this.imgBx) //图片路径封装
    				let bodyParam = {
    					askUrl
    				}
    				this.$http.postRequest(url, bodyParam).then(res => {
    					// console.log(res);
    					const {
    						appId,
    						nonceStr,
    						rawString,
    						signature,
    						timestamp
    					} = res
    					// 微信分享授权
    					wx.config({
    						debug: !1, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出
    						appId, // 必填，公众号的唯一标识，填自己的！
    						timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
    						nonceStr, // 必填，生成签名的随机串
    						rawString,
    						signature, // 必填，签名，见附录1
    						jsApiList: [ // 需要使用的JS接口列表
    							'onMenuShareTimeline',
    							'onMenuShareAppMessage',
    							'updateTimelineShareData',
    							'updateAppMessageShareData'
    						]
    
    					})
    				})
    
    				wx.ready(function() {
    					// 分享到朋友圈
    					wx.onMenuShareTimeline({
    						title: wxTitle, // 分享标题
    						// link: 'http://tksn.shangpreechina.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    						link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    						// imgUrl: that.$uti.getImgCon(this.imgBx), // 分享图标 
    						imgUrl: imgBox, // 分享图标
    						success: function() {
    							// 设置成功
    							alert("分享成功");
    							// console.log("分享成功");
    						}
    					})
    					//分享给朋友
    					wx.onMenuShareAppMessage({
    						title: wxTitle,
    						desc: wxDesc,
    						link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    						imgUrl: imgBox, // 分享图标 
    						success: function() {
    							console.log("分享成功");
    						},
    						cancel: function() {
    							console.log("取消分享");
    						}
    					});
    				})
    
    			}
    }

#  #

# util.js 在页面调用是为了判断分享路径携不携带shop\_id(店铺id) #

// 判断 页面王志忠书否存在str
    const IndexDemo = (str2) => {
    	let str1 = window.location.href
    	let s = str1.indexOf(str2);
    	return (s);
    }

# 2.分享方法封装 分享页面 #

页面调用方法

onLoad(e) {
        // 分享
    		setTimeout(() => {
    			let shop_id = this.$store.state.shop_id
    			this.$uti.webConfig(shop_id)
    		}, 1000)
    }

# 效果图展示 #

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Iqx6ZaL6Iul55u45oOc54Gs_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Iqx6ZaL6Iul55u45oOc54Gs_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/372a368adf9a4ba9b977931ab56dd417.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Iqx6ZaL6Iul55u45oOc54Gs,size_20,color_FFFFFF,t_70,g_se,x_16