微信公众号开发

开发工具

踩坑：在开发中使用的是chrome浏览器，结果打包后在微信中显示样式错乱。

建议：使用微信开发者工具进行调试，它和微信都是x5内核，这样保证开发和生产样式一致。

openid

微信开发是绕不开openid这个字段的，可以简单理解成用户的id。

开发前一定要询问清楚，后端如何给前端传递openid。

踩坑：曾经遇到一种方式，是后台通过cookie方式存储到浏览器，然而开发中存在延时问题，页面加载完了，还获取不到cookie,延时大约1s才可以获取的到。

建议：稳妥方式是让后台写一个登录接口，通过该接口获取openid。

jssdk

微信提供了jssdk，其中封装了很多方便的功能。

安装依赖

npm install weixin-js-sdk --save

jssdk需要通过config接口注入权限验证配置，才可以正常使用，其中的参数都是后端返回的，前端只要通过接口获取这些参数，并通过config验证即可。

公众平台绑定域名

使用jssdk是需要绑定域名的。JS接口安全域名：需要是一个公网域名。

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

这就导致本地开发无法调试jssdk功能，因为localhost:8080不是JS接口安全域名。

内网穿透/转发

想要调试jssdk，代码需要发布到域名对应的ip服务器上。但是这样上传太频繁了。

把内网映射到公网，这样就可以在本地进行调试了。

常见工具：ngrok、魔法隧道、花生壳等。具体可搜索关键字内网穿透/转发。

微信头像跨域

踩坑：如果需要展示微信头像，请求后台返回的url会存在跨域问题。

建议：可以让后台返回头像的二进制文件(blob)，在ajax中记得设置响应类型responseType:'blob'，然后前端将blob转换成base64格式进行展示。

if (window.FileReader) {
     let fr = new FileReader();
     let img = new Image();
     fr.readAsDataURL(blob);
     fr.onloadend = (e) => {
         img.src = e.target.result;
         // appendChild(img)
     }
  }

生成海报/邀请函

通常会有生成海报、邀请函的需求，这些有两种方案：

• 后端生成图片
  通过接口上传图片，后端生成图片并返回，前端展示。
• 前端生成图片
  前端将dom转换成canvas或img。

这里主要讲第二种，前端生成图片：
插件：dom-to-img、html2canvas
实际效果：html2canvas比较模糊，dom-to-img的png、jpeg格式同样模糊，但是svg格式很清晰。

html2canvas模糊方案之一：
将 canvas 的宽高设置成容器宽高的 2 倍，处理生成的 canvas 图片模糊失真
可参考：html2canvas截图失真

注意： 除了模糊以外，html2canvas生成的图片和dom样式有不一致的地方。

长按保存/转发图片

踩坑：在微信网页中，长按普通的图片是可以保存或转发的，但是通过上一步dom转换的图片是svg格式，微信是不支持保存。

建议：

• 生成图片后上传给后端，后端返回一个url。
• 前端将svg转换成png
  • 通过window.devicePixelRatio获取设备像素比scale
  • canvas画布的大小是图片的scale倍(相当于提高图片精度)
  • 调用canvas的drawImage()在画布上绘图。
  • 调用toDataUrl()返回png格式的图片展示data URI
  • 设置img.src，并且宽高缩小scale倍(这里是等比缩放，所以不会模糊)

分享参数配置

jssdk分享接口中有一些参数配置项：

• link
  分享链接，vue-router的hash模式，#后面的部分会被忽略
  建议：使用urlencode加密
  或者在#前面加一个?

• imgUrl
  分享图标

• 可以放到图片服务器上

• 放到项目的assets目录中

参考:

toDataUrl