概念

• JS-SDK: 是微信公众平台向微信网页开发者提供的微信网页开发者工具包, 通过js-sdk我们可以高效的使用微信拍照，选图，语音，位置等手机系统的能力，并且可以使用微信分享，支付等功能
• koa: 主要用来服务器初始化，接口调用已经数据返回
• request：网络请求，对原生http request的封装
• ejs模板: 微信的数据包是基于xml的，所以需要用ejs来把数据替换到xml中
• lodash：常用的方法集，操作数据，类型判断
• Heredoc: 将函数体内的多行注释提取出来
• row-body： 用来获取http请求的可读流的实体的内容
• sha1：项目中用到的hash算法
• xml2js：将微信返回的xml数据转成js对象

公众号

• 种类

  1. 企业号: 为企业活组织提供移动应用入口，帮助企业建立与员工、上下游供应链之间的连接，不适合个人好的开发
  2. 订阅号: 比较适合于个人，小团队，主要是用于信息传播，帮助管理用户以及用户互动，不如写文章，咨询传播，消息定制等等
  3. 服务号:企业和组织，提供更强大的业务服务与用户管理能力，比如支付或者只能接口

• 使用场景
  如果仅仅是写文章，推送给粉丝，直接用订阅号；如果是水果商店，用户支付，上家送货上门，可以用服务号；如果管理全学校所有学院，学生干部上班的考勤，活动进程可以用企业号

• 公众号分为认证和非认证

  1. 认证: 需要有一个开户过的企业，可以以法人身份去折腾开一个小公司，可以去认证一下

• 订阅号和服务号的区别

  1. 出现位置不同
  2. 单月发送消息数量不同，订阅号可以一天1篇，服务号一个月最多4篇
  3. 订阅号没有9大接口和支付功能

• 9大接口

  1. 语音识别: 就是能识别你说的话，并翻译成文本内容
  2. 客服接口: 就是公众号可以在你发送过消息的24小时内，向你回复消息
  3. OAuth 2.0网页授权: 可以通过这个授权接口，请求用户 授权，从而拿到用户更多的信息
  4. 生成带参数二维码: 公众号可以获得一系列携带不同参数的二维码，在用户扫描关注公众号后，公众号可以根据参数分析各二维码的效果，这些参数可以自己定制，从而可以实现更多分析结果，比如用户从哪儿来的
  5. 获取用户地址位置: 公众号能获得用户进入公众号会话时的地理位置。可以做微信导航
  6. 获取用户基本信息: 公众号可以根据加密后的用户OpenId,通过一系列的参数交互，最终拿到用户 基础信息，包括头像、名称、性别、地区
  7. 获取关注者列表: 通过这个接口，可以拿到所有关注者的OpenId, 就知道有多少人关注你,是谁在关注你
  8. 用户分组接口: 通过分组接口，可以在后台为用户移动，创建，修改分组，比如把你们班级你们团队分成，男生一组，女生一组
  9. 上传下载多媒体文件: 通过这个接口，公众号可以在需要时在微信服务器上传下载多媒体文件

内网到外网的映射

• 这里的话，本人是借助开源项目localtunnel在自己的服务器搭建了一个类似于localtunnel将内网映射到外网，供微信调试本地的项目，之所以自己搭建一个这样的服务器，是因为之前用第三方的ngrok,localtunnel有时候不稳定，大家也可以试着自己搭建一个
• 如何使用自己搭建好的通道呢

  lt -h http://xxxx.com --port 80 

ps： 通过上述命令就可以将自己的域名对应的外网ip映射到本地的80端口

申请公众号

• 个人可以申请订阅号，不能申请服务号；如果没有服务号，又想测试服务号的一些接口功能，可以进行一下步骤申请接口测试号
• 网址 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

• 步骤

  
  1.png

2.png 3.png

微信公众平台和微信开发平台的区别

• 微信公众平台是我们常见的公众号，包括企业号、服务号和订阅号；对于技术要求不是太高，给拥有一定运营能力的品牌、商户、组织和个人作为自媒体平台或服务窗口来使用的
• 微信开放平台主要是一个开发者平台，对技术有一定的要求；主要来研发与微信对接的应用

如何接入公众号

• 配置微信公众号后台，以验证我们的公众号服务是否正常

  
  4.png

• 验证公众号

  
  6.jpeg

ps：微信会向我们填写的url发送一个get请求，带有token,timestamp,nonce,signature,echostr几个参数

1. 第一步: 将token、timestamp、nonce三个参数进行字典排序,并连接成一个字符串
   ps: token自己在服务器写死，保持跟微信后台填写的一样；其余两个参数是微信发送的请求带过来的

 let str = [timestamp,nonce,token].sort().join('');

