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实现微信发送好友如何分享到朋友圈、微博

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

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实现通用的微信分享组件示例

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

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

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

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

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

微信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

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

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

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

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

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

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

C#微信分享代码

本文实例为大家分享了C#微信分享的具体代码,供大家参考,具体内容如下 微信分享代码,先引入: <script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> 获取签名: mui.ajax('/apijson/wxsign', { type: 'get', data: {

js微信分享实现代码

本文实例为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享代码,先引入: <script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> 获取签名: mui.ajax('/apijson/wxsign', { type: 'get', data: { u

PHP微信分享开发详解

分享一个php微信端开发的经验,有时候当一个项目或工程需要微信端分享之后做一系列事件那么我们就需要获取到微信分享这个动作,也就是说我们已经知道了当前这个东西已经被分享了 ,那么走微信默认的分享显然是不行的我们需要自己动手来配置微信分享,当用户分享时走的是我们预定好的程序那么我们就可以轻松实现分享之后所做的事情. 在页面端主要是一个js如下: <script type="text/javascript" src="http://res.wx.qq.com/open/js/

纯javascript模仿微信打飞机小游戏

七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

基于javascript制作微信聊天面板

本文实例分享了javascript制作微信聊天面板的相关代码,具体内容如下 先上图吧 点击头像更换说话对象,简单说下实现原理,html中创建一个ul用于存放所有说话的内容,对话内容是有javascript 动态生成, 主要难点:先布局好css,当时奥巴马发送时候,让这个li有浮动,当是小胖时候,让这个li左浮动. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT