Vue 做微信jssdk 开发踩坑实录

18年是一个好年,这年都在写前端,与微信打交道,踩坑无数,这里略记一二,望君与我同样混沌时,能有一二启示!

微信官方文档 JSSDK使用步骤

  1. 绑定域名
  2. 引入js 文件
  3. 通过config接口注入权限验证配置
  4. 通过ready接口处理成功的验证
  5. 通过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年第一天就这么勤奋,简直就是棒棒的,主要可能是红包收太多,心情好,把暂时印象深刻的先记一下,还有一些奇葩问题,等我整理一下,再持续更新!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • 先引入JS 文件 this.wxShare() 在created里调用 首先登陆微信公众号 JSSDK使用步骤 步...
    寄鱼予海与你阅读 6,583评论 1 3
  • 1. 准备工作 1.1 查看公众号分享接口权限 要使用微信SDK必须要有经过微信认证的非个人服务号 登陆服务号后,...
    sxplus阅读 6,052评论 0 2
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,115评论 0 3
  • 最近在鼓捣《x86 汇编语言 实模式到保护模式》这本书。去年就雄心勃勃想把这个弄出来,无奈,凭借我半途而废的坚强性...
    吃根香蕉压压惊阅读 330评论 0 0
  • 静卧病榻思故旧,三十年往蒙眷厚。 而立之岁明远志,从此文章不道愁。
    朱大饼阅读 153评论 0 0