微信公众号开发-常见问题及解决方案

问题1 ：了解微信公众号基本开发流程

包括微信公众号的分类、微信公众平台介绍、微信二次开发介入；

问题2 ：开发域名配置

在项目创建，正式开始编码前，需要登录【微信公众平台】，完成一些必要的配置：

服务器配置信息成功接入
公众号设置>功能设置配置网页授权域名(授权回调域名)eg: wechat.suning.com 公众号设置>功能设置 JS安全域名（后端接口域名）设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。公众号设置>功能设置业务域名设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。用户在该域名上进行输入时，不出现下图所示的安全提示。微信支付开发配置需要前往商户平台 pay.weixin.qq.com 登录（另一套账号）配置域名至少要有两层添加协议头，尾部加’/’ 有了以上的完整正确的配置信息，项目才能在微信正常运行，才能保障开发顺利进行。

问题3 ：接口API调用流程

eg. 用户在微信客户端中访问第三方网页，调用微信支付购买直播课程

实现页面基本业务逻辑,引入JS-SDK文件：res.wx.qq.com/open/js/jwe… 访问该页面路由; 以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的,获取到code。页面逻辑中，通过传入页面URL获取微信配置信息，通过 wx.config() 接口注入权限验证配置，并在配置项中的jsApiList传入chooseWXPay。在wx.ready()中或手动触发事件中调用wx.chooseWXPay()来发起微信支付。chooseWXPay的发起需要配置信息，该配置信息的获取依赖网页授权获取的code，置换出的access_token（全局唯一接口调用凭证）。在此过程中需要注意两个流程：

微信网页授权流程【微信网页授权】

用户可以通过点击分享进入到H5中。有的页面的访问是以用户已经登录为前提的。为了逻辑的统一与方便，我们抽取了一个公共的获取用户信息的组件。用户进入到需登录的页面时，会首先进入这个组件；如果用户已登录，则该组件负责跳转到真实目标页，否则跳转到登录页。 JSSDK使用流程依据【微信JS-SDK说明文档】，调用API

问题4 ：微信调试方式及工具

使用【web开发者工具】在PC上进行开发和调试工作。

注意：登录web开发者工具需要使用自己的微信号，并且该微信号，首先需要关注所开发的公众号（好分数服务号）、关注公众号【公众平台安全助手】，并需要再公众平台中的web开发者中添加绑定自己的微信号，然后扫码登录即可。

使用手机登移动设备调试，为了方便查看接口数据情况，需要借助工具 Charles，安装参考网络抓包工具Charles，如果是接口是https协议请求，PC与移动设备均需添加证书才能Charles里正常查看到接口数据。

3.1 绑定hosts

因为网页授权域名配置的个数限制，不方便给测试环境专门配置一个，故本地调试时需要将127.0.0.1指向授权域名。连接测试环境时亦要设置。

3.2 手机连接本地环境调试

由于本地的https证书是自签名的，微信会出于安全的原因显示白屏。此问题待解决。

3.3 手机连接测试环境调试

配置本地的hosts，让授权域名（例如 hfs-wechat.yunxiao.com）指向测试机器ip。打开Charles，手机连接charles。访问页面。

3.4 远程调试

有时候pc模拟器不能全面模拟在手机上的情况（如展示互动直播课不支持在），此时可以在安卓手机上打开相应页面，使用chrome浏览器远程连接，便能以调试pc网页的方式调试手机上的页面。

问题5 ：https 问题

如果后端使用了https，此时，默认情况下，在 HTTPS 链接上传输的 cookie 会被自动添加上 secure 选项。

前端要读取到cookie，则前端域名也需要配置成https。需要在在 webpack.dev.conf.js 中设置 devServer 属性 https: true，方能读到cookie。

问题6 ：微信JS-SDK签名不正确使用JS-SDK调用微信接口的页面，都需要先注入配置信息，配置信息校验中，会报出签名不正确的问题。

    配置信息的获取，只需一个URL参数 ，url = encodeURIComponent(location.href.split(‘#’)[0])  防止二次分享错误。Android手机没有问题，IOS签名不正确。

    在进行签名认证时 IOS：Landing Page   Android: Current Page   location.href取得是Current Page  故而Android手机没有问题。

    Current Page 即为 当前页    从微信别的地方点击链接呼出微信浏览器时所落在的页面，或者点击微信浏览器的刷新按钮所刷新的页面，为Landing Page. 参考：http://www.kejik.com/article/152868.html

   解决方法：将页面的Landing Page url 存入sessionStorage 。以 window.__wxjs_is_wkwebview === true  判断IOS 获取sessionStorage内的URL，传入获取配置信息接口，进行校验。

问题7 ：微信分享卡片的图片、文案及链接地址不正确

问题原因：

微信JS-SDK 签名不正确链接地址的域名需与网页授权页面相同图片不能是base64方式

问题8 ：支付问题

营平台配置的域名格式要正确，域名至少两层

   参考：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

   签名参与参数有appId ,timeStamp, nonceStr, package, signType  所遇问题大小未完全匹配导致签名不正确。