微信开发笔记:微信浏览器分享设置以及回调

在微信中分享给好友/分享到朋友圈这个功能应该是比较常用的了,就拿分享到朋友圈举例,分享出去的内容在朋友圈的展示是以一张小图片+一个简单的介绍的形式来给好友看到的,点击后才是详情,那么这么一来,这张小图片和这段小简介就直接成为了这个被分享后的内容的被点击率的重中之重。在默认情况下,这张图片会载入内容主题部分的第一张大图片,而简介只会加载一个网址。这样的展示方式还是相当不尽如人意的,那我们来看一下这一些内容,是通过什么形式来设置的,拿PHP来做一个举例:

首先我们需要有一个公众号,并且获得appid及appsecret。

然后,我们通过appid和appsecret,就可以向微信平台来换取access_token了。

define("APPID", $appid);
define("APPSECRET", $appsecret);

// 获取access_token
$token_access_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . APPID . "&secret=" . APPSECRET;
$res = file_get_contents($token_access_url); //获取文件内容或获取网络请求的内容
$result = json_decode($res, true); //接受一个 JSON 格式的字符串并且把它转换为 PHP 变量
$access_token = $result[‘access_token‘];

通过access_token,我们可以向微信平台索取一个jsapi_ticket:

// 获取jsapi_ticket
$ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=TOKEN";

$res = file_get_contents($ticket_url); //获取文件内容或获取网络请求的内容
$result = json_decode($res, true); //接受一个 JSON 格式的字符串并且把它转换为 PHP 变量
$ticket = $result[‘ticket‘];

好了,准备工作就绪,我们可以开始我们的设置了。

微信的分享设置是通过wx.config来进行的。

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

中间appid就是我们微信公众号的appid,timestamp是当前的时间戳,noncestr是随机的字符串,用来生成签名的,signature是生成的签名,jsapilist是我们需要使用的微信接口,这边的话我们就使用分享给好友以及分享到朋友圈这两个接口就可以了。

简单列一下timestamp,noncestr,以及signature的生成流程:

// 生成签名
  // 生成随机字符串
class RandChar{
  function getRandChar($length){
   $str = null;
   $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
   $max = strlen($strPol)-1;

   for($i=0;$i<$length;$i++){
    $str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
   }
   return $str;
  }
}
$randCharObj = new RandChar();
$noncestr = $randCharObj->getRandChar(16);

$timestamp = time();
if ($_SERVER[‘QUERY_STRING‘]){
    $url = ‘http://‘.$_SERVER[‘HTTP_HOST‘].$_SERVER[‘PHP_SELF‘].‘?‘.$_SERVER[‘QUERY_STRING‘];
}else{
    $url = ‘http://‘.$_SERVER[‘HTTP_HOST‘].$_SERVER[‘PHP_SELF‘];
}

$parameters = array("noncestr" => $noncestr,
                        "jsapi_ticket" => $ticket,
                        "timestamp" => $timestamp,
                        "url" => $url);
ksort($parameters);

$string1 = "";
foreach ($parameters as $key => $val){
    $string1 .= $key."=".$val."&";
}
$string1 = substr($string1,0,-1);
$signature = sha1($string1);

至此,我们对于wx.config的一个配置就已经完成了,接下去就可以自由设置我们刚刚提到的小图片和简介内容了:

    wx.ready(function(){
        // 分享到朋友圈设置
        wx.onMenuShareTimeline({
            title: ‘测试标题‘, // 分享标题
            link: ‘http://www.baidu.com‘, // 分享链接
            imgUrl: ‘http://mp.weixin.qq.com/wiki/static/assets/dc5de672083b2ec495408b00b96c9aab.png‘, // 分享图标
            success: function () {
                alert("分享成功");
            },
            cancel: function () {
                alert("分享失败");
            }
        });
        // 分享给好友
        wx.onMenuShareAppMessage({
            title: ‘测试标题‘, // 分享标题
            desc: ‘测试分享描述‘, // 分享描述
            link: ‘http://www.baidu.com‘, // 分享链接
            imgUrl: ‘http://mp.weixin.qq.com/wiki/static/assets/dc5de672083b2ec495408b00b96c9aab.png‘, // 分享图标
            type: ‘‘, // 分享类型,music、video或link,不填默认为link
            dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
            success: function () {
                alert("分享成功");
            },
            cancel: function () {
                alert("分享失败");
            }
        });
    })

中间提一下,success和cancel这两个的值也是相当常用的,分别表示成功分享后的js回调以及取消分享后的回调,用来做一些判断用户分享朋友圈后显示心理测试答案之类的小功能还是很有用的哦。

