登录微信公众号后台
一个邮箱只能注册一个公众号、服务号或小程序中的一种
后台的登陆方式是公众号注册邮箱 + 密码 + 微信扫码验证
微信账户必须有管理员权限才能进入。
微信公众号网页开发基本流程
下载微信开发者工具
打开微信开发者工具，选择公众号网页。
访问页面进行调试网页调试和开发。
获取用户信息操作流程
去微信公众号后台为开发者微信号配置开发者权限
去微信公众号后台配置网页授权域名
按照文档流程调用接口获取用户信息。
在微信公众号或者微信开发者工具中进行调试。
微信域名配置
如果需要完整的使用微信公众号的所有功能，需要进行域名配置。配置项在微信公众号后台，一共有三个域名配置：
业务域名 —— 设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。用户在该域名上进行输入时，不出现下图所示的安全提示。
JS 接口安全域名 —— 配置后可以调用微信公众号的 JS-SDK 相关接口。
网页授权域名 —— 配置后可获取用户信息的授权。
而配置这些域名首先必须要将验证文件访问域名根目录下。我的做法是使用CopyPlugin来实现：
// webpack.confignewCopyPlugin([ {from: path.resolve(__dirname,'../yanzheng.txt'),to: path.resolve(__dirname,'../dist') }, {from: path.resolve(__dirname,'../yanzheng.txt'),to: path.resolve(__dirname,'../dist') }, ])
微信授权前后端交互方案
微信的两种获取用户信息授权方式：snsapi_base和snsapi_userinfo。前者只是获取用户 OpenID，而后者获取所有的用户信息（需要哦用户手动授权）。
店东贷项目暂时无需获取用户其他信息，所以用的是snsapi_base
具体网页授权的步骤微信文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842说的是一样的：
在微信公众号网页环境下访问拼接的微信授权 URL，如：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
由于选择的是snsapi_base所以微信公众号会进行静默获取用户信息，通过授权的话会返回一个带了参数的redirect_uri，没有通过授权则会弹窗报错（具体报错看文档）。
在redirect_uri中存在一个参数 code，通过 code 调用微信的接口请求获取access_token同时也获取到了用户的 OpenID
而在xxx项目中，我们先后用了两种方案：
第一种是在登录页调用后端接口获取微信授权 URL，然后重定向到授权 URL 进行授权。授权完成后将用户 OpenID 存在 cookie 中。这样每次进入公众号网页就都存有用户信息了。
登录页 -> 微信授权页 -> 带 code 的登录页 -> 用 code 查询 OpenID -> OpenID 存入 cooke
但是需求有一条是当用户换了手机登录微信，也要能直接静默登录。
所以，用户授权的最终方案是：直接在微信公众号后台配置拼接好的授权 URL，如：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=123&redirect_uri=链接&response_type=code&scope=snsapi_base&state=123#wechat_redirect
这样在点击微信公众号菜单项直接访问了用户信息授权行为。
微信公众号菜单入口 -> 微信授权页 -> 带 code 的空白页 -> 用 code 查询 OpenID -> OpenID 存入 localStorage -> relpace 到目标页
解决用户授权返回死循环
当使用方案一进行获取用户信息的时候，会遇到返回上一页立即授权跳转到当前页的死循环。
最后的解决方案是：将获取到的 code 存在 sessionStorage 中（退出 H5 失效），在返回的时候调用微信的退出接口退出页面。
wx.closeWindow()
注：这是微信 JS-SDK 的一个接口 这个接口不需要进行安全验证。
IOS 软键盘将页面顶上去的问题
查了网上的资料后发现是 IOS 下微信公众号网页被虚拟键盘把界面顶上去了，当虚拟键盘消失时没有返回原样。
解决方案是在 input 和 textarea 失去焦点的时候主动将页面滑动到正确位置：
functionIOSKeyboardFixer(){if(appApi.isIos) {document.body && (document.body.scrollTop =document.body.scrollTop) } }
{ util.IOSKeyboardFixer() }} />
微信缓存解决方法
先是试着添加了缓存 mata 标签，但是在 IOS 中还是有缓存。
本来想着自己加了 hash 应该没问题，发现index.js是没有加 hash 的。这就导致index.js文件报找不到如1.[hash].js文件的错误（因为重新打包部署 hash 变了）。
最后在index.js中也加上 hash 就好了。
output: {filename:'js/[name].[hash:8].js',chunkFilename:'js/[name].[chunkhash:8].js',libraryTarget:'umd'},
微信 JS-SDK 的使用方法
暂时没有用到 JS-SDK 的功能。这里简单说下使用步骤：
签名算法
在使用 JS-SDK 前需要调用 wx.config 方法进行配置，对于 SPA 单页应用而言我们需要在页面路由跳转后都执行一次 config 方法。
使用 config 方法接入微信 JS-SDK 的详情看见文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。简单说下步骤：
在微信公众号后台绑定域名
引入 JS 文件，可以使用 npm 安装
通过 config 接口注入权限验证配置（难点）
通过 ready 接口处理成功验证。
通过 error 接口处理失败验证。
最麻烦的在于第 3 步，看下 config 接口的配置内容：
wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'',//必填，公众号的唯一标识timestamp: ,//必填，生成签名的时间戳（填写当前时间毫秒字符串）nonceStr:'',//必填，生成签名的随机串（使用Math.random()随机生成字符串）signature:'',//必填，签名（使用sha1算法生成的签名字符串）（sha1算法可以使用jsSHA来生成）jsApiList: []//必填，需要使用的JS接口列表（需要什么接口就写什么接口）});
其中 debug 是判断是否要开始调试模式； appId 就是微信公众号的 AppID 了；timestamp 就是时间戳，填入当前毫秒就好；noncestr 是一个随机字符串，可以使用 random 函数来实现；signature 则是根据 timestamp 和 noncestr 通过 SHA1 算法生成的哈希签名字符串；jsApiList 用于限定开发者要用到的 JS API。
这里 sha1 算法可以用jsSHA来实现。
配置完成后，就可以调用微信接口实现业务需求了：
wx.ready(function(){//需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({title:'',//分享标题desc:'',//分享描述link:'',//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:'',//分享图标success:function(){//设置成功} })});
具体的 JS-SDK 接入实践可以看下https://www.jianshu.com/p/740dc1e387cd一文，是用 JS 来实现的。
配置坑
配置的时候遇到了一个坑 —— 生产环境下配置网页授权总是报错，必须要在测试环境上配置生产环境的域名才可以访问生产环境。
结果发现是后端在生产环境上配了测试环境的东西。
其他
一开始接触微信开发，最好能够拿到微信公众平台的后台管理系统权限。进去看看配置内容对于理解微信公众号开发很重要。
腾讯的文档真的是坑，需要反复阅读和理解。
微信公众号的配置并不是像开发文档上那样都是用 python 后端写的，其实是可以直接用微信公众号后台来管理。不要被迷惑了~
微信公众平台可以为开发者配置开发权限，用于在微信网页开发工具上开发调试。也可以配置运维权限，用于登陆到后台管理系统去维护公众号相关配置。
的方式来登陆到微信公众平台后台管理系统。（如果没有配管理员权限是无法进入后台管理系统的）
微信公众平台的文档一大堆，前端同学需要认真了解的就是微信网页开发部分的内容。
微信公众号 H5 开发会遇到坑的地方
微信浏览器的兼容性
微信获取用户信息授权
微信 JS-SDK 的配置和使用
微信公众号后台配置和安全验证
微信缓存问题
在微信分享和微信支付
