开发者社区> ap0581w9c> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信分享自定义图片和摘要

简介: 参考:  微信分享实现   微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。
+关注继续查看

参考: 

微信分享实现

 

微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实官方的文档也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)

必要的前提准备

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:

  1. 微信认证过的公共号

    必须是认证过的,未认证或者认证过期都不行

  2. 一个域名

    需要备案过的

  3. 一台服务器

    因为前端页面需要的appIdsignature是需要后台传递过来的。官方默认后台程序有PHPPythonNodeJava版本,不过我这里以PHP作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)

配置过程

1. 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)

2. 获取access_token

这部分工作属于后台开发,主要功能是利用公共号APPIDAPPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP为例)。

  1. 将下载得到的压缩包解压后复制php文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为.php(必须。因为后台不完善所以不能直接ajax获得access_token的值,这里假设需要分享的html页面是index.php
  2. 打开index.php,在html的DOCTYPE声明之前添加一段PHP代码:
    <?php
    require_once "../php/jssdk.php";/* 这里的文件路径视`php`文件夹所在路径而定。不一定都要一样,个人建议扔到一个所有html文件夹都可以引用的目录*/
    $jssdk = new JSSDK("你的APPID", "你的APPSECRET");
    $signPackage = $jssdk->GetSignPackage();
    ?>

这里的后台代码都是直接拿的官方,小站点可以直接利用,但是大站点请勿直接使用,因为官方的后台代码没有缓存access_token很容易触发每日的2k次API调用上限,一旦到了上限,当天就无法继续认证。所以建议有能力的不要直接用官方的示例代码。AppID和AppSecret可在微信公众平台官网-开发者中心页中获得(需要已经成为开发者,且帐号没有异常状态)

3. 前端配置验证权限

这里是前端的工作,主要是利用前一步得到的access_token来获取签名等认证信息,只有正确的配置才可以正常获取到使用官方js-sdk的权限。
1.引入JS文件
index.php文件里添加一个script标签,引用官方js:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

 

  1. 通过config接口注入权限验证配置

    <script>
    wx.config({
    debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来
    'checkJsApi',
    'onMenuShareTimeline',//
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo'
    ]
    });
    </script>

    上面的属性都是必须的,不过都不需要自行填写。这里只使用了几个分享相关的jsApiList,完整列表见官网说明

  2. 配置分享信息并通过ready接口处理

    <script>
    window.share_config = {
    "share": {
    "imgUrl": "http://www.yourwebsite.com/share.png",//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
    "desc" : "你对页面的描述",//摘要,如果分享到朋友圈的话,不显示摘要。
    "title" : '分享卡片的标题',//分享卡片标题
    "link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。
    "success":function(){//分享成功后的回调函数
    },
    'cancel': function () {
    // 用户取消分享后执行的回调函数
    }
    }
    };
    wx.ready(function () {
    wx.onMenuShareAppMessage(share_config.share);//分享给好友
    wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
    wx.onMenuShareQQ(share_config.share);//分享给手机QQ
    });
    </script>

    share_config里的四个属性在分享卡片里代表的含义如下图所示:
    img:img

到这里配置完成。正常情况下的话分享出去是会有摘要和分享图的。

分享信息配置失败的调试方法

有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图,而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面,微信也给了调试接口,官方也有部分说明

    1. 打开wx.config里的debug
      debug设置为true之后,手机进入页面,会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息,参考意义不是很大——不过可以拿来查看链接是否有误)。
      如果正确的话,会提示{"errMsg":"config:ok"}
    2. 提示{"errMsg":"config:invalid url domain"}

      这个最常见,主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的APPID对应的公共号绑定,不过我实际使用中发现应该也可以分离。另外如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名)
    3. 提示{"errMsg":"config:invalid signature"}

      造成这个情况的可能性比较多。不过主要有以下三个原因:

      1. APPIDAPPSECRET填错了。
        可以到官方的调试页面获取access_token看看是否是正确的
      2. 超过了每日的access_token获取上限
        官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。
      3. 微信公共号状态不正常。
        比如验证过期了,被封禁了等等。
    4. 常用的接口调试链接以及说明文档:

      获取access_token
      https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

      根据返回的结果可以判断页面内的APPIDAPPSECRET有没有出错

      获取jsapi_ticket
      https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

      利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。

      全局返回码说明
      http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html

      接口频率限制说明
      http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序--》小程序—自定义组件使用
⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。
18 0
php 图像裁剪(自定义裁剪图片大小)
php 图像裁剪(自定义裁剪图片大小)
5 0
微信小程序:自定义swiper 圆点的样式
微信小程序:自定义swiper 圆点的样式
4 0
微信小程序:自定义swiper 圆点的样式
微信小程序:自定义swiper 圆点的样式
70 0
CSS3的自定义动画帧
CSS3的自定义动画帧
828 0
Android--自定义控件(图片轮播)
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/72329936 效果图: 方法一:原理就是利用定时任务器定时切换ViewPager的页面 import java.
891 0
微信自定义菜单生成器
一、介绍 微信自定义菜单生成器是方倍工作室开发的用于生成自定义菜单的工具,具有一键生成各种微信公众账号菜单类型的功能。 微信自定义菜单生成器是 http://www.fangbei.org/tool/menu。
863 0
微信自定义菜单扩容?
在微信公众账号“每日资讯”中,自定义菜单右侧出现了一个箭头图标,这是否意味着微信自定义菜单打算扩展?  
859 0
+关注
578
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载