分享⾃定义图标⼤⼩限制_⾃定义分享限制分享
⼀、⾃定义分享
业务需求:
开发过程中有些业务需要借助进⾏推⼴和宣传。难免需要使⽤提供的⼀些功能,⽐如的⼆次分享(也叫⾃定义分享)功能来⽅便⽤户查阅和了解。提供的⾃定义分享功能涉及的模块主要有以下⼏类:
获取“分享到腾讯微博”按钮点击状态及⾃定义分享内容接⼝。
【提⽰】:新版的⾃定义分享相对【即将废弃】的⾃定义分享api来说简洁了好多,处理起来相⽐旧版⾃定义分享来说少了许多代码;提⾼了代码的复⽤性。
⾃定义分享代码:
let WeChatPay = function() {
// 2、引⼊js后、获取校验信息
let timestamp = '',
nonceStr = '',
signature = '';
// ⽤于换取校验信息的参数:要求不可以包含 “#” 号
let v = {
url: location.split('#')[0]
};
// 3、通过config接⼝注⼊权限验证配置(需要同步进⾏,在获取到校验信息后⽅可注⼊config,否则校验失败!)
debug: true, // 开启调试模式,调⽤的所有api的返回值会在客户端alert出来,若要查看传⼊的参数,可以在pc端打开,参数信息会通过log 打出,仅在pc端时才会打印。
appId: '', // 必填,的唯⼀标识
timestamp: , // 必填,⽣成签名的时间戳
nonceStr: '', // 必填,⽣成签名的随机串
signature: '', // 必填,签名
jsApiList: [
"checkJsApi",
"onMenuShareAppMessage",
"onMenuShareTimeline",
"updateAppMessageShareData",
"updateTimelineShareData"
] // 必填,需要使⽤的JS接⼝列表
});
// 4、通过ready接⼝处理成功验证
// 【备注:checkJsApi接⼝是客户端6.0.2新引⼊的⼀个预留接⼝,第⼀期开放的接⼝均可不使⽤checkJsApi来检测。】wx.checkJsApi({
jsApiList: [
"onMenuShareAppMessage",
"onMenuShareTimeline",
"updateAppMessageShareData",
"updateTimelineShareData"
], // 需要检测的JS接⼝列表,所有JS接⼝列表见附录2,
success: function(res) {}
});
// 1.0版本的分享已经被废弃,为了兼容⽼版本写法如下
// ⾃定义“分享给朋友”及“分享到QQ”按钮的分享内容
if (wx.onMenuShareAppMessage) {
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页⾯对应的JS安全域名⼀致
imgUrl: '', // 分享图标
success: function() {} // 设置成功
});
} else {
// ⾃定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页⾯对应的JS安全域名⼀致
imgUrl: '', // 分享图标
success: function() {} // 设置成功
});
}
if (wx.onMenuShareTimeline) {
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页⾯对应的JS安全域名⼀致
imgUrl: '', // 分享图标
success: function() {} // 设置成功
});
} else {
// ⾃定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页⾯对应的JS安全域名⼀致
imgUrl: '', // 分享图标
success: function() {} // 设置成功
});
}
});
}
【注】:此写法是为了兼容旧版的⾃定义分享功能。因为有些⽼⽤户没有升级或者没有升级最新版的【JS-SDK】,因此会导致⽼旧代码分享失败。若不考虑兼顾⽼版本可以舍弃【 if 】中的代码块,直接采⽤【else】中的代码块。
⼆、限制分享【界⾯操作】
业务需求:
在开发过程中,难免会有⼀些特殊的要求,如:要求此次推⼴活动只能在中打开,限制⽤户
分享给好友,限制分享到朋友圈等等。当遇到这些业务需求的时候就需要特定的操作来做⼀些限制了。浏览器右上⾓的的三个点,点开时下⽅弹出的操作按钮是可以做限制处理的,这就是在根上处理了限制⽤户分享的问题。
关闭当前⽹页窗⼝
批量隐藏功能按钮
批量显⽰功能按钮
隐藏所有⾮基础按钮
显⽰所有⾮基础按钮
【 代码API 】
// 1、关闭当前⽹页窗⼝接⼝
wx.closeWindow();
// 2、批量隐藏功能按钮接⼝
wx.hideMenuItems({
menuList: [] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
});
// 3、批量显⽰功能按钮接⼝
wx.showMenuItems({
menuList: [] // 要显⽰的菜单项,所有menu项见附录3 });
// 4、隐藏所有⾮基础按钮接⼝
wx.hideAllNonBaseMenuItem();
// 5、显⽰所有功能按钮接⼝
wx.showAllNonBaseMenuItem();
附录3:菜单列表:
【 基本类 】
举报
"menuItem:exposeArticle"
调整字体
"menuItem:setFont"
⽇间模式
"menuItem:dayMode"
夜间模式
"menuItem:nightMode"
刷新
"menuItem:refresh"
查看(已添加)
"menuItem:profile"
查看(未添加)
"menuItem:addContact"
【 传播类 】
发送给朋友
"menuItem:share:appMessage"
分享到朋友圈
"menuItem:share:timeline"
分享到QQ
"menuItem:share:qq"
分享到Weibo
"menuItem:share:weiboApp"
收藏
"menuItem:favorite"
分享到FB
"menuItem:share:facebook"
分享到 QQ 空间
"menuItem:share:QZone"
【 保护类 】
编辑标签
"menuItem:editTag"
删除
"menuItem:delete"
复制链接
"menuItem:copyUrl"
原⽹页
"menuItem:originPage"
阅读模式
"menuItem:readMode"
在QQ浏览器中打开
"menuItem:openWithQQBrowser"
在Safari中打开
qq空间签名大全"menuItem:openWithSafari"
邮件
"menuItem:share:email"
⼀些特殊
"menuItem:share:brand"
代码实例:
let RestrictedBtn = function() {
// 2、引⼊js后、获取校验信息
let timestamp = '',
nonceStr = '',
signature = '';
/
/ ⽤于换取校验信息的参数:要求不可以包含 “#” 号
let v = {
url: location.split('#')[0]
};
// 3、通过config接⼝注⼊权限验证配置(需要同步进⾏,在获取到校验信息后⽅可注⼊config,否则校验失败!)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论