最近做了一个微信分享朋友圈的功能记录一下流程:

第一:设置微信公众账号

登陆微信公众平台,在微信平台设置里面添加js安全接口

iOS 开发朋友圈技术 朋友圈开发怎么设置_微信小程序

iOS 开发朋友圈技术 朋友圈开发怎么设置_微信小程序_02

按照上面的说明需要下载验证文件到指定的域名根目录或者指定的文件夹下

第二:设置ip白名单

设置---公众号设置---IP白名单里设置,多个ip用回车间隔。

iOS 开发朋友圈技术 朋友圈开发怎么设置_iOS 开发朋友圈技术_03

第三:获取保存appId和appSecret,后面会用到!

第四:开始进行开发阶段

=========================================================================

用到的几个网址:

微信公众平台文档说明:概述 | 微信开放文档

access_token调试接口【本地电脑和服务器配置域名不同】:https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口%20/token

jsapi_ticket签名验证接口:微信 JS 接口签名校验工具

===================================================================

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

  1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
  2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON:

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。

iOS 开发朋友圈技术 朋友圈开发怎么设置_小程序_04

DEMO页面: http://demo.open.weixin.qq.com/jssdk 

微信公众平台官方示例代码:

http://demo.open.weixin.qq.com/jssdk/sample.zip

备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制

============================================

具体后端代码:jssdk.php

<?php
$url = $_GET['url'];
class JSSDK {
  private $appId;
  private $appSecret;
  private $url;
  public function __construct($appId, $appSecret,$url) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
	$this->url = $url;
  }


  public function getSignPackage() {
    $jsapiTicket = $this->getJsApiTicket();
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
   // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url =$this->url;
    $timestamp = time();
    $nonceStr = $this->createNonceStr();


    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
    $signature = sha1($string);
    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage; 
  }


  private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }


  private function getJsApiTicket() {
    // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      // 如果是企业号用以下 URL 获取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 7000;
        $data->jsapi_ticket = $ticket;
        $fp = fopen("jsapi_ticket.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }


    return $ticket;
  }


  private function getAccessToken() {
    // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("access_token.json"));
    if ($data->expire_time < time()) {
      // 如果是企业号用以下URL获取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 7000;
        $data->access_token = $access_token;
        $fp = fopen("access_token.json", "w");
        fwrite($fp, json_encode($data));
        fclose($fp);
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }

  private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
  }
}

$jssdk = new JSSDK("wxbaee6c3d", "4e5ae4590946d9",$url);//按照自己的公众号填写
$signPackage = $jssdk->GetSignPackage();
$tmp=json_encode(array ('appId'=>$signPackage["appId"],'timestamp'=>$signPackage["timestamp"],'nonceStr'=>$signPackage["nonceStr"],'signature'=>$signPackage["signature"],'url'=>$signPackage["url"]));//数组转换成json格式
$callback = $_GET['callback'];
echo $callback.'('.$tmp.')';
exit;
?>

微信二次分享缩略图和链接失效,二次分享的时候url后会拼接?from=singlemessage&isappinstalled=0

注意过滤不必要的参数,重新拼接url

iOS 开发朋友圈技术 朋友圈开发怎么设置_微信小程序_05

前端代码段:

注意jq的引入

<script type="text/javascript" src="/skin/phone/js/jquery-1.7.2.min.js"></script>
 <script  src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 <script  src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script>
 url=location.href;

//解决二次分享的问题

function getQueryString(name) {//根据字段看网址是否拼接&字符串
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
           var r = window.location.search.substr(1).match(reg);
           if (r != null)
               return unescape(r[2]);
           return null;
         }

//微信二次分享添加的参数
     

var from = getQueryString('from');
         var appinstall = getQueryString('appinstall');
         var sec = getQueryString('sec');
         var timekey = getQueryString('timekey');
   //    过滤微信二次分享添加的参数
         if(from || appinstall || sec || timekey){//假如拼接上了
             window.location.href = url.split("?")[0]; 
         }
 var img;
 var content;img='分享图片地址';
 //console.log(img);content='分享简介内容';
//分享简介内容html过滤
 content=content.replace(/\n/g, "");
 content=content.replace(/<(?!img).*?>/g, "");
 content=content.replace(/&(.*);/g, ""); 
 //console.log(content);//获取当前页分享链接
 url=location.href;//ajax调用
  $.ajax({
     type : "get",
     url : "*********/jssdk.php?url="+url,//替换网址
     dataType : "jsonp", ///JSONP跨域实现     jsonp: "callback",
     jsonpCallback:"success_jsonpCallback",
     success : function(data){
         //console.log(data);        wx.config({
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: [
        "onMenuShareTimeline", //分享给好友
        "onMenuShareAppMessage", //分享到朋友圈
        "onMenuShareQQ",  //分享到QQ
        "onMenuShareWeibo" //分享到微博
 ]
 });
 },
                 error:function(data){
                    // alert("连接失败!");
                 }
 });
   wx.ready(function (){//定义分享数据
   var shareData = {
   title: '分享标题',
   desc:content,//这里请特别注意是要去除html111
   link:url,
   imgUrl:img
   };
   wx.updateAppMessageShareData(shareData); 
   wx.updateTimelineShareData(shareData); 
   wx.onMenuShareAppMessage(shareData); //即将废弃
   wx.onMenuShareTimeline(shareData); //即将废弃
   wx.onMenuShareQQ(shareData); //即将废弃
   wx.onMenuShareWeibo(shareData); //即将废弃
     });
 </script>