概念
- JS-SDK: 是微信公众平台向微信网页开发者提供的微信网页开发者工具包, 通过js-sdk我们可以高效的使用微信拍照，选图，语音，位置等手机系统的能力，并且可以使用微信分享，支付等功能
- koa: 主要用来服务器初始化，接口调用已经数据返回
- request：网络请求，对原生http request的封装
- ejs模板: 微信的数据包是基于xml的，所以需要用ejs来把数据替换到xml中
- lodash：常用的方法集，操作数据，类型判断
- Heredoc: 将函数体内的多行注释提取出来
- row-body： 用来获取http请求的可读流的实体的内容
- sha1：项目中用到的hash算法
- xml2js：将微信返回的xml数据转成js对象
公众号
-
种类
- 企业号: 为企业活组织提供移动应用入口，帮助企业建立与员工、上下游供应链之间的连接，不适合个人好的开发
- 订阅号: 比较适合于个人，小团队，主要是用于信息传播，帮助管理用户以及用户互动，不如写文章，咨询传播，消息定制等等
- 服务号:企业和组织，提供更强大的业务服务与用户管理能力，比如支付或者只能接口
-
使用场景
如果仅仅是写文章，推送给粉丝，直接用订阅号；如果是水果商店，用户支付，上家送货上门，可以用服务号；如果管理全学校所有学院，学生干部上班的考勤，活动进程可以用企业号 -
公众号分为认证和非认证
- 认证: 需要有一个开户过的企业，可以以法人身份去折腾开一个小公司，可以去认证一下
-
订阅号和服务号的区别
- 出现位置不同
- 单月发送消息数量不同，订阅号可以一天1篇，服务号一个月最多4篇
- 订阅号没有9大接口和支付功能
-
9大接口
- 语音识别: 就是能识别你说的话，并翻译成文本内容
- 客服接口: 就是公众号可以在你发送过消息的24小时内，向你回复消息
- OAuth 2.0网页授权: 可以通过这个授权接口，请求用户 授权，从而拿到用户更多的信息
- 生成带参数二维码: 公众号可以获得一系列携带不同参数的二维码，在用户扫描关注公众号后，公众号可以根据参数分析各二维码的效果，这些参数可以自己定制，从而可以实现更多分析结果，比如用户从哪儿来的
- 获取用户地址位置: 公众号能获得用户进入公众号会话时的地理位置。可以做微信导航
- 获取用户基本信息: 公众号可以根据加密后的用户OpenId,通过一系列的参数交互，最终拿到用户 基础信息，包括头像、名称、性别、地区
- 获取关注者列表: 通过这个接口，可以拿到所有关注者的OpenId, 就知道有多少人关注你,是谁在关注你
- 用户分组接口: 通过分组接口，可以在后台为用户移动，创建，修改分组，比如把你们班级你们团队分成，男生一组，女生一组
- 上传下载多媒体文件: 通过这个接口，公众号可以在需要时在微信服务器上传下载多媒体文件
内网到外网的映射
- 这里的话，本人是借助开源项目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几个参数
- 第一步: 将token、timestamp、nonce三个参数进行字典排序,并连接成一个字符串
ps: token自己在服务器写死，保持跟微信后台填写的一样；其余两个参数是微信发送的请求带过来的
let str = [timestamp,nonce,token].sort().join('');
- 第二步：将排序后的字符串sha1加密
let sha = sha1(str);
-
将加密后的字符串与signature对比，如果相同，表示这个请求来源于微信，直接原样返回echostr参数内容，接入验证就成功了
-
到这里就成为了一个开发者了
这里选择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
微信中接受消息与回复的种类
-
接受消息
- 文本消息
- 图片消息
- 语音消息
- 视屏消息
- 小视频消息
- 地理位置消息
- 链接消息
-
回复消息
- 回复文本消息
- 回复图片消息
- 回复语音消息
- 回复视屏消息
- 回复音乐消息
- 回复图文消息
微信操作注意事项
- 微信公众号接口只支持80端口
- 微信后台配置的URL是唯一能接受到消息，事件的入口，我们在公众号的所有操作，都是基于这个url进行交互
- 调用所有微信接口时几乎全部使用https协议
- 用户向公众号发送消息时，会传递OpenID,该OpenID是用户微信号加密后的值,每个用户在每个公众号中OpenID是唯一的
access_token(票据)
- 开发者服务器每次请求微信服务器接口时，都需要带着access_token票据
- access_token每
7200s(2个小时)就自动失效，需要重新获取 - 只要更新了access_token, 之前的票据就不能再使用
- 让系统每个2个小时自动去刷新一次票据，保证access_token永远都不会失效
- access_token可以存储在文件里面，或者数据库里面
自动回复的开发步骤
- 处理post类型的类型的控制逻辑，接受xml的数据包
- 解析数据包，获取数据包里面的消息类型或者事件类型
- 拼装定义好的消息
- 包装成xml的格式
- 在5s中内返回回去
如何区分不同的消息
- 通过post过来的数据里面的MsgType去判断是哪种事件，比如可以通过判断
body.MsgType==='event'来确定是事件消息，再通过body.Event==='subscribe'来确定是否是关注消息事件
微信服务号常见功能开发
- 上传临时素材之图片和视屏
- 永久素材接口
- 用户分组
- 获取用户私密信息
- 地理位置和用户资料
- 菜单
- 二维码
- js-sdk
如果公众号不能正常正常服务解决方案
- 有的时候，我们在公众号里面发送一条消息，公众号提示
该公众号提供的服务出现故障，请稍后再试，可能是开发在服务器挂了，或者返回的信息不正常; 如果服务器没有挂的话，那可以肯定的是消息返回不是标准的xml，这个时候我们可以借助postman发送请求查看服务器返回的内容是否正常
网页里面调用微信分几步
- 第一步: 绑定域名
- 第二步: 引入js文件
- 第三部: JS SDK初始化
JS SDK 与公众号的区别
- 公众号: 是微信这个原生的应用中，开放的特殊账号；让用户可以通过原生的聊天界面，与公众号互动，其实就是与我们的服务器互动
- 微信的JS SDK: 不是在公众号中直接使用的，是在微信内置的浏览器中使用的
JS SDK的作用
- 封装了很多的全局api,使我们可以在微信内置的浏览器里面调用微信的原生应用，以实现拍照，语音，扫一扫功能
JS SDK提供了哪些功能
- 基础接口
- 判断当前微信客户端版本是否支持指定js接口，比如这个网页不是在微信中打开的，我们可以关掉微信相关的功能；也可以让这个网页不可访问，替换成一个二维码让用户来扫描
- 分享接口
- 可以自定义分享给好友的内容，比如标题，封面，描述，可以实现每个人分享出去的页面都是不同的
- 图像接口
- 通过手机拍照或者相册选图以及预览
- 音频接口
- 可以录音，可以播放语音，可以上传和下载语音；
- 智能接口
- 提供了文字识别，或者语音识别功能
- 设备信息
- 提供了获取当前的网络状况，比如是wifi还是4G,对于像视屏这样的网页，可以选择默认不加载，这样不会消耗用户的流量
- 摇一摇周边
- 界面操作
- 能控制微信浏览器中，右上角的一些按钮的显示隐藏，比如隐藏分享的按钮
- 微信扫一扫
- 可以识别二维码和一维码返回一个扫描结果
- 地址位置
如何调试微信JS SDK的功能
- 可以借助微信官方提供的微信开发者工具
- 下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
网友评论