您的位置：首页 > 编程学习 > > 正文

微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

更多 时间：2022-03-30 00:17:18 类别：编程学习 浏览量：1584

微信公众号怎么开发页面

微信公众平台开发教程②微信端分享功能图文详解

本文实例讲述了微信公众平台微信端分享功能。分享给大家供大家参考，具体如下：

背景

    初次尝试微信公众号的开发，对于学习方法的探索都是来源于网上的博客、问答，对于参差不齐的信息，自己也是有苦说不出，抽出一点时间写点文章，既是对自己的学习总结，也希望给予同是菜鸟的小白一点帮助。

    今天想添加微信分享的功能，如果不进行自定义设计，那么当我们点击分享朋友圈、好友或者qq好友、空间时，默认的标题就是<title>标签中的信息，而显示的描述信息就是链接，图片多是默认为页面中显示的第一张图片，显然这样的处理是不合理的，所以需要查询开发文档进行编码设计。

操作步骤：

一.参考微信公众号开发文档

【1】.登录微信公众号

      打开 “开发者工具->开发者文档->微信网页开发->微信js-sdk说明文档”，找到对应的位置，首先要了解官方的需求说明才能进行下一步的开发。
        微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

【2】.建议详细参考文档后再考虑代码的编写

      提示：下拉上图中的网页最下端，下载官方提供的参考demo。本文的最后我会提供一份稍作修改的仅针对于php的实现代码，可作参考。
        微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

二.代码实现（php）及部分问题引导

【1】.我提供的代码就是下图中的几个简单文件

      主要来源于微信公众号的开发文档，上面提到过一次。其中，我们操作的分享页面代码只需参考 sharepage.php就好，对于官方的实现可以去阅读其他文件，毕竟我们实现功能只需导入文件，调用所提供类及方法就好。
        微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

【2】.在此提供 sharepage.php 简单代码，以便参考讲解。

      其中提出几点需要注意的是： 

（1）.需要提供 $appid, $secret 

（2）.代码中需要引用微信端提供的js文件<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ，当然也可以下载其源代码，放于本地链接获取就可以。 

（3）.保证 wx.config 的信息配置的正确，debug如果为true可以提示操作的过程，测试没有问题后可以改为false,这样才是合理的操作，另外jsapilist中要补全自己需要的功能 

