By

文章目录
微信:

微信开发文档

——–前期准备工作开始—————
1.绑定域名
2.引入js(http://res.wx.qq.com/open/js/jweixin-1.2.0.js)
3.通过config接口注入权限验证配置

注意:所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用 
1
2
3
4
5
6
7
8
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识		
    timestamp: , // 必填，生成签名的时间戳	
    nonceStr: '', // 必填，生成签名的随机串	
    signature: '',// 必填，签名	
    jsApiList: [] // 必填，需要使用的JS接口列表
});

4.通过ready接口处理成功验证

1
2
3
4
5
6
7
8
9
10
wx.ready(function(){
    /*
    config信息验证后会执行ready方法，
    所有接口调用都必须在config接口获得结果之后，
    config是一个客户端的异步操作，
    所以如果需要在页面加载时就调用相关接口，
    则须把相关接口放在ready函数中调用来确保正确执行。
    对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    */
});

5.通过error接口处理失败验证

1
2
3
4
5
6
7
wx.error(function(res){
    /*
    config信息验证失败会执行error函数，
    如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
    也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    */ 
});

————准备工作结束————-

以分享朋友圈为例

1
2
3
4
5
6
7
8
9
10
11
12
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

界面操作

1.批量隐藏功能按钮接口

1
2
3
wx.hideMenuItems({
    menuList: [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
    });

2.批量显示功能按钮接口

1
2
3
wx.showMenuItems({
    menuList: [] // 要显示的菜单项，
    });

3.隐藏所有非基础按钮接口

1
wx.hideAllNonBaseMenuItem();

4.显示所有功能按钮接口

1
wx.showAllNonBaseMenuItem();

还有旧版本的一种
(不建议使用,初始化的时候微信会告诉你WeixinJSBridge.call()不被支持,请使用最新方法,但是到目前为止还是可以使用的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
if (typeof WeixinJSBridge == "undefined")
	{
		if (document.addEventListener)
		{
			document.addEventListener('WeixinJSBridgeReady', onBridgeReadyShow, false);
		}
		else if (document.attachEvent)
		{
			document.attachEvent('WeixinJSBridgeReady', onBridgeReadyShow);//或者onBridgeReadyHide;
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReadyShow);//或者onBridgeReadyHide;
		}
	}
	else
	{
		onBridgeReadyShow();
		//onBridgeReadyHide();
	}

function onBridgeReadyHide()
{
	WeixinJSBridge.call('hideOptionMenu');
}

function onBridgeReadyShow()
{
	WeixinJSBridge.call('showOptionMenu');
}
支付宝:

支付宝开发文档
小程序没有开放文档(这里面的接口都收录到了小程序接口当中)

——前期准备————-

window.onload以后，容器会初始化，产生一个全局变量AlipayJSBridge, 然后触发此事件
AlipayJSBridge注入是一个异步过程，因此尽可能先监听该事件后再call接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
function ready(callback) {
// 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function(){
  alert('bridge ready');
});

或者引用js

1
2
3
4
5
6
<script src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"></script>
<script>
    ant.on('AlipayJSBridgeReady', function (e) {
        alert('bridge ready');
    });
</script>

——-准备结束————-

分享功能:
以分享到新浪微博为例

a.小程序api分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
AlipayJSBridge.call('share', {
  'bizType':"testShareBizType",   // 标示业务类型，埋点时使用，不需要埋业务参数，可以设空
  'keepOrder':false, // 保持分享渠道的顺序,android 9.1 换新的分享组件以后不支持
  'channels': [{
    name: 'Weibo', //新浪微博
    param: {
      title: '分享的标题',
      content: '分享的内容，不能超过140',
      imageUrl: '分享的图片地址',
      captureScreen: true, //分享当前屏幕截图(和imageUrl同时存在时，优先imageUrl)
      url: 'http://baidu.com' //分享跳转的url，当添加此参数时，分享的图片大小不能超过32K
    }
  }]
},function(result){

});

b.支付宝h5分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	//钱包9.0开始支持
	AlipayJSBridge.call("startShare", {
				//当用户选择该数组内指定的分享渠道时，仅返回渠道名，而不是真正开始自动分享(说白了就是禁用掉默认分享)
				'onlySelectChannel': ["Weibo", "ALPContact", "ALPTimeLine", "SMS", "Weixin", "WeixinTimeLine", "QQ", "QQZone","DingTalkSession", "OpenInSafari", "Favorite"]
			}, function(data) {
//				console.log("当前用户点击的分享渠道名为："+data.channelName);
				alert("当前用户点击的分享渠道名为："+data.channelName);
				//通过onlySelectChannel屏蔽掉自动分享功能后，自行调用shareToChannel接口进行单独分享
				AlipayJSBridge.call("shareToChannel", {
					name: data.channelName,
					param: {
						contentType: 'url',    //选填，目前支持支持"auto",text","image","url"格式（android分享组件不支持auto）
						title: '自定义分享的标题',
						content: '自定义分享的内容',
						iconUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
						imageUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
						captureScreen: false, //是否分享当前页面的截图
						url: 'https://m.taobao.com'
					}
				}, function(result) {
					console.log(result)
				});
			});

c.从meta读取分享信息

1
2
3
4
5
6
7
8
<!--钱包9.0开始支持-->
<meta name="Alipay:title" content="我是标题"/>
<!--自定义图片--钱包8.6开始支持-->
<meta name="Alipay:imgUrl" content="http://xxx/url/xxx.png"/>
<!--自定义摘要--钱包8.6开始支持-->
<meta name="Alipay:desc" content="我是摘要信息"/>
<!--自定义链接--钱包10.0.0开始支持-->
<meta name="Alipay:link" content="http://www.baidu.com"/>

经实测只支持朋友圈,朋友,钉钉(就是不屌腾讯)

界面操作

1.隐藏右上角按钮

1
AlipayJSBridge.call('hideOptionMenu');

2.显示右上角按钮

1
AlipayJSBridge.call('showOptionMenu');

建议还是看完善的文档.over

文章目录