参考:
微信分享实现
微信现在是众多公司营销的重点。遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少。而官方的分享卡片,是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个,供初次接触微信开发的前端参考。(其实也蛮详细的了,不过有些地方官方没忽略了,容易给新人造成坑)
必要的前提准备
PS:本文的方法只适合6.0.2.58
以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:
- 微信认证过的公共号
必须是认证过的,未认证或者认证过期都不行
- 一个域名
需要备案过的
- 一台服务器
因为前端页面需要的
appId
、signature
是需要后台传递过来的。官方默认后台程序有PHP
、Python
、Node
、Java
版本,不过我这里以PHP
作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)
配置过程
1. 绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)
2. 获取access_token
这部分工作属于后台开发,主要功能是利用公共号APPID
、APPSECRET
从微信服务器获取对应的access_token
。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP
为例)。
- 将下载得到的压缩包解压后复制
php
文件夹到网站根目录,然后将需要分享出去的html文件的后缀名改为.php
(必须。因为后台不完善所以不能直接ajax获得access_token
的值,这里假设需要分享的html页面是index.php
) - 打开
index.php
,在html的DOCTYPE
声明之前添加一段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> |
-
通过config接口注入权限验证配置