2. 第二步：将排序后的字符串sha1加密

  let sha = sha1(str);

3. 将加密后的字符串与signature对比，如果相同，表示这个请求来源于微信，直接原样返回echostr参数内容，接入验证就成功了

4. 到这里就成为了一个开发者了

这里选择koa框架进行和微信交互

• koa框架更简单，更易懂；对于反复的异步操作更合适

koa项目依赖的库

cnpm install koa -D
cnpm install sha1 -D
cnpm install bluebird -D
cnpm install request -D
cnpm install raw-body -D
cnpm install xml2js -D
cnpm install ejs -D
cnpm install loadash -D
cnpm  install  crypto -D  

微信中接受消息与回复的种类

• 接受消息

  1. 文本消息
  2. 图片消息
  3. 语音消息
  4. 视屏消息
  5. 小视频消息
  6. 地理位置消息
  7. 链接消息

• 回复消息

  1. 回复文本消息
  2. 回复图片消息
  3. 回复语音消息
  4. 回复视屏消息
  5. 回复音乐消息
  6. 回复图文消息

微信操作注意事项

1. 微信公众号接口只支持80端口
2. 微信后台配置的URL是唯一能接受到消息，事件的入口，我们在公众号的所有操作，都是基于这个url进行交互
3. 调用所有微信接口时几乎全部使用https协议
4. 用户向公众号发送消息时，会传递OpenID,该OpenID是用户微信号加密后的值,每个用户在每个公众号中OpenID是唯一的

access_token(票据)

1. 开发者服务器每次请求微信服务器接口时，都需要带着access_token票据
2. access_token每7200s(2个小时)就自动失效，需要重新获取
3. 只要更新了access_token, 之前的票据就不能再使用
4. 让系统每个2个小时自动去刷新一次票据，保证access_token永远都不会失效
5. access_token可以存储在文件里面，或者数据库里面

自动回复的开发步骤

1. 处理post类型的类型的控制逻辑，接受xml的数据包
2. 解析数据包，获取数据包里面的消息类型或者事件类型
3. 拼装定义好的消息
4. 包装成xml的格式
5. 在5s中内返回回去

如何区分不同的消息

• 通过post过来的数据里面的MsgType去判断是哪种事件，比如可以通过判断body.MsgType==='event'来确定是事件消息，再通过body.Event==='subscribe'来确定是否是关注消息事件

微信服务号常见功能开发

1. 上传临时素材之图片和视屏
2. 永久素材接口
3. 用户分组
4. 获取用户私密信息
5. 地理位置和用户资料
6. 菜单
7. 二维码
8. js-sdk

如果公众号不能正常正常服务解决方案

• 有的时候，我们在公众号里面发送一条消息，公众号提示该公众号提供的服务出现故障，请稍后再试，可能是开发在服务器挂了，或者返回的信息不正常; 如果服务器没有挂的话，那可以肯定的是消息返回不是标准的xml，这个时候我们可以借助postman发送请求查看服务器返回的内容是否正常

网页里面调用微信分几步

• 第一步: 绑定域名
• 第二步: 引入js文件
• 第三部: JS SDK初始化

JS SDK 与公众号的区别

• 公众号: 是微信这个原生的应用中，开放的特殊账号；让用户可以通过原生的聊天界面，与公众号互动，其实就是与我们的服务器互动
• 微信的JS SDK: 不是在公众号中直接使用的，是在微信内置的浏览器中使用的

JS SDK的作用

• 封装了很多的全局api,使我们可以在微信内置的浏览器里面调用微信的原生应用，以实现拍照，语音，扫一扫功能

JS SDK提供了哪些功能

1. 基础接口
   • 判断当前微信客户端版本是否支持指定js接口，比如这个网页不是在微信中打开的，我们可以关掉微信相关的功能；也可以让这个网页不可访问，替换成一个二维码让用户来扫描
2. 分享接口
   • 可以自定义分享给好友的内容，比如标题，封面，描述，可以实现每个人分享出去的页面都是不同的
3. 图像接口
   • 通过手机拍照或者相册选图以及预览
4. 音频接口
   • 可以录音，可以播放语音，可以上传和下载语音；
5. 智能接口
   • 提供了文字识别，或者语音识别功能
6. 设备信息
   • 提供了获取当前的网络状况，比如是wifi还是4G,对于像视屏这样的网页，可以选择默认不加载，这样不会消耗用户的流量
7. 摇一摇周边
8. 界面操作
   • 能控制微信浏览器中，右上角的一些按钮的显示隐藏，比如隐藏分享的按钮
9. 微信扫一扫
   • 可以识别二维码和一维码返回一个扫描结果
10. 地址位置

如何调试微信JS SDK的功能

• 可以借助微信官方提供的微信开发者工具
• 下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html