登录微信公众号后台

一个邮箱只能注册一个公众号、服务号或小程序中的一种。
进入微信公众平台后台的登陆方式是 公众号注册邮箱 + 密码 + 微信扫码验证
微信账户必须有管理员权限才能进入微信公众平台后台管理系统。

微信公众号网页开发基本流程

下载微信开发者工具
打开微信开发者工具，选择公众号网页。
输入 URL 访问页面进行调试网页调试和开发。

获取用户信息操作流程

去微信公众号后台为开发者的微信号配置开发者权限
去微信公众号后台配置网页授权域名
按照微信网页授权文档流程调用接口获取用户信息。
在微信公众号或者微信开发者工具中进行调试。

这边说下我的配置方式，当某些页面需要获取授权，就在微信公众号菜单入口处配置微信授权的 URL：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

微信域名配置

如果需要完整的使用微信公众号的所有功能，需要进行域名配置。配置项在微信公众号后台，一共有三个域名配置：

业务域名 —— 设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。用户在该域名上进行输入时，不出现下图所示的安全提示。
JS 接口安全域名 —— 配置后可以调用微信公众号的 JS-SDK 相关接口。
网页授权域名 —— 配置后可获取用户信息的授权。

而配置这些域名首先必须要将验证文件访问域名根目录下。我的做法是使用 CopyPlugin 来实现：

  // webpack.config
  new CopyPlugin([
    { from: path.resolve(__dirname, '../MP_verify_1111111111.txt'), to: path.resolve(__dirname, '../dist') }, // 开发环境公众号
    { from: path.resolve(__dirname, '../MP_verify_222222222.txt'), to: path.resolve(__dirname, '../dist') }, // 生产环境公众号
  ])

当然更好的方式应该是按照不同的环境拷贝不同的验证文件。

微信授权前后端交互方案

微信的两种获取用户信息授权方式：snsapi_base 和 snsapi_userinfo。前者只是获取用户 OpenID，而后者获取所有的用户信息（需要哦用户手动授权）。

由于项目暂时无需获取用户其他信息，所以用的是 snsapi_base

具体网页授权的步骤微信文档说的是一样的：

在微信公众号网页环境下访问拼接的微信授权 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），此时就实现了获取用户信息。

在项目中，我们先后用了两种方案：

将用户 OpenID 存储在 cookie 中来进行前后端通信。
每次从微信公众号进入 H5 页面都进行微信网页授权。

由于需求里要求当用户换了手机登录微信也要保证能拿到用户信息，所以我们最终采用了第二种方案。

IOS 软键盘将页面顶上去的问题

开发中遇到了 IOS 上软键盘弹出后界面推上去的问题，参考 ios 最新系统bug与解决——微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效。

查了网上的资料后发现是 IOS 下微信公众号网页被虚拟键盘把界面顶上去了，当虚拟键盘消失时没有返回原样。

解决方案是在 input 和 textarea 失去焦点的时候主动将页面滑动到正确位置：

  // util.js
  function IOSKeyboardFixer () {
    if (appApi.isIos) {
      document.body && (document.body.scrollTop = document.body.scrollTop)
    }
  }

 { util.IOSKeyboardFixer() }} />

微信缓存解决方法

先是试着添加了缓存 mata 标签，但是在 IOS 中还是有缓存。

最终是通过为所有文件加上 hash 值的方式解决了缓存问题。
注意，加了 hash 的时候别忘了入口文件 index.js。一开始我忘了给 index.js 加上 hash，结果导致 index.js 文件报找不到如 1.[hash].js 文件的错误（因为重新打包部署 hash 变了）。

  // webpack.config.js
  output: {
    filename: 'js/[name].[hash:8].js',
    chunkFilename: 'js/[name].[chunkhash:8].js',
    libraryTarget: 'umd'
  },

微信 JS-SDK 的使用方法

在使用 JS-SDK 前需要调用 wx.config 方法进行配置，对于 SPA 单页应用而言我们需要在页面路由跳转后都执行一次 config 方法。

使用 config 方法接入微信 JS-SDK 的详情看见文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。

简单说下步骤：

在微信公众号后台配置 JS 接口安全域名
引入 JS 文件，可以使用 npm 安装 npm i weixin-js-sdk --save。
通过 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 的配置和使用
微信公众号后台配置和安全验证
微信缓存问题
在微信分享和微信支付

总结

对于从来没有开发过公众号的同学而言，摸索开发公众号前端部分还是要费一些心思踩微信的坑的。这里记录下我的踩坑历程，希望能对他人有所帮助吧~

前端微信公众号开发踩坑笔记