vue JS-SDK配置 分享之后调接口

本文介绍了如何在微信环境中使用jweixin-module包来配置和实现分享功能。首先通过npm安装模块,然后在代码中引入并初始化配置。详细展示了如何设置分享内容,监听分享状态,并在用户点击分享后的回调中进行接口调用和事件跟踪。同时,还提供了隐藏和显示菜单项的方法。
摘要由CSDN通过智能技术生成

1、安装jweixin-module包 

https://www.npmjs.com/package/jweixin-module

npm install jweixin-module --save

2、使用方式

var jweixin = require('jweixin-module')
jweixin.ready(function(){
    // TODO
});

3、应用:分享之后调接口,记录点击分享按钮这一动作,不能判断用户是否真的分享了。

 

 

'onMenuShareAppMessage' // 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
'onMenuShareTimeline' // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
'updateAppMessageShareData' //朋友
'updateTimelineShareData' //朋友圈

 

// wechat.js


var jweixin = require('jweixin-module');
import $apis from '../apis/index.js'

export default {
	//判断是否在微信中  
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/micromessenger/i) == 'micromessenger') {
			let isWxWork = ua.match(/WxWork/i) == "wxwork";
			if(isWxWork){
				console.log('是企业微信客户端')
			    return false;
			}else{
				console.log('是微信客户端')
			    return true;
			}
		} else {
			console.log('不是微信客户端')
			return false;
		}
	},

	//初始化sdk配置  
	initJssdk: function(callback) {
		uni.request({
			url: 'XXX request url XXX',
			data: {
				wx_url: window.location.href.split('#')[0]
			},
			success: res => {
				if (res.data) {
					jweixin.config({
						debug: false, // 开启调试模式
						appId: res.data.d.appId, // 必填,公众号的唯一标识
						timestamp: res.data.d.timestamp, // 必填,生成签名的时间戳
						nonceStr: res.data.d.nonceStr, // 必填,生成签名的随机串
						signature: res.data.d.signature, // 必填,签名
						jsApiList: [
							'checkJsApi',
							'onMenuShareAppMessage',
							'onMenuShareTimeline',
							'updateAppMessageShareData', //朋友
							'updateTimelineShareData', //朋友圈
							'getLocation',
							'openLocation',
							'hideAllNonBaseMenuItem', //隐藏所有非基础按钮接口
							'showAllNonBaseMenuItem'

						] ,// 必填,需要使用的JS接口列表
						openTagList:[
							"wx-open-launch-weapp"
						] // 打开小程序
					});
					//配置完成后,再执行分享等功能  
					// _this.hasInit = true;
					if (callback) {
						callback(res.data);
					}

				}
			}
		});

	},
	//在需要自定义分享的页面中调用  
	share: function(data, url) {
		url = url ? url : window.location.href;
		if (!this.isWechat()) {
			return;
		}
		//每次都需要重新初始化配置,才可以进行分享  
		this.initJssdk(function(signData) {
			
			jweixin.ready(function() {
				
				var shareData = {
					title: data && data.title ? data.title : signData.site_name,
					desc: data && data.desc ? data.desc : signData.site_description,
					link: url,
					imgUrl: data && data.img ? data.img : signData.site_logo,
					success: function(res) {
						$apis.addPointByType({
								type: "分享"
							}).then(res => {
								console.log(res.data);
								let d = res.data;
									
								if (d.message) {
									alert(d.message);
									return;
								} else {
									alert("分享成功");
								}
							})
							.catch(err => {
								console.log(err);
							});
						//用户点击分享后的回调,这里可以进行统计,例如分享助力之类的
						this.$ba.trackEvent('20201225sd/index','share-success','分享成功','5' )
					},
					cancel: function(res) {
						console.log('share-fail:',res)
						this.$ba.trackEvent('20201225sd/index','share-fail','分享失败','1' )
					}
				};
				// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111
				jweixin.onMenuShareAppMessage(shareData);
				jweixin.onMenuShareTimeline(shareData);
				
			});
			
			
			
			
		}, url);
	},
	
	hideAllMenu: function() {
		if (!this.isWechat()) {
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.hideAllNonBaseMenuItem();
			});
		});
	},

	showAllMenu: function() {
		if (!this.isWechat()) {
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.showAllNonBaseMenuItem();
			});
		});
	},

	// 在需要定位页面调用
	location: function(cbSuccess, cbFail) {
		if (!this.isWechat()) {
			console.log('不是微信客户端')
			return;
		}
		console.info('定位')
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				console.info('定位ready')
				jweixin.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
					success: function(res) {
						console.log(res);
						cbSuccess(res)
					},
					fail: function(res) {
						console.log(res)
						cbFail(res)
					}
				});
			});
		});
	},

	openLocation(location) {
		if (!this.isWechat()) {
			console.log('不是微信客户端')
			return;
		}
		this.initJssdk(res => {
			jweixin.ready(() => {
				jweixin.openLocation(location)
			})
		})
	}
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值