时间: 2024-11-02 23:22:21

微信开发笔记:微信浏览器分享设置以及回调的相关文章

微信开发笔记-调用自定义分享接口

文章来自:http://www.cnblogs.com/ysyn/archive/2015/07/23/4665897.html 引言: 工作中开发微信网站,简称微网站.由于微网站的分享内容是系统自动选取的当前网址,客户需要改变分享的内容,即点击屏幕右上角的分享按钮,选择发送给朋友和发送到朋友圈,其中的内容和图片需要自定义.于是查找文档微信JS-SDK说明文档一文和网站众多高手的经验,大体知道了调用的步骤,但是具体如何调用才能成功却是不了解的.经过一番试验,终于成功调用发送朋友和发送到朋友圈两个

微信开发笔记——微信网页登录授权,获取用户信息

最近做了一个公司的微信的公众号,对微信的流程清楚了不少,这里记录下,算不上多高深的,只希望能帮助到一部分人吧. 我们公司的测试微信公众号:NPCgo 可以感受下,哈哈~~ 闲话少说,开始: 首先大家要看下微信的API文档. 微信网页授权,获取用户的微信官方API文档地址:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 三次握手微信认证流程(我自己简称三次握手): 1.用户同意授权,获取code 2.通过c

微信开发——申请微信支付功能及支付环境设置

很久没写博客文章了,最近一直负责微信开发实现微信支付功能,所以在这方面有一定的了解. 在开始实现微信支付功能的前提是公众号已认证的并已通过审核的服务号,具体微信支付申请人的流程没有比官 方公布的流程更详细的了,附上链接https://mp.weixin.qq.com/paymch/readtemplate?t=mp/business/faq_tmpl,开通 并与微信工作人员沟通微信支付相关授权路径之后,在微信后台可以看到微信支付的相关功能 在支付申请选择下可以查看商户的基本资料以及我们开发支付功

[Openwrt 项目开发笔记]:Openwrt必要设置(二)

前面的两篇blog中,我将如何搭建Openwrt的开发.编译.调试以及烧写环境的方法一一列出了.从本文开始, 我将介绍如何一步一步进行Openwrt设置,以满足路由器作为智能家居网关的功能. ok,闲话休提,开始上干货. 一.Openwrt初始配置 1. 密码设置 当我们成功地将Openwrt刷入路由器后,路由器会经过大约4~5分钟的时间重启(以Netgear Wndr3700为例).待路由器启动之后,用一根网线与路由器LAN口直连,并将PC的IP设置到192.168.1.*网段. 提示:不同的

微信开发SDK|微信sdk使用教程--手机客户端微信下线通知服务端

微信开发SDK|微信sdk使用教程--手机客户端微信下线通知服务端 case WeChatOfflineNotice: {// 手机客户端微信下线通知 log.debug("socket:msgtype=WeChatOfflineNotice"); weChatOfflineNoticeHandler.handleMsg(ctx, msgVo); break; } package com.jubotech.framework.netty.handler.socket; import o

微信开发-如何自定义页面分享元素

场景 微信网页分享到朋友圈及发送给朋友: 内置浏览器的做法是默认采用第一个img元素图片,使用标题作为文本: 需实现自定义 解决方案 通过jssdk实现自定义分享 参考文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 服务端代码 include ('./Lib/COM/jssdk.php'); $jssdk = new JSSDK($tpl['appid'], $tpl['appsecret']); $

微信开发-发送给朋友,分享到朋友圈开发

微信分享功能开发 用了一天时间,把微信发送给朋友和分享到朋友圈功能开发出来,在这里给大家分享一下,避免大家走弯路. 一.服务器端程序 package com.wiimedia.controller; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.ParseException; import

移动端开发笔记-微信

1,ios的button背景使用background url可能无法显示(被缓存),尝试使用img时发现不触发click事件,需改为touchstart事件触发img按钮 2,使用fiddeler抓包 3,createjs禁用了所有的touch事件,绑定事件时需要先启用createjs的touch模块,再使用mousedown代替click(ios不支持click实时触发)或touchstart 4,微信开发获取用户信息流程: 正常活动页面展示(如活动信息,奖励条件等) 用户要求参与活动 aja

关于微信开发与微信支付更新

1.)微信开发一般就是看文档,按部就班调用API就行,这里推荐一些SDK .NET https://github.com/JeffreySu/WeiXinMPSDK JAVA http://git.oschina.net/pyinjava/fastweixin NodeJS https://github.com/node-weixin/node-weixin-api Python http://git.oschina.net/jeffkit/wechat 2.)在之前的文章微信支付[v3]中,说