微信公众号开发记录

基础知识

理清公众号配置的域名

业务域名
设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。
网页授权域名
指用户同意授权后，微信会把回调信息传到该域名下的某地址（code值）。
JS接口安全域名
该域名下请求的地址能使用微信的js接口。

比较网页授权中的access_token和基础支持中的access_token

开发文档提到网页授权中的access_token和基础支持中的access_token不同，但是具体有哪些不同，并没有说清楚。

网页授权中的access_token，时间很短，最好是每次都重新获取；
网页授权中的access_token，不能复用；
网页授权中的access_token，调用次数不限。

梳理微信认证流程（简称三次握手）

用户同意授权，获取code；
通过code换取网页授权access_token，用户openId等信息；
通过access_token和用户的openId获取该用户的用户信息。

调整公众号SSL安全策略

微信团队发布重要安全策略调整，将关闭掉SSLv2、SSLv3版本支持，不再支持部分使用SSLv2、SSLv3或更低版本的客户端调用。
在PHP代码中增加一句：curl_setopt($ch, CURLOPT_SSLVERSION, 1);

HTTPS协议＝ HTTP + SSL/TLS
TLS ＝ SSL升级版
SSL：协议是HTTP的补充，使用加密等方法让HTTP更安全，版本为1、2、3。
TLS：基于SSL v3的升级版协议，目前版本发展为1.0、1.1、1.2、1.3。
目前，应用最广泛的是TLS 1.0，接下来是SSL 3.0。

https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1414562353&version=11&lang=zh_CN

JSSDK

Sea.js与JSSDK的不兼容

问题：require('jweixin-1.0.0') 报错 wx is not undefined
解决：将微信 JSSDK 挪到 sea.js 之前，就正常了。查看 jwexin-1.0.0.js 源码发现，如果有了 define() 这个全局方法，微信 JSSDK 是当做 require() 的结果返回，不再生成 window.wx 这个对象。
以下文章指出改用 seajs.use()，但其实这并不符合规范，use 理论上只用于加载启动，不应该出现在 define 中的模块代码里。在模块代码里需要异步加载其他模块时，推荐使用 require.async 方法。

1
2
3

require.async('http://res.wx.qq.com/open/js/jweixin-1.0.0.js',function(wx){
    ....
});

http://www.jianshu.com/p/4700de120d53

微信自定义分享

JSSDK自定义分享：页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
移动端页面分享到微信的方案：http://feizhaojun.com/?p=761

录音功能

要考虑误操作导致录音无效的场景（如：反复点击、误触摸）。
https://www.cnblogs.com/liujunyang/p/4962423.html

功能实现

公众号推送单图文跳转外部链接

2014年11月底前的开通微信支付的公众号，有商品消息功能，可以实现该需求。
http://www.henkuai.com/thread-7990-1-1.html
另外参考使用以下方法：

群发
客服接口
关注时回复（被动回复图文消息）
https://www.zhihu.com/question/22032291

点开文章查看答案的效果

利用动画完成：
http://www.songshuyule.com/wenzhang/BJaBQd

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微信推文效果-点开全文显示动画</title>
	<style>
        .outer{
            border: 0 none;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .inner1{
            line-height: 1.75em;
            text-align: center;
            white-space: normal;
        }
        .inner1 span{
            color: #A5A5A5;
            font-size: 12px;
        }
        .inner2{
            height: 180px;
            overflow-x: hidden;
            overflow-y: auto;
            text-align: center;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid rgb(238, 238, 238);
        }
        .inner2_top{
            border: 0 none;
            box-sizing: border-box;
        }
        .inner2_top p{
            margin-bottom: 10px;
            white-space: normal;
            color: rgb(127, 127, 127);
            font-size: 14px;
        }
        .inner2_bottom{
            box-sizing: border-box;
        }
        .inner2_bottom svg{
            margin-top: -180px;
            box-sizing: border-box;
            transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
            -moz-transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -o-transform: rotateZ(0deg);
        }
        .inner2_bottom svg rect{
            fill: rgb(255, 255, 255);
            box-sizing: border-box;
        }
        .inner2_bottom svg rect animate{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="outer">
    <p class="inner1">
        <span>点击下方空白区域查看答案</span>
    </p>
    <div class="inner2">
        <div class="inner2_top">
            <p>如果觉得还不错</p>
            <p>点个赞再走呗</p>
            <p>嘿嘿</p>
        </div>
        <div class="inner2_bottom">
            <svg height="200" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect height="200" width="100%">
                    <animate attributeName="opacity" begin="click" dur="6s" fill="freeze" from="1" to="0"></animate>
                </rect>
            </svg>
        </div>
    </div>
</div>
</body>
</html>

可以查看HTML源码的编辑器
i排版：http://ipaiban.com/bianji.jsp

查看公众号历史消息功能的链接

点开现有的历史消息功能，复制链接就好了…………就是这么简单。

使用细节

公众号手机端实时阅读数与后台图文分析的数据有较大出入

咨询过客服，原因有以下：

统计时间差
阅读来源不同
数据过滤规则不一致

公众平台-用户管理-搜索

最新关注的用户无法在搜索框搜到，猜测是搜索列表有缓存（网上说是两天），旧的用户可以在列表中搜索得到。

微信群自动回复等机器人实现

使用了第三方软件，即往群里投机器人，设置好规则后他会自动发言。
自我理解：软件拿到我们的微信账号，替我们发言。因为我们不能在机器人上线期间同时上线，否则机器人会掉线。

开发细节

页面缓存

在资源路径的URL添加参数
借助gulp自动添加
Android微信的缓存清理：http://debugx5.qq.com/

过期的临时二维码

过期后，临时二维码将直接无法扫出东西。

微信二维码的识别原理

长按识别二维码，会先立刻截屏，启动二维码识别算法。
https://mp.weixin.qq.com/s?__biz=NzA3OTQ2OTgw&mid=205918916&idx=1&sn=d729ef70ea1e7fc50e649352a63a2564&scene=1&key=c76941211a49ab586ba4831f2f6fa42fbb2525460003fa8e19bc205b9b25facbf60da78977da071ddbc41a5be6a7b9fa&ascene=0&uin=NTE3ODg0NjE1&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.10.3%20build%2814D136%29&version=11020012&pass_ticket=WPa8XnvIzBrBOA6RHy2RMECcrsuN2QiksK8Y1Z/D3Odk49uIsXOex7EV2NXN9m5X

接口细节

客服功能

注意点：用户被客服接入以后，客服关闭会话以前，处于会话过程中时，用户发送的消息均会被直接转发至客服系统。当会话超过30分钟，则会自动关闭客服功能，所有消息回到我们服务器上来接收。

消息管理

被动回复

回复图文消息
图片：url，即可以使用跳链
回复图片消息
图片：media_id

素材管理

选择的图片位置必须为本地图片，不能使用在线URL。

消息管理

群发消息
上传图文所需的缩略图素材：用的是临时素材的media_id，type=image（据说thumb_media_id也行，type=thumb）。

批量分组打标签

当其中一个 openid 无效时，报错40003，其他 openid 不能正常完成；
当其中一个 openid 未关注关注公众号时，未报错，其他 openid 正常完成；
当其中一个 openid 已存在该标签时，未报错，其他 openid 正常完成。

小程序

消息的接收和发送

使用发送客服消息接口进行回复消息，而不是公众号的发送被动响应消息，它没有被动消息模式，除了转入网页版微信客服系统。

客服消息

图文：thumb_url 是在线 URL 就行，无需 meadia 的获取。