微信网页开发流程

最近接了一个紧急的微信网页开发的需求，由于大部分调用微信api都是在后端处理的，所以前端无感。但整个流程，作为前端也有必要知道的，否则加班除了身体上的透支，岂不是什么收获都没有

授权

对文字没有兴趣的可以直接拖到下面看图

首先获取access_token

申请公众号的流程这里不赘述了，access_token是使用微信接口的凭证，不同类型的公众号有不同接口使用权限。access_token的有效期是7200秒

https请求方式: GET api.weixin.qq.com/cgi-bin/tok…

入参

AppId和secret可以在微信公众号后台看到,grant_type填写client_credential

返回参

正常的状态

{"access_token":"ACCESS_TOKEN","expires_in":7200}

失败的状态

{"errcode":40013,"errmsg":"invalid appid"}

更多错误码说明点击

接着网页授权

第一步获取code

获取code需要用授权。有两种方式，静默授权(用户没有感知)和需要征得用户的同意，微信官方文档特别有提到，有两种以下场景，用户没有感知

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

scope为snsapi_base(静默授权)

open.weixin.qq.com/connect/oau…

scope为snsapi_userinfo(需要征得用户的同意)

open.weixin.qq.com/connect/oau…

第二步通过code换取access_token

这里的获取的access_token是用来调用其他的接口，与基础的access_token不同。

获取code后，请求以下链接获取access_token： api.weixin.qq.com/sns/oauth2/…

返回参

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

第三步刷新token

access_token 的拥有很短的有效期，当access_token失效之后，可以使用refresh_token(30天)刷新，当refresh_token失效之后，需要用户重新授权

获取第二步的refresh_token后，请求以下链接获取access_token： api.weixin.qq.com/sns/oauth2/…

返回参

{ 
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

第四步拉取用户信息（scope为snsapi_userinfo）

http：GET（请使用https协议） api.weixin.qq.com/sns/userinf…

返回参

{   
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ], // 用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

以上值得注意的是：

两个access_token的区别。通过AppId和secret获取的access_token是使用微信接口的凭证，通过code换取的access_token是用来获取用户信息的(scope为snsapi_userInfo)
静默授权只能获取openid，非静默授权需要通过access_token获取用户的更多信息，比如昵称、头像、unionid等
access_token拥有较短的有效期（7200秒），当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天

点击微信的右上角，微信会自己分享，但是有时我们想自定义分享内容，可以通过以下步骤更改

配置js安全域名

引入JSSDK

npm install weixin-js-sdk
import wx  from "weixin-js-sdk"

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

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});

api.weixin.qq.com/cgi-bin/tic…

返回参

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

根据基础支持的access_token获取jsapi_ticket（有效期7200秒）。签名生成规则，由noncestr(随机字符串)，有效的jsapi_ticket，timestamp（时间戳），url，按照字段的ASCII码从小到大进行排序，使用键值对的形式拼接成一个字符串，如

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

我记得小a的ASCII码值是97，依次类推，然后对这个字符串进行SHA-1加密。ok，问题来了，怎么随机生成字符串，sha1加密是什么

怎么生成随机字符

import java.util.Random;

其实后端有各种java类，我这是从网上搜的

SHA-1加密

SHA-1是一种数据加密算法，该算法的思维是接纳一段明文，然后以一种不可逆的方式将它转换成一段（一般更小）密文，也能够简略的理解为取一串输入码（称为预映射或信息），并把它们转化为长度较短、位数固定的输出序列即散列值（也称为信息摘要或信息认证代码）的过程。

wx.ready 处理接口成功

const shareParams = {
       desc: "描述",
       title: "标题",
       link:"分享的url"(一定要是配置的js安全域名一致，否则自定义分享失败)，
       imgUrl: "图片url"(网络url)
   }

wx.ready(function(){
// 发送到微信好友
   wx.updateAppMessageShareData({
         ...shareParams,
         success: function() {},
       });
// 分享到朋友圈
   wx.updateTimelineShareData({
         ...shareParams,
         success: function() {},
       });
     });
})

wx.error 通过error接口处理失败验证

wx.error(function(res){
 // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

判断用户有没有关注公众号

api.weixin.qq.com/cgi-bin/use…

返回参数很多，其中subscribe为0表示没有关注，1表示关注此公众号

在这里有个问题，假设用户没有关注公众号（需求是需要强制关注公众号），如何引导用户去关注公众号的界面，我们的做法是给出公众号的二维码链接，这样似乎有些体验不太好，应该直接强制关注，但是微信没有给出明确的指导。点击这里，主要是获取__biz的值

总结

以上是我做这个微信公众号网页项目使用的微信api和js接口只是冰山一角，还有更多可以查看官网