zoukankan      html  css  js  c++  java
  • 微信JSSDK分享功能详解

    本文以微信分享到朋友圈,分享给微信好友为例为参考,进行调用测试,想添加其他的功能,自行查看开发人员文档即可

    工欲善其事,必先利其器,好好利用下边的帮助工具,都是腾讯给开发人员的工具

    1.微信开发者说明文档:点击查看

    2.微信WEB开发者工具:

    Windows 64位版本:下载地址

    Windows 32位版本:下载地址

    Mac版本:下载地址

    3.微信JSSDK分享sample:点击下载

    4.在线DEMO:http://203.195.235.76/jssdk/

    微信版本6.0以后,原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {}不再可在以使用,那如何在使用微信的其他功能呢?官方给出了JSSDK的使用,帮助我们解决~

    前言:

    虽然微信提供了JSSDK,但是这不意味着你可以用自定义的按钮来直接打开微信的分享界面,这套JSSDK只是把微信分享接口的内容定义好了,实际还是需要用户点击右上角的菜单按钮进行主动的分享,用户点开分享界面之后,出现的内容就会是你定义的分享标题、图片和链接


    • 2.实测图解
    •  
    • 2.1 测试页面:
    2.2分享到朋友圈:
     

     
     
     
     
     


    2.3分享到朋友圈:
     
     
    (这个是触发success的效果,配图描述写错了,抱歉)
     
    (这个是触发cancel的效果)
     
     

    2.3调试界面:




    后台代码(jssdk.PHP见后边):

    [php] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. //获取apptoken  
    2. require_once "jssdk.php";  
    3. $jssdk = new JSSDK($appid,$appsecret);//这里填写自己的appid 和secret  
    4. $signPackage = $jssdk->GetSignPackage();  
    5. $this->assign("signPackage",$signPackage);  

    JS配置代码

    [javascript] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>  
    2.   <script type="text/javascript">  
    3.   wx.config({  
    4.     debug: false,  
    5.     appId: '{$signPackage["appId"]}',  
    6.     timestamp: '{$signPackage["timestamp"]}',  
    7.     nonceStr: '{$signPackage["nonceStr"]}',  
    8.     signature: '{$signPackage["signature"]}',  
    9.     jsApiList: [  
    10.       // 所有要调用的 API 都要加到这个列表中  
    11.         'checkJsApi',  
    12.         'onMenuShareTimeline',  
    13.         'onMenuShareAppMessage',  
    14.         'onMenuShareQQ',  
    15.         'onMenuShareWeibo',  
    16.         'onMenuShareQZone'  
    17.     ]  
    18.   });  
    19.   </script>  
    20.   <script type="text/javascript" src='http://203.195.235.76/jssdk/js/zepto.min.js'></script>  

    JS分享代码:

    [javascript] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript">  
    2.         //完成wx.config,执行这里  
    3.          wx.ready(function () {  
    4.              //分享到朋友圈  
    5.              wx.onMenuShareTimeline({  
    6.                  title: '1111111', // 分享标题  
    7.                  link:window.location.href,  
    8.                  imgUrl: "{pigcms:$res['pic']}", // 分享图标  
    9.                  success: function () {  
    10.             // 分享成功执行此回调函数  
    11.                     alert('success');  
    12.                  },  
    13.                  cancel: function () {  
    14.                     alert('cancel');  
    15.                  }  
    16.              });  
    17.   
    18.              //分享给朋友  
    19.              wx.onMenuShareAppMessage({  
    20.                  title: '22222', // 分享标题  
    21.                  desc: '22222',  
    22.                  link:window.location.href,  
    23.                  imgUrl: "{pigcms:$res['pic']}", // 分享图标  
    24.                  trigger: function (res) {  
    25.                      // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回  
    26.                  },  
    27.                  success: function (res) {  
    28.              // 分享成功执行此回调函数  
    29.                      alert('已分享');  
    30.                  },  
    31.                  cancel: function (res) {  
    32.                      alert('已取消');  
    33.                  },  
    34.                  fail: function (res) {  
    35.                      alert(JSON.stringify(res));  
    36.                  }  
    37.              });  
    38.          });  
    39.   
    40. </script>  



    JSSDK类

    jssdk.php

    [php] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
      1. <?php  
      2. class JSSDK {  
      3.   private $appId;  
      4.   private $appSecret;  
      5.   
      6.   public function __construct($appId, $appSecret) {  
      7.     $this->appId = $appId;  
      8.     $this->appSecret = $appSecret;  
      9.   }  
      10.   
      11.   public function getSignPackage() {  
      12.     $jsapiTicket = $this->getJsApiTicket();  
      13.   
      14.     // 注意 URL 一定要动态获取,不能 hardcode.  
      15.     $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";  
      16.     $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";  
      17.   
      18.     $timestamp = time();  
      19.     $nonceStr = $this->createNonceStr();  
      20.   
      21.     // 这里参数的顺序要按照 key 值 ASCII 码升序排序  
      22.     $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";  
      23.   
      24.     $signature = sha1($string);  
      25.   
      26.     $signPackage = array(  
      27.       "appId"     => $this->appId,  
      28.       "nonceStr"  => $nonceStr,  
      29.       "timestamp" => $timestamp,  
      30.       "url"       => $url,  
      31.       "signature" => $signature,  
      32.       "rawString" => $string  
      33.     );  
      34.     return $signPackage;   
      35.   }  
      36.   
      37.   private function createNonceStr($length = 16) {  
      38.     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  
      39.     $str = "";  
      40.     for ($i = 0; $i < $length; $i++) {  
      41.       $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);  
      42.     }  
      43.     return $str;  
      44.   }  
      45.   
      46.   private function getJsApiTicket() {  
      47.       
      48.       $accessToken = $this->getAccessToken();  
      49.        
      50.       // 如果是企业号用以下 URL 获取 ticket  
      51.       // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";  
      52.       $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";  
      53.       $res = json_decode($this->httpGet($url));  
      54.        
      55.       $ticket = $res->ticket;  
      56.         
      57.     return $ticket;  
      58.   }  
      59.   
      60.   private function getAccessToken() {  
      61.     // access_token 应该全局存储与更新,以下代码以写入到文件中做示例  
      62.     // 如果是企业号用以下URL获取access_token  
      63.     // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";  
      64.       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";  
      65.       $res = json_decode($this->httpGet($url));  
      66.       $access_token = $res->access_token;  
      67.        
      68.     return $access_token;  
      69.   }  
      70.   
      71.   private function httpGet($url) {  
      72.     $curl = curl_init();  
      73.     curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);  
      74.     curl_setopt($curl, CURLOPT_TIMEOUT, 500);  
      75.     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);  
      76.     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);  
      77.     curl_setopt($curl, CURLOPT_URL, $url);  
      78.   
      79.     $res = curl_exec($curl);  
      80.     curl_close($curl);  
      81.   
      82.     return $res;  
      83.   }  
      84. }  
  • 相关阅读:
    运行级别和root密码找回
    磁盘情况查询
    linux磁盘分区、挂载
    三、本地负载均衡器与openfeign声明式客户端
    二、Nacos服务注册与发现
    一、微服务架构演变过程
    shell工具
    Netty概述
    垃圾回收概述及算法
    执行引擎
  • 原文地址:https://www.cnblogs.com/vaevvaev/p/6813539.html
Copyright © 2011-2022 走看看