微信开发零基础学习路线.md

一、基础知识介绍
二、公众号接口调用
三、微信H5开发（混合开发）
四、微信小程序开发（mpvue）
五、开发工具及资源推荐

## 学习目的
1. 了解微信公众号相关知识；
2. 如何对接公众平台及调用相关接口？
3. 如何调用微信授权登录？
4. 如何调用微信JSSDK？
5. 如何开发一款微信小程序？
6. 了解公司微信网关（企业号/服务号）的接入；

一、基础知识介绍

1. 微信公众平台发展历程

2017年12月28日，微信在新版本中正式上线了小游戏，一款《跳一跳》引发了从业者的狂欢。

2017年6月20日，订阅号全新改版，列表改为信息流方式呈现，改善阅读体验。

以下是2017年整理的发展历程，突然感觉一年多了，好像没出什么新东西。

2. 公众号介绍

首先需要在微信官方网站注册微信公众账号。微信公众账号分为订阅号、服务号、企业号（目前独立为企业微信）、小程序，开发者针对不同账号类型开发，需要了解相应的开发技巧。

3. 订阅号、服务号和企业号区别

微信认证

微信认证后，获得更丰富的高级接口，向用户提供更有价值的个性化服务。
微信认证后，用户将在微信中看到微信认证特有的标识。

高级接口能力：

语音识别接口
客服接口(48小时内有效)
OAuth2.0 网页授权接口
生成带参数的二维码接口
获取用户地理位置接口
获取用户基本信息接口
获取关注者列表接口
用户分组接口
上传下载多媒体文件接口
群发接口(每人每月只能接收4条)
模板接口

4. 微信公众平台

网址：http://mp.weixin.qq.com ，提供了两种方式管理公众号，分别是编辑模式和开发模式。

编辑模式

在编辑模式下，管理员可登录微信公众平台对公众号进行简单的配置，实现自动回复和底部自定义菜单功能；

开发模式

启用开发者模式后，用户可通过公众号与我们的系统实时交互，开发者也可以调用公众号丰富的接口，实现个性化功能，多用于服务号和企业号，比如厦门航空号，可为旅客提供实时的航班动态查询、航班变动提醒、智能客服等；招行信用卡号可实时提醒交易情况、进行帐单查询、分期、还款等操作；

二、公众号接口调用

公众号开发者社区：https://developers.weixin.qq.com/
测试公众号申请：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 订阅号、服务号接口文档：https://mp.weixin.qq.com/wiki
订阅号、服务号在线接口调试：https://mp.weixin.qq.com/debug
企业号接口文档：http://qydev.weixin.qq.com/wiki
企业号在线接口调试：http://qydev.weixin.qq.com/debug
企业微信：https://work.weixin.qq.com/

开发者注意事项

无认证公众号，可通过测试号申请系统，快速申请一个测试号，立即开发。
公众平台以access_token为接口调用凭据，来调用接口，所有接口的调用需要先获取access_token，access_token在2小时内有效，过期需要重新获取，但1天内获取次数有限，开发者需自行存储。
公众平台接口调用仅支持80端口。

开发者模式接入指南

第一步：填写服务器配置

第二步：验证服务器地址有效性

经第一步提交后，微信服务器将发送GET请求到填写的服务器地址URL上，GET请求携带参数如下表所示：

开发者通过检验signature对请求进行校验。若确认此次GET请求来自微信服务器，请原样返回echostr参数内容，则接入生效，成为开发者成功，否则接入失败。

校验方式：

1）将token、timestamp、nonce三个参数进行字典序排序
2）将三个参数字符串拼接成一个字符串进行sha1加密
3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信

第三步：依据接口文档实现业务逻辑

经第二步服务器配置验证通过之后，用户每次向公众号发送消息、或者产生自定义菜单、或产生微信支付订单等情况时，开发者填写的服务器配置URL将得到微信服务器推送过来的消息和事件，开发者可以依据自身业务逻辑进行响应，如回复消息。

微信响应消息类型：

普通消息：文本消息、图文消息、图片消息、语音消息、视频消息、小视频消息、地理位置消息、链接消息；
事件推送：取关事件、扫码事件、上报地理位置事件、菜单点击事件（拉取消息、页面跳转、扫码、拍照或相册、选择地理位置）；
其它消息：群发消息（文本、图文、图片、语音、视频等）、客服消息、模板消息；

