JS版微信6.0分享接口用法分析

本文实例讲述了JS版微信6.0分享接口用法。分享给大家供大家参考,具体如下:

为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了《微信公众平台关于整顿诱导分享及诱导关注行为的公告》,微信平台开发者发现,原有的微信分享功能不能用了。正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能。

注:

1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题、链接等。不能自定义触发分享事件

2.分享的监听,仅提供了腾讯旗下产品的接口,接口列表:分享到朋友圈、分享给朋友、分享到QQ、分享到QQ空间、分享到腾讯微博;

微信6.0之后,原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {}不再可以使用,但是微信提供的新的方法 JS-SDK, 官方接口请参见 微信JSSDK说明文档

分享接口使用实例:

注:本文介绍的前提是服务器端已经获取的公众平台的access_token和Jsapi_Ticket

一、权限验证配置,注册当前页面使用的分享接口

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

二、在ready事件中,注册监听分享

//处理成功验证
wx.ready(function () {
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
  //config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
  //对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
  //监听,分享到朋友圈
  wx.onMenuShareTimeline({
    title:'标题测试',
    link:'http://www.jb51.net',
    imgUrl:'http://www.jb51.net/favicon.ico',
    success:function(){
      appendText('分享成功');
    },
    calcel:function(){
      appendText('已经取消');
    }
  });
  //监听,分享到QQ空间
  wx.onMenuShareQZone({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'http://www.jb51.net', // 分享链接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享QQ空间成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享QQ控件取消');
    }
  });
  //监听,分享给朋友 (type,dataurl基本可以放弃不使用)
  wx.onMenuShareAppMessage({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'http://www.jb51.net', // 分享链接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享图标
    type: 'link', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享给朋友成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享给朋友取消');
    }
  });
  //监听,分享到QQ
  wx.onMenuShareQQ({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'http://www.jb51.net', // 分享链接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享到QQ成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享到QQ取消');
    }
  });
  //监听,分享到腾讯微博 (基本可以放弃不使用)
  wx.onMenuShareWeibo({
    title: '标题测试', // 分享标题
    desc: '描述测试', // 分享描述
    link: 'http://www.jb51.net', // 分享链接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
      appendText('分享到腾讯微博成功');
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
      appendText('分享到腾讯微博失败');
    }
  });
  appendText('ready事件触发');
});

关于常用封装实例可参考前面一篇《微信js-sdk分享功能接口常用逻辑封装示例》

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2016-10-11

微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &

js实现微信分享代码

通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 <script> var dataForWeixin = { appId: "", MsgImg: "Christmas/201012189457639.gif",//显示图片 TLImg: "Christmas/201012189457639.

javascript实现微信分享

代码很简单,我这里就不多废话了,直接奉上源码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServ

Javascript 实现微信分享(QQ、朋友圈、分享给朋友)

最近做微信开发,对微信公众号的开发,现在好的都是分享到朋友圈,QQ,分享给好友等分享功能,这里记录下,有需要的朋友也可以看下. // 微信分享 var wx = require('wechat-sdk'); rewardsResultService.getWechatInfo().then(function(data) { var conf = data; wx.config({ debug: false, appId: 'wx34e783920b37ee91', timestamp: conf

JS实现微信里判断页面是否被分享成功的方法

本文实例讲述了JS实现微信里判断页面是否被分享成功的方法.分享给大家供大家参考,具体如下: var shareData = { img_url: "", img_width: 200, img_height: 200, link: '', desc: '', title: '', appid: 0 }; document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 发送给好友 WeixinJ

js实现通用的微信分享组件示例

一.可定义的信息 1.分享时显示的LOGO:2.分享LOGO的宽度:3.分享LOGO的高度:4.分享出去显示的标题(默认调用网页标题):5.分享出去显示的描述(默认调用网页标题):6.分享链接(默认为当前页面的URL).7.分享微信的APPID(一般为空). 二.使用方法1.引入微信分享组件js: 复制代码 代码如下: /******************************* * Author:Mr.Think * Description:微信分享通用代码 * 使用方法:_WXShare

基于js实现微信发送好友如何分享到朋友圈、微博

微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. <script> var imgUrl = "图片地址"; var lineLink = "当前网址"; var descContent = "描述"; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge

JS中静态页面实现微信分享功能

微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio

javascript获取wx.config内部字段解决微信分享

背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head>

解析微信JS-SDK配置授权,实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

javascript实现修改微信分享的标题内容等

代码超级简单,这里就不多废话了,小伙伴们自己看注释吧, 奉上代码: 复制代码 代码如下: <script> //微信分享 var wimg = "分享图片网址123"; var wurl = "分享网址123"; var wdesc = '分享内容123'; var wtit = '分享标题123'; var wappid = '';   function shareMsg() {//<span style="font-family: A

微信js-sdk分享功能接口常用逻辑封装示例

本文实例讲述了微信js-sdk分享功能接口常用逻辑封装.分享给大家供大家参考,具体如下: 微信js-sdk 1.0,分享说明: 1.目前支持的分享接口5个,其中分享腾讯微博基本可以忽略 2.接口只是定义分享时的数据,没有提供触发分享功能 一.在ready事件使用使用示例 //分享对象使用 var shareData={ title:'分享标题', desc:'分享描述', link:'http://www.gongjuji.net', imgUrl:'http://www.gongjuji.ne

Android编程之微信SDK分享功能过程步骤详细分析

本文实例讲述了Android编程之微信SDK分享功能过程步骤详细分析.分享给大家供大家参考,具体如下: 之前已经分析过怎么用官方的demo分享微信信息了,在这里我就不再多说,其中关于在自己应用分享说得很简单,本文作者也是经过一番折腾才弄成功,为了以后让大家都少走弯路,决定在这里从头到尾介绍怎么在自己的应用中分享功能 注意:顺序不能乱!! 1.建立自己的应用 TestShareWX (1)应用包名是com.freeson.test,然后建立一个测试Activity,名字为TestActivity,

微信JS SDK接入的几点注意事项(必看篇)

微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js, 备注:支持使用 AMD/CMD 标准

关于Android实现简单的微信朋友圈分享功能

1.先下载微信分享的jar包放在lib目录下,并且添加依赖, 清单文件添加 <activity android:name=".wxapi.WXEntryActivity" android:exported="true">//产生回调 </activity> 2.在工程下新建如图所示的包和Activity Activity里面的内容主要是创建微信api并且注册返回回调值 private final String APP_ID= "wx

C#实现的微信网页授权操作逻辑封装示例

本文实例讲述了C#实现的微信网页授权操作逻辑封装.分享给大家供大家参考,具体如下: 一.微信网页授权登录 前提: 1.已经获取的接口权限,如果是测试账号就已经有权限了 2.配置接口的授权域名 更多说明可以参考方倍工作室:http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html 或者官网API:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 步骤: 1.用

详解Android微信登录与分享

Android 使用微信登录.分享功能 具体的文档详情微信官网上介绍(微信官网文档),本人直接按照项目部署步骤进行讲解: 第一步:申请你的AppID: 第二步:依赖 dependencies { compile 'com.tencent.mm.opensdk:wechat-sdk-android-with-mta:1.0.2' } 或者: dependencies { compile 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:1

微信JS-SDK分享功能的.Net实现代码

JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了JS-SDK的整体开发包,供开发者方便使用. 分享功能 官方文档里提供了php.java.node.js以及python的示例代码,唯独没有c#版的,为了弥补广大.net用户的需求,我把php版本的示例代码逻辑照搬成了.net版,并在网页前端中加入了分享功能,希望对大家有用. 程序实现 流程图 程序里