18年是一个好年，这年都在写前端，与微信打交道，踩坑无数，这里略记一二，望君与我同样混沌时，能有一二启示！
微信官方文档 JSSDK使用步骤
- 绑定域名
- 引入js 文件
- 通过config接口注入权限验证配置
- 通过ready接口处理成功的验证
- 通过error 接口处理失败验证
这里有点要说明一下，我们的项目前后端分离的，通过后端去获取access_token ,jsapi_ticket，做签名，通过http接口给到前端，前端调用。access_token这些有缓存，由后端管理会比较好。
坑一： 签名正确，但是就是发起不了分享
这个一般是分享的link 不在你配置安全域名下。这个你用微信开发者工具会有提示的。这里只需要改成安全域名下的链接地址就可以了。
但是，犹如我们这样的项目，单纯分享一个链接是不够的，我们需要获取用户的openid，需要前端把从微信那里得到的code和state 在调用业务接口的时候返回给后端，以方便后台获取用户的openid。所以我们的分享地址应该是类似这种：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7c******&redirect_uri=http%3A%2F%2Fvempa****&response_type=code&scope=snsapi_base&state=vem#wechat_redirect
但是【open.weixin.qq.com】 这个域名是腾讯的，但它不是你的安全域名，所以当你企图分享这个域名下的link也分享不出去的。
那我们怎么办呢？
我们的做法是利用window.href ，写一个空白页面，里面立马就重定向到微信去授权，这样就能拿到code和state；但其实我觉得还有更好的方法，就是后端提供接口，需要授权的时候，再去做授权；
坑二：签名正确，模拟器运行正常，安卓机正常，IOS 异常！
这种先爆个粗口，WTF！
这个应该是不常见的，这个应该是由于我们是SPA导致的。我们做签名的时候，后端一般是拿的request header里referers去做的，由于两个平台的机制不一样，导致腾讯拿到的可能我们拿到的不一样；从而导致签名失败！这个时候怎么解决呢？
router.beforeEach((to, from, next) => {
if (
isIOS && to.path !== location.pathname
) {
location.assign(to.fullPath)
} else {
next()
}
})
对，用loaction.assign,强制页面加载一个新的文档
坑三：签名正确，模拟器运行正常，大部分机器正常，偶尔小部分机器不能分享
心累！开发机器都正常，只有测试妹子的机器分享不了，😔
怎么办？开启debug模式，把需要的关键点的东西都打出来看一下。
这个问题比较奇葩，问题是定位到了，但是为什么会出现，暂时还没搞清楚。是由于测试妹子的安卓机，微信js文档没有下载下来，所以wx 是undefined。解决方法就是把js放在自己工程里！
另外官方文档是有说明的。
引入js文件
tips：用混入统一处理微信注册和验证
我们的页面其实单独打开都是独立。我们每个页面几乎都是一个component。由于我们是有很多页面都需要用到jssdk，包括分享，定位啥的。都需要获取微信签名，注册，验证啥的，但是又不想每次都写，VUE 的混入是个好东西，由于它too easy, too simple,这里就不赘述。
tips：微信getloation 获得的经纬度要注意坐标系！
前端直接嵌入百度地图，拿到的定位的经纬度，有时候是不准的，不是手机当前的经纬度，我们需要通过getLocation获取当前经纬度后在百度地图上打点，这个时候需要转坐标系，当然百度有提供这方面的util，可以直接用，但是要注意！
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
2019年第一天就这么勤奋，简直就是棒棒的，主要可能是红包收太多，心情好，把暂时印象深刻的先记一下，还有一些奇葩问题，等我整理一下，再持续更新！
网友评论