当前位置:澳门贵宾厅 > Web > app可在每次url变化时进行调用,在微信内澳门贵宾厅(必须在微信里)打开网站页面
app可在每次url变化时进行调用,在微信内澳门贵宾厅(必须在微信里)打开网站页面
2020-02-07

时间: 2018-08-08阅读: 1579标签: 微信1.准备工作

 

app可在每次url变化时进行调用,在微信内澳门贵宾厅(必须在微信里)打开网站页面。APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置(必须是通过备案)。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”

背景:15年之前的微信分享只需要加入一段js就可以实现。后来微信官方全部禁止了。现在的微信分享全部得使用jssdk。

2.引入js

为了使用方便,对接jssdk接口之后,我也把分享功能封装成只要在任何页面引入一段js就可以使用分享功能。放在静态页面html或者php都可以。

注意:支持使用AMD/CMD标准加载方法

一、分享功能:

script src="-1.2.0.js"/script 

澳门贵宾厅,在微信内(必须在微信里)打开网站页面,分享给朋友或者分享到朋友圈时,自己可以指定分享的标题、缩略图、描述文字。(还可以把这个分享功能进一步扩展,比如分享后发红包、加积分、统计分享次数,谁分享了之类的功能,这个看个人需求而定。)

www.vip8888.com,3.通过config接口注入权限验证配置

二、使用条件:

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需要调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushShate的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题在Android6.2修复)

1、认证公众号(就是交了300块给腾讯认证的),无论是认证订阅号还是认证服务号都可以。

wx.config({ debug: true, //开启调试模式,调用所有的api的返回值会在客户端alert出来,若要查看传入的参数,可以在PC端打印出来 appId: '', //必填,公账号的唯一标识 timestamp: '', //必填,生成签名的时间戳 nonceStr: '', //必填,生成签名的随机串 signature: '', //必填,签名 jsApiList: [ //必填,需要使用js列表,否则无法分享成功 'onMenuShareTimeline', //朋友圈 'onMenuShareAppMessage', //朋友 'onMenuShareQQ', //QQ 'onMenuShareWeibo', //QQ空间 ]})

2、有一个备案域名

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

三、开发:使用微信JSSDKAPI

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

JSSDK使用步骤

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

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口,请确保支付目录在该安全域名下,否则将无法完成支付。

备注:登录后可在“开发者中心”查看对应的接口权限。

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

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):

请注意,如果你的页面启用了https,务必引入  ,否则将无法在iOS9.0以上系统中成功使用JSSDK

 

js代码

步骤三:通过config接口注入权限验证配置

 

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

 

 

 

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

 

var data = { title: '', summary: '', pic: '', url: '', success: function(){ getWeixin() ;//用户确认分享后执行的回调函数 }, cancel: function(){ //用户取消分享后执行的回调函数 }} wx.config({ swapTitleInWX: true, appId: "?php echo $weixin_package['appid'];?", timestamp: "?php echo $weixin_package['timestamp'];?", nonceStr: "?php echo $weixin_package['noncestr'];?", signature: "?php echo $weixin_package['signature'];?", jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', ]}) wx.ready(function () { wx.onMenuShareTimeline(data); wx.onMenuShareAppMessage(data); wx.onMenuShareQQ(data) wx.onMenuShareWeibo(data)})

步骤四:通过ready接口处理成功验证

 

wx.ready(function(){

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

 

注意点:

步骤五:通过error接口处理失败验证

 

wx.error(function(res){

    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

});

title,建议在14个字以内图片尺寸: 300*300像素;图片格式:大小不超过10kB,不支持GIF格式;会取当前页面body内最前面的一张符合条件的图片对标题简要解读,建议20字以内link:'', //分享链接,改链接域名或路径必须与当前页面对应的公账号JS安全域名一致二、QQ分享

分享接口

请注意不要有诱导分享等违规行为,对于诱导分享行为将永久回收公众号接口权限,详细规则请查看:朋友圈管理常见问题 。

QQ是通过head里面的标签来识别分享的图标和标题,涉及到h5微数据的一个属性itemprop,

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
meta itemprop="name" content="标题"/meta itemprop="description" name="description" content="描述"/

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

在js中的应用:获取完数据后自定义分享

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

四、效果演示:

www.vip8888.com 1

www.vip8888.com 2

www.vip8888.com 3

www.vip8888.com 4

 

为了方便使用,我已经把分享功能的代码封装,配置两个参数就可以使用。需要分享的页面只要加一段js就可以实现自定义分享

如有需要,请联系 851 488 243 ,备注:微信分享

 

/*QQ分享*/var shareName = '分享标题';var shareDesc= '分享描述';var sharePic= '分享图片路径';var metaStr = 'meta itemprop="name" content="'+shareName+'"/meta name="description" itemprop="description" content="'+shareDesc+'"/meta itemprop="image" content="'+sharePic+'"/';$('head').append(metaStr);$('title').html(shareName);