（4）.之前我把分享功能的代码写在 wx.config 平级中无法实现，之后测试发现应该写在wx.reday(function（）)中，具体的代码模式都应该参考开发文档。

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
    		•
  • <?php
  • require_once "jssdk.php";
  •  
  • //获取到网页授权的access_token
  • $appid = "wx36xxxxxxxxxx199";// 输入公众号、服务号、或者测试号的appid
  • $secret = "9caxxxxxxxxxxxxxxxxxx8a2";// 输入公众号、服务号、或者测试号的 secret
  •  
  •  
  • $jssdk = new jssdk($appid, $secret);
  • $signpackage = $jssdk->getsignpackage();
  •  
  • //此处用于输出得到的数据 用来测试签名证书是否正确
  • /*
  • echo ' appid:'. $signpackage["appid"].'<br/>';
  • echo ' jsapi_ticket:'. $signpackage["jsapiticket"].'<br/>';
  • echo ' url:'. $signpackage["url"].'<br/>';
  • echo ' timestamp:'. $signpackage["timestamp"].'<br/>';
  • echo ' noncestr:'. $signpackage["noncestr"].'<br/>';
  • echo ' signature：'. $signpackage["signature"];
  • echo '<br/>';
  • echo '<br/>';
  • echo '<br/>';
  • exit;
  • */
  •  
  • ?>
  • <!doctype html>
  • <html lang="en">
  • <head>
  •  <meta charset="utf-8">
  •  <title></title>
  • </head>
  • <body>
  •  hello hello hello
  • </body>
  • <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  • <script>
  •  /*
  •  * 注意：
  •  * 1. 所有的js接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“js接口安全域名”。
  •  * 2. 如果发现在 android 不能分享自定义内容，请到官网下载最新的包覆盖安装，android 自定义分享接口需升级至 6.0.2.58 版本及以上。
  •  * 3. 常见问题及完整 js-sdk 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
  •  *
  •  * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
  •  * 邮箱地址：weixin-open@qq.com
  •  * 邮件主题：【微信js-sdk反馈】具体问题
  •  * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
  •  */
  •  wx.config({
  •  debug: true,
  •  appid: '<?php echo $signpackage["appid"];?>',
  •  timestamp: <?php echo $signpackage["timestamp"];?>,
  •  noncestr: '<?php echo $signpackage["noncestr"];?>',
  •  signature: '<?php echo $signpackage["signature"];?>',
  •  jsapilist: [
  •   // 所有要调用的 api 都要加到这个列表中
  •   'checkjsapi',
  •   'onmenusharetimeline',
  •   'onmenushareappmessage',
  •   'onmenushareqq',
  •   'onmenushareweibo',
  •   'onmenushareqzone',
  •  ]
  •  });
  •  
  •  wx.ready(function () {
  •  // 在这里调用 api
  •  //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
  •  wx.onmenusharetimeline({
  •   title: '快来!分享朋友圈', // 分享标题
  •   link: 'http://www.baidu.com', // 分享链接
  •   imgurl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg" alt="微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）" border="0" />, // 分享图标
  •   success: function () {
  •   // 用户确认分享后执行的回调函数
  •   },
  •   cancel: function () {
  •   // 用户取消分享后执行的回调函数
  •   }
  •  });
  •  //获取“分享给朋友”按钮点击状态及自定义分享内容接口
  •  wx.onmenushareappmessage({
  •   title: ' 微信分享给朋友', // 分享标题
  •   desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
  •   link: 'http://www.baidu.com', // 分享链接
  •   imgurl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg" alt="微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）" border="0" />, // 分享图标
  •   type: 'link', // 分享类型,music、video或link，不填默认为link
  •   dataurl: '', // 如果type是music或video，则要提供数据链接，默认为空
  •  });
  •  wx.onmenushareqq({
  •   title: 'qq我要跳转到百度页面了啊！', // 分享标题
  •   desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
  •   link: 'http://www.baidu.com', // 分享链接
  •   imgurl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg" alt="微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）" border="0" />, // 分享图标
  •  });
  •  wx.onmenushareqzone({
  •   title: 'qzone我要跳转到百度页面了啊！', // 分享标题
  •   desc: '描述一下，可是知道该咋描述你呢？', // 分享描述
  •   link: 'http://www.baidu.com', // 分享链接
  •   imgurl: 'http://img1.3lian.com/img013/v2/4/d/101.jpg" alt="微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）" border="0" />, // 分享图标
  •  });
  •  });
  • </script>
  • </html>
    		•
    【3】.正常操作中，可能会有 “errmsg config:invalid signature" 签名错误

          可以参考博文  ，网上多数的建议是检查签名证书是否正确，用作者的话就是“确认签名算法正确，可用  页面工具进行校验”。
           微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）      

    对于需要填入的信息，可以从上文中打印出需要的信息，我做注释的那一部分信息，请参考。不过，普遍情况，这样的签名是没有问题的，可作为参考。

    【4】.新发现一种情况

         原先一切正常的分享功能，突然变得无法显示分享时的链接、图片等，我将 wx.config 中的debug 设定为true继续报错“errmsg config:invalid signature"，并非签名证书的问题，我猜测应该是文档中一直提及的token或ticket缓存问题，个人打开之前导入的两个文件发现已经重新写入了值，但是我将其重新改为当初下载下来的文件放入服务器中覆盖，意外的发现可以重新获得正确的分享能力，不知哪一天又会出现问题，也希望好心的大牛告知一下。

    【2016-7-14 补充】

          经测试发现，上文提及分享功能的失败，与token ，ticket 存储文件没有多大关系，因为如今无法重现 bug，无语的是，发现当初开发者中心使用的测试号是被赋予了分享权限的，然而自己申请的订阅号，通过查看“接口权限”发现“未获得”分享权限。

            微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

          一般的服务号都是拥有分享权限的，获取需要开通什么来着，具体的可百度，我的问题是没有进入“公众号平台->公众号设置->功能设置”中填写“js接口安全域名”，其中要求是备案过的域名，个人实验证明填写去掉“http://www”后的形如“beidou.com”的域名即可，便于限制诱导关注的情况出现。

          设置完成后可以查看上图中的“分享接口”，保证里面显现的是获得权限，然后再进行菜单栏的分享测试即可发现，正常进行。

    【5】.我遇到过提示此处代码报错的问题

          参考网上资源介绍的多是与签名安全相关的信息，可自行百度，鉴于能力有限，暂时发现注释此处的代码可避免该问题的影响，等有时间再做深入解决。
         微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）

    【6】.最后的报错信息显示该处对于文件操作的权限不足的问题

          类似 “warning: fopen(access_token.json) [function.fopen]: failed to open stream: permission denied in jssdk.php "问题，可以参考此文的部分介绍。
         微信公众号怎么开发页面（微信公众平台开发教程②微信端分享功能图文详解）       值得一提的是该问题大多牵扯操作系统的权限分配，之前我用的是新浪sae进行测试，后面得知sae是无法由我们用户进行权限设定的，最后我选择了公司服务器，使用类似 “chmod -r 777 /home/mypackage ” 的命令进行对应文件的操作权限分配。

    三.补充

    1.出现问题，多参考别人的解决方法，可见有一个可以带你的前辈是多么重要 

    2.自己探索问题的解决方法，然后做好笔记作为自己的经历回顾，虽然解决时间拉长，但成就感绝对比从别人口中听来分量重的多。 

    3.在此我粘贴稍作修改后的代码，其实就是其中的大概几行的改动，为了配合上面签名的测试，所以需要参考，其中另外的两个文件没做改动，无需上传，公众号开发文档的最后就有 demo 文件，具体的请参照开发文档。      

  • ?
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
    		•
  • <?php
  • class jssdk {
  •  private $appid;
  •  private $appsecret;
  •  
  •  public function __construct($appid, $appsecret) {
  •  $this->appid = $appid;
  •  $this->appsecret = $appsecret;
  •  }
  •  
  •  public function getsignpackage() {
  •  $jsapiticket = $this->getjsapiticket();
  •  
  •  // 注意 url 一定要动态获取，不能 hardcode.
  •  $protocol = (!empty($_server['https']) && $_server['https'] !== 'off' || $_server['server_port'] == 443) ? "https://" : "http://";
  •  $url = "$protocol$_server[http_host]$_server[request_uri]";
  •  
  •  $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,
  •  "jsapiticket" => $jsapiticket,
  •  "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($this->get_php_file("jsapi_ticket.php"));
  •  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;
  •  $this->set_php_file("jsapi_ticket.php", json_encode($data));
  •  }
  •  } else {
  •  $ticket = $data->jsapi_ticket;
  •  }
  •  
  •  return $ticket;
  •  }
  •  
  •  private function getaccesstoken() {
  •  // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
  •  $data = json_decode($this->get_php_file("access_token.php"));
  •  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;
  •  $this->set_php_file("access_token.php", json_encode($data));
  •  }
  •  } 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);
  •  // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
  •  // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
  •  curl_setopt($curl, curlopt_ssl_verifypeer, true);
  •  //curl_setopt($curl, curlopt_ssl_verifyhost, true);
  •  curl_setopt($curl, curlopt_url, $url);
  •  
  •  $res = curl_exec($curl);
  •  curl_close($curl);
  •  
  •  return $res;
  •  }
  •  
  •  private function get_php_file($filename) {
  •  return trim(substr(file_get_contents($filename), 15));
  •  }
  •  private function set_php_file($filename, $content) {
  •  $fp = fopen($filename, "w");
  •  fwrite($fp, "<?php exit();?>" . $content);
  •  fclose($fp);
  •  }
  • }
    		•

    四、附录

        1.在此推荐参考一篇比较详细的 微信分享博文，向前辈致敬。   
        2.源代码之前存于360云盘共享
    如今已经过期找不到了。其实参考文中的代码同时下载官方demo就能完全重现源代码。
        3.此处 推荐参考新篇： 微信公众平台开发教程微信开发集成类的使用 （包含微信分享功能）

    希望本文所述对大家php程序设计有所帮助。

    原文链接：https://blog.csdn.net/u011415782/article/details/51870790

    标签：微信公众平台 微信 分享
  • 上一篇：serv-u服务器安装（Serv-U搭建FTP服务器教程之建立登录用户和密码）
  • 下一篇：vue怎么注册公共组件（解读Vue组件注册方式）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利