• 微信分享功能 2015-08-27 15:44:17
    最近在搞微信二次开发,所以,今天给大家带来一篇,关于微信分享的功能。有很多人不明白:既然人家腾讯已经把微信的功能做的这么强大了,为什么,我们还要搞二次开发呢?呵呵,这个很好解释,我下面举个例子:你自己...
    #### 最近在搞微信二次开发,所以,今天给大家带来一篇,关于微信分享的功能。有很多人不明白:既然人家腾讯已经把微信的功能做的这么强大了,为什么,我们还要搞二次开发呢?
    
    ####呵呵,这个很好解释,我下面举个例子:你自己开发出来一款轻应用。在微信上预览,之后你点击了微信右上角的分享键。那么肯定的,你的轻应用被分享出去了。那么问题来了,你想知道,你的分享被点击了多少次,这个在微信上是看不到的。除非你有自己的微信公众帐号。通过微信公众帐号,发送图文消息,类似于轻应用的那种。可以看到点击量。
    
    ####既然我们看不到被分享的次数,那么怎么办呢? 这就引出了,微信二次开发的概念。腾讯没有做的功能,我们可以自己做。当然,我们做的时候是需要调用人家腾讯的接口的。在微信分享的接口里面调用自己的接口。
    
    ####
    
    
    
     1. 要申请一个微信开发者帐号
         然后你会得到属于你自己的appID和appsecret,确保不让别人知道。
         然后你需要绑定安全域名。
         安全域名的话,大家可以申请一个花生壳。只需要1¥就可以申请下来。
         我们可以利用花生壳,把本机连接映射到外网。这样大家就可以访问了。
         在微信平台测试号上测试的时候也可以访问到
         ![这里写图片描述](https://img-blog.csdn.net/20150827150703801)
           ![这里写图片描述](https://img-blog.csdn.net/20150827150921908)
     2.
       在页面中要引用微信的js
    	微信js
    	也可以把js保存下来,放到自己项目的目录中。
    ```
     
    ``` 
    	后台接口准备好。
    	后台接口得到时间戳、签名随机串、签名
    
     3.通过config接口注入权限验证配置
     
    
    ```
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    ```
    	 
    4.通过ready接口处理成功验证
    
    ```
    wx.ready(function(){
    
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });
    ```
    
      
     5.通过error接口处理失败验证
     
    
    ```
    wx.error(function(res){
    
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    
    });
    ```
    
    6.
    
    ```
    获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
    
    wx.onMenuShareTimeline({
        title: '', // 分享标题
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        success: function () { 
            // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    ```
    7.
    
    ```
    获取“分享给朋友”按钮点击状态及自定义分享内容接口
    
    wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    ```
    
    8.
    
    ```
    获取“分享到QQ”按钮点击状态及自定义分享内容接口
    
    wx.onMenuShareQQ({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        success: function () { 
           // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
           // 用户取消分享后执行的回调函数
        }
    });
    ```
    9.
    
    ```
    获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    
    wx.onMenuShareWeibo({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        success: function () { 
           // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    ```
    10.
    
    ```
    获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
    
    wx.onMenuShareQZone({
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接
        imgUrl: '', // 分享图标
        success: function () { 
           // 用户确认分享后执行的回调函数
        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    ```
    
     
      
       
       ####下面给大家看一下完整代码。
       
    
    ```
    
    
    
    	
    	
    	
        weixin.html
    
    	
    	
    		var vurl=window.location.href.split('#')[0];
    		$.ajax({url:'getInfoController', //调用后台接口得到时间戳、签名、随机串
    			type:'post',
    			dataType:'json',
    			//async: false,
    			data : {
    				pageUrl:vurl
    			},
    			success:function(data){
    				var time=data[0].timestamp;
    				alert("时间戳:"+time);
    				var nonceStr=data[0].nonceStr;
    				alert("签名随机串:" +nonceStr);
    				var signature=data[0].signature; 
    				alert("签名:" +signature);
    				wx.config({
    					debug: true, // 开启调试模式
    					appId: 'wx18f437edbca63db7', // 必填,公众号的唯一标识
    					timestamp: time, // 必填,生成签名的时间戳
    					nonceStr: nonceStr, // 必填,生成签名的随机串
    					signature: signature,// 必填,签名,见附录1
    					jsApiList: ['onMenuShareTimeline',
    					'onMenuShareAppMessage',
    					'onMenuShareQQ',
    					'onMenuShareWeibo'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    				});
    			},
    			error:function(){
    				alert("error");
    			}
    		});
    	
      
      
      
        测试微信分享。。
      
      
      
      	
      	wx.ready(function(){
    		wx.onMenuShareTimeline({     //分享到朋友圈
    		    title: 'nihao', // 分享标题
    		    link: '', // 分享链接
    		    imgUrl: 'https://mmbiz.qlogo.cn/mmbiz/UwcnVvztXiaHoFCCqH0AZ1I05nkBA2bwungj7yROIoAhSkX8zG0zMwtb03Q7GpKdaP5awaia3ibGvDUlBGOvEwCnQ/0?wx_fmt=gif', // 分享图标
    		    success: function () { 
    		    	alert("哈哈,龙哥,成功了~~ ");
    		        // 用户确认分享后执行的回调函数
    		        //下面我们可以做自己的操作,调用自己的接口了。
    		    },
    		    cancel: function () { 
    				alert("唉,龙哥,取消了~~ ");
    		        // 用户取消分享后执行的回调函数
    		    },
    		    fail:function(){
    		    	alert("唉,龙哥,失败了~~ ");
    		    }
    		});
    		
    		wx.onMenuShareAppMessage({
    			title: '5330邹煜凯',
    			link: vurl,
    			imgUrl: "http://www.xxxx.com/fileupload/savefiles/20150827141750_871.png",
    			desc: "5330邹煜凯", // 分享描述
    			trigger: function (res) { 
    			},
    			success: function (res) {
    			$.ajax({
    				url:'http://www.xxxx.com/templateApp/shareToFriends?t_id=3718',
    				type:'post',
    				dataType:'json',
    				async:false,
    				success:function(data){
    				alert("恭喜,发送成功!");
    				}
    			});
    			},
    			 cancel: function (res) { 
    			 },
    			 fail: function (res) { 
    			 }
    		});
    	});
    // config信息验证失败会执行error函数,如签名过期导致验证失败 
     wx.error(function (res) {
    	 alert(res.errMsg);
    }); 
      
    
    
    ```
    
     大家如果对微信二次开发不了解的。可以看
     
     [微信开发者文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)
    
    这里面的介绍比较详细。
    
    
    
    
    
    展开全文
  • 微信开发之禁止分享 既然是微信的分享功能,当然要用微信接口,微信接口在调用时有两种方式,但是前提是页面要引入微信的js-JDK 通过配置wx.config(),config:ok后,会执行wx.ready(function(){}),把我们需要...
  • 微信开发之入门教程 2016-01-12 10:55:26
    微信开发也是有了一定的认识。在此,小宝鸽再次无私地分享给大家啦。其实微信开发跟web开发没有多大的区别,只是经过了微信,然后再由浏览器打开。因为经过微信,因此你的web会附加一些微信平台所提供的一些功能,...
  • 现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接:    上面这个是微信的js-SDK页面分享微信好友在聊天列表中显示的...
  • 微信分享功能
  • 如图,图1是其它游戏分享链接的显示效果(前提是在微信中打开并分享出去),图2是我们游戏页面(同样在微信中打开并分享出去)分享链接的显示效果。 要达到图1的自定义文案与图标的效果,经研究与各种尝试,得到的...
  • 问题与需求:h5页面的内容在微信分享分享的内容无法定制,要自定义分享内容为该h5页面的标题,内容,图片等。  实现与排错:由于本人技术有限,基本都是参照网络上大神们提供的源码,在部分地方做了简单修改。...
  • 微信公众号自定义分享跟我们自己打开一些对应页面的分享还是有区别的。 首先,自定义链接分享可以我们去主动去分享这个页面,同时我们可以有针对性的加上标题、图片、信息描述等。我们在生活中常常能够看到分享的...
  • 二、配置微信分享的SDK 三、微信分享示例 四、微信分享的结果回调 五、微信分享的踩坑总结 一、申请应用 1、首先到 [ 微信开放平台官网] 申请注册帐号,这些流程就忽略了到官网一看...
  • 微信JS-SDK分享到朋友圈和分享给朋友的代码
  • 在一个h5页面添加微信分享微信好友、朋友圈、腾讯微博 下面来实现 。 需要: 1、需要一个企业版的微信公众号(认证过的) 2、一台服务器 企业版的微信公众号原因: 在微信公众平台的接口权限内可以看到,...
  • 微信小程序直接分享到朋友圈微信小程序直接分享到朋友圈 微信小程序直接分享到朋友圈的实现: 方法很简便:在js中添加onShareTimeline()函数即可,分享到朋友圈的展示形式是小程序logo+小程序名称 目前在朋友圈...
  • 微信小程序分享功能知识点微信小程序分享功能知识点概览小程序与普通网页开发的区别小程序运行机制启动前台/后台状态小程序销毁WXS响应事件的动机微信分享需求描述程序流程FAQs同类小程序分享功能调研&...
  • 微信开发之JSSDK调用 2016-11-22 17:03:13
    由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。 因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信...
  • vue微信网页开发自定义分享踩坑关于项目思路准备上代码微信网页开发的坑微信签名:微信授权分享页面的标题 关于项目 之前做的微信网页开发项目,用vue写的,前后端分离项目,使用vue-cli3搭建,路由模式history。...
  • 三:微信调用分享方法 第一步:引入微信weixin-js-sdk文件 第二步:调用微信方法: shard(api) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,...
  • 微信网页开发--分享接口 2017-03-08 14:23:44
    微信文档微信JS-SDK说明文档JSSDK使用步骤首先确保已经获取了相关权限 步骤一:绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注:登录后可在“开发者中心”查看对应...
  • 微信开发的准备工作完成后就可以开始开发,废话不多说,直接贴代码 一,前端实现 前端的实现微信开放平台已经给出了实现步骤,我们只需要按照其给出的步骤实现就行,微信公众平台 二,后端 ①,Controller层...
  • 本文介绍的只是微信开发中的一个功能,分享。看到网上很多关于微信分享的博客、帖子,说实话,没几篇写的全的,很多都是复制粘贴,介绍的也不全,缺少代码的分析,关键性的代码总是漏一句两句,看着就很难受。所以,...
1 2 3 4 5 ... 20
收藏数 55,038
精华内容 22,015