开发工具
踩坑：在开发中使用的是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目录中