第三方开源微信SDK包推荐

SENPARC.WEIXIN SDK
目前 Senparc.Weixin 已经支持几乎所有微信平台模块和接口，并同时支持 .NET 3.5 / 4.0 / 4.5 / .NET Core 2.0 / .NET Core 2.1 多种框架。
Senparc.Weixin SDK 是目前使用率最高的微信 .NET SDK，也是国内最受欢迎的 .NET 开源项目之一。
WEIXIN-JAVA-TOOLS
全能微信Java开发工具包，支持包括微信支付、开放平台、小程序、企业号和公众号等的开发。

三、微信H5开发（混合开发）

不管你信不信，现在说到H5开发，基本上等同于微信H5开发了，微信里H5的使用，属于单入口，它不像pc，有多标签、多窗口，因此特别适合单页面应用，体验效果好很多。

说这么多，我就是想推荐Vue单页面应用。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

开源UI库推荐

微信网页授权登录

互联网产品运营总是希望能够积累自己的用户数据，会要求用户进行注册（填写相关资料）、登录，其实没有站到用户的角度考虑。

作为用户每天接触到很多产品，每个都要注册是很麻烦的，我就很反感，这个产品我可能就用一次也要注册填写资料，设置密码，有些密码强度还不一样，密码还会忘记，一系列问题。

网站支持第三方授权登录（如微博登录、QQ登录、微信登录等）对用户来说，会方便许多，现如今哪个人没有微博或者微信，一个帐号走天下，再也不用记那么多密码了。

集成微信网页授权登录，需要在公众平台上配置授权回调域名（接口权限 – 网页授权修改 – 设置授权域），授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权。

JSSDK调用

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，可对H5应用附能，拥有原生的能力，如拍照、选图、语音、地理位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

1. 配置JS接口安全域名

为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。

以上说明当前页面的域名必须加入对应公众号的JS安全域，调用JSSDK方能成功。

JS接口安全域名配置，每个公众号可添加三个域名，添加后该域名下的页面才可以调用JSSDK接口。

2. 使用步骤

步骤一：绑定域名，如weixin.xiamenair.com
步骤二：引入JS文件
步骤三：通过config接口注入权限验证配置
步骤四：通过ready接口处理成功验证
步骤五：通过error接口处理失败验证

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> // 引入官方js
<script>
    wx.config({
        debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function() {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        
        //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline({
            title: shareConfig.title, // 分享标题
            link: shareConfig.link, // 分享链接
            imgUrl: shareConfig.imgUrl, // 分享图标
            success: function(res) {
                // 用户确认分享后执行的回调函数
            },
            cancel: function(res) {
                // 用户取消分享后执行的回调函数
            }
        });
    });
    wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
</script>

官方JSSDK体验页面
微信扫一扫 - 官方JSSDK体验页面

H5真机联调

iOS中web app调试(mac)
spy-debugger，适合Android/iOS
Ngrok实现内网穿透
Ngrok是国外开源的tunnel工具，实现内网穿透，将本地服务通过公共端口与外部建立安全通道，使外网可以直接访问本地服务。
Fiddler代理抓包工具（Charles）
能够记录客户端和服务器之间的所有 HTTP请求，可以针对特定的HTTP请求，分析请求数据、设置断点、调试web应用、修改请求的数据，甚至可以修改服务器返回的数据，功能非常强大，是web调试的利器。

四、微信小程序开发（mpvue）

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念。

应用将无处不在，随时可用，但又无需安装卸载。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构，主要是增强 WXML标签的表达能力。

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

以上做为了解即可，这里主要推荐使用mpvue开发微信小程序，对于熟悉Vue的朋友可以零基础上手小程序开发。

mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

云服务商推荐

小程序开发，要求域名要备案，并且要配置ssl证书，怕麻烦的可以直接使用小程序云产商，以下是个人用过的，都不错，特别是提供的云函数，挺好用的。

五、开发工具及资源推荐

微信web开发者工具(官方)
Sublime Text
Egret Wing
Fiddler\Charles(抓包工具)
Ngrok\FRP\花生壳(内网穿透工具)
Postman