美文网首页react.js
在 react 项目中使用微信 JS-SDK 填坑笔记

在 react 项目中使用微信 JS-SDK 填坑笔记

作者: sbtiny | 来源:发表于2016-06-03 17:37 被阅读9458次

UPDATE

现在 android 的微信(6.3.31)已经修好了,需要按照文档说的传入当前页面的url,也就是没吃豆重新 config 一次,但是苹果的微信只要在进入页面的时候 config 一次就可以了,微信管接口的估计是个锤子。


在做图片上传的时候,图片太大老是上传失败,在产品汪(☁️)的建议下用了微信的 JS-SDK,微信会处理压缩,而且还有顺带连预览也解决了,好开心。

后来一发布,整组人感觉不好了。主要问题出现在 url 的配置上。

微信的官方文档是这样说的:

同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复

实际测试中发现,配置的 url 并不是调用微信 js 的时候所在页面的地址(也就是通过 location.href 获得的地址),而是在进入到网站的第一个页面的地址,这是第一个问题

第二问题是在苹果手机的微信上面,只要调用 wx.config 一次就可以了,但是在 android 的手机,在页面跳转之后,要重新调用 wx.config(url 依然是进入网站的第一个页面的地址,要保存在一个变量里面),"X5 浏览器", 我他妈就呵呵了。如果用了 react-router 的话,直接在 Route 组件上绑定一个 onChange 方法就可以了

function routeChange(pre, next) {  wx.config(getWxConfig());}

<Route path="/react" onChange={routeChange}>
  <YourRouteConfig/>
</Route>

相关文章

网友评论

  • _9fe0:请问ssr ios url 是进入网站的第一个页面的地址
    怎么解决
  • a52c01d6107d:我的遇到这个问题 用的是react-router , 调用支付接口的是它把进入页面的地址当做支付页面,导致支付的授权地址不一样
    dev7:请问解决了吗?:anguished:
    huanyer:请问解决了吗?
  • Amumu837:这几天刚好踩到这坑,我很想骂人...
    Amumu837:@JustinYi922 没有,只能绕过
    edbac541018b:正要做这块。你们还有一些实例可以参考一下?
    Amumu837:难道对腾讯来说很难解决吗
  • 爱吃土豆丝杉杉:请问引入jssdk的时候是怎么弄的。是npm吗还是直接引入进来
  • a4be55f26792:关于ios分享定制还有个bug,iphone 5 10.3.2 微信版本6.5.8,入口页面如果有重定向(包括服务端重定向、客户端js重定向),这个时候分享定制就会失效,虽然wx.config是成功的。
  • 8385a3ea786c:有一个问题目前无法解决,就是如果我在非首页的componentDidMount里设置分享的title/imgUrl等,但是实际分享起作用的应该还是首页,导致分享的配置失败,这样的问题应该如何解决呢?
    阿诺201705:请问你这个问题解决了吗
    柠檬片_8202:我想问下 怎么解决
    OhItsabug:亲 解决了吗:sob:
  • df167f1f9878:目前貌似IOS下还没修复这个问题,安卓就是好的。刚踩到坑,还好发现了这篇文章,:joy:
  • 吴博:这是第二次回复:我本来是按照 这种方式,通过改变URL的方式来实现前进后退的功能,但是config 的时候兼容性太多。
    最后,我用了import {hashHistory} from 'react-router'. react-router 是v3.0.0的,路由的跳转也可以使用hashHistory.push(url); 所有的Route 的path都必须以"/"开头
  • 吴博:楼主和xiao李子的回答,测地解决了我的问题,多谢多谢。不过苹果上微信6.5的版本才不会有问题
  • xiao李子:UPDATE 中提到的“现在 android 的微信(6.3.31)已经修好了”请问修复好什么问题了?是在安卓下不需要多次config了吗?
    sbtiny:@xiao李子 嗯,是这样的
    xiao李子:恩,感谢您的答复
    我经过测试确认安卓手机需要传入当前 url
    例如: 访问 www.xxx.com 默认前端路由会转到 www.xxx.com/home
    那么在这种情况下,
    安卓config 时 URL 需要传 www.xxx.com/home
    iPhone config 时 url 需要传 www.xxx.com
    这个是这两天刚刚测试的情况
    sbtiny:@xiao李子 需要多次 config 的,只是config 传入的 url ,之前是传入进入网站的第一个页面的地址,要保存在一个变量里面,现在是当前页面的 url
  • cuiliang:悲催,在ios和android下,直接用进入页面的url调用config是正常的,在PC版微信里就会出错。
  • cuiliang:谢谢,多亏了你的这篇随笔。我在微信下用angular2 spa也是这个问题,各种尝试都config失败,终于搜到了你这篇,抓住了根本:实际测试中发现,配置的 url 并不是调用微信 js 的时候所在页面的地址(也就是通过 location.href 获得的地址),而是在进入到网站的第一个页面的地址。
    _9fe0:请问ios解决了么
    sbtiny:@cuiliang 安卓下边还是有时候调不起来,明明你权限列表传过去了,就是报错说没权限,不知道微信的人咋搞的

本文标题:在 react 项目中使用微信 JS-SDK 填坑笔记

本文链接:https://www.haomeiwen.com/subject/chcldttx.html