NXT-FE / blog

能效通前端团队博客
MIT License
4 stars 0 forks source link

微信开发入门 #13

Open liuxinqiong opened 6 years ago

liuxinqiong commented 6 years ago

开发准备

着重声明

  1. 如果直接在微信官方公众号中配置自己的回调服务器,会导致微信官方提供的运营功能失效,比如自定义菜单等,那么两者能够兼得的吗?现在看来答案是可以的,可以去微信开放平台开发第三方平台,然后通过公众号授权的方式,这样微信的回调同样会被转发到自己服务器,同时还不影响微信运营。
  2. 对于用缓存的需要更新的共享资源需要注意多线程的并发问题,比如 access_token,ticket 等,需要加锁保证安全,否则在高并发的情况下,极有可能出现问题。

入门储备

安全性

由于公众号的 secret 和获取到的 access_token 安全级别都非常高,必须只保存在服务器,不允许传给客户端。后续刷新 access_token、通过 access_token 获取用户信息等步骤,也必须从服务器发起

用户识别

为了识别用户,每个用户针对每个公众号会产生一个安全的 OpenID,如果需要在多公众号、移动应用之间做用户共通,则需前往微信开放平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的 OpenID,但他对所有这些同一开放平台账号下的公众号和应用,只有一个 UnionID,可以在用户管理-获取用户基本信息(UnionID 机制)文档了解详情。

微信服务

微信公众号能提供哪些服务呢?这是了解微信公众号能帮助我们做什么的关键!

Token 区别

这是重点,个人觉得弄清楚了这个,微信开发也就算入门了,需要什么功能直接查阅文档调用 API 即可,Token 是调试接口的凭证。

之前一直搞不懂网页授权和基础授权的区别,容易弄混,今日重新看微信公众号的 WIKI,思路清晰多了!

  1. 验证开发者服务器 token
  1. 网页授权 access_token
  1. 基础授权 access_token

基本开发

微信网页授权

如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

两种 scope 的区别

  1. 以 snsapi_base 为 scope 发起的网页授权,是用来获取进入页面的用户的 openid 的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
  2. 以 snsapi_userinfo 为 scope 发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

静默授权

  1. 对于以 snsapi_base 为 scope 的网页授权,就静默授权的,用户无感知;
  2. 对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是 scope 为 snsapi_userinfo,也是静默授权,用户无感知。

网页授权步骤

  1. 引导用户进入授权页面同意授权,获取 code
  2. 通过 code 换取网页授权 access_token(与基础支持中的 access_token 不同)
  3. 如果需要,开发者可以刷新网页授权 access_token,避免过期
  4. 通过网页授权 access_token 和 openid 获取用户基本信息(支持 UnionID 机制)

JS-SDK

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

通过使用微信 JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

使用步骤:

  1. 后台绑定域名,填写 JS 接口安全域名

  2. 引入 JS 文件

  3. 通过 config 接口注入权限验证配置

  4. 所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用(同一个 url 仅需调用一次,对于变化 url 的 SPA 的 web app 可在每次 url 变化时进行调用)

  5. 通过 ready 接口处理成功验证

    • config 信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,config 是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中。
  6. 通过 error 接口处理失败验证

接口调用说明

所有接口通过 wx 对象(也可使用 jWeixin 对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

  1. success:接口调用成功时执行的回调函数。
  2. fail:接口调用失败时执行的回调函数。
  3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
  4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的 api 才会用到。
  5. trigger: 监听 Menu 中的按钮点击时触发的方法,该方法仅支持 Menu 中的相关接口。

JS-SDK 使用权限签名算法

  1. 生成签名之前必须先了解一下 jsapi_ticket,jsapi_ticket 是公众号用于调用微信 JS 接口的临时票据。正常情况下,jsapi_ticket 的有效期为 7200 秒,通过 access_token 来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket
  2. 签名生成规则如下:参与签名的字段包括 noncestr(随机字符串), 有效的 jsapi_ticket, timestamp(时间戳), url(当前网页的 URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII码从小到大排序(字典序)后,使用 URL 键值对的格式(即 key1=value1&key2=value2…)拼接成字符串 string1。这里需要注意的是所有参数名均为小写字符。对 string1 作 sha1 加密,字段名和字段值都采用原始值,不进行 URL 转义。
  3. 注意事项
  4. 签名用的 noncestr 和 timestamp 必须与 wx.config 中的 nonceStr 和 timestamp 相同。
  5. 签名用的 url 必须是调用 JS 接口页面的完整 URL。
  6. 出于安全考虑,开发者必须在服务器端实现签名的逻辑。

更多 JS-SDK 能实现的功能:JS-SDK

深入开发

在这里不做深入记录,有开发需要时自行查阅。

  1. 自定义菜单
  2. 消息关系
  3. 素材管理
  4. 用户管理
  5. 账号管理
  6. 数据统计
  7. 微信卡券
  8. 微信门店
  9. 微信小店
  10. 微信设备
  11. 微信摇一摇
  12. ...

看 wiki 真的是索然无味的,很多功能也比较高级,当项目中有需求的时候再去看文档学习!

辅助工具

一些通用工具函数

判断微信端

function is_weixin() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
}

设置微信标题

笔者多次尝试,发现在 android 和 ios 上,常用的设置标题的方式会有问题,不是 android 无效就是 ios 无效,下面是来自网络的通用设置方式,亲测有效。

.factory('Title', function () {
      // 原生触发
      return {
          changeTitle: function (title) {
              var body = document.getElementsByTagName('body')[0];
              document.title = title;
              var iframe = document.createElement("iframe");
              iframe.setAttribute("src", "/img/favicon.ico");
              function listener() {
                  setTimeout(function () {
                      iframe.removeEventListener('load', listener);
                      document.body.removeChild(iframe);
                  }, 0);
              }
              iframe.addEventListener('load', listener);
              document.body.appendChild(iframe);
          }
      }
})

缓存问题

由于微信会缓存静态文件,导致代码更新时不能及时反应过来,通过给文件添加版本号或者时间戳的方式来消除影响。