jssdk 在history模式下安卓不能调用图片上传接口和分享接口

dkzwm 发布于2019-08-22 15:37 / 443人阅读

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。

首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。

配置

先上配置???

// index.js
const protocol = location.protocol + "//" + location.host;
router.afterEach((to, from) => {
  if(!store.state.weChatUrl) {
    store.commit("m_weChatUrl", document.URL);
  }
  let url = protocol + to.fullPath.split("#")[0];
  store.dispatch("a_wxConfig", url);// 每个页面都调用微信授权配置
});
// action.js
if(window.__wxjs_is_wkwebview === true) {
  urlType = 0;
} else {
  urlType = 1;
}
$get(...).then(item => {
 config = JSON.parse(item);
 $wechat.config(config);
 $wechat.ready(function () {})
})
// 注：$wechat是我在webpack external暴露的wx接口

这份配置主要是根据vue微信公众号开发踩坑记录（2)配置而来。

遇到的问题：

上传图片、分享朋友自定义内容在ios上面可以，安卓不可以

有些很有趣的现象：

ios的可以，有些安卓可以，有些安卓不行

在安卓上面有些页面的上传图片可以，有些页面的上传图片不可以

在本地用测试公众号可以，用正式公众号大部分时间不行

不行的时候，微信debug模式的结果基本都是：config ok,CheckJsApi: permission Denied

正是这些现象把我带偏了半个地球，好不容易才试出来问题的所在。

秀一波我曾经怀疑过的问题：

jssdk cdn加载可能不成功（用本地版测试过）

是不是写死cdn 的协议头http导致的（使用location.protocol测试过）

是不是签名路径的问题，难道低版本的安卓跟ios一样也是要用第一次进去页面的url的呢

安卓在本地测试可以，在线上又不行了。会不会是由于后端写了所有的jsApiList，但是线上正式账号并不是所有的都具有这个权限的。（排除了）

是不是因为API没有在wx.ready 回调里面执行。但是官方说过像上传接口API那样的明确不需要啊

怀疑过这些问题的可以不用怀疑了，经过我的百般折腾，终于在这篇博客???关于html5-History模式在微信浏览器内的问题发现了一点曙光：

修改后的代码如下

setTimeout(function () {
    $wechat.config(config);
}, 500);

简直不要太高兴，居然可以啦！！！！

其实细想一下config ok却会发生permission Denied已经给出了问题所在了，但是奇怪的现象太多了，想法就饶了半个地球了。
让我来解析一下为什么config ok却会发生permission Denied的报错。
由于在afterEach调用config的时候，页面的路由还是上一个页面的路由，config的url也是上一个页面的路由，所以config是ok的。但是到调用API的时候，afterEach多数已经resolve了，所以页面的路由也已经改变了，也就是当前调用api的路由跟config的路由不一致，所以微信就判断permission Denied了

新的问题，ios的分享总是首页

用了上面延迟后的config之后，ios分享的每个页面进去的都是首页。这是要折腾死我的节奏啊?????。幸好我只改了这延迟这一个地方，所以我很容易地就确定，肯定是afterEach在ios跟Android的处理是不一样的，所以把ios改回原来不延迟的config就妥妥滴好了

if (window.__wxjs_is_wkwebview === true) {
  $wechat.config(config);
} else {
  setTimeout(function () {
    $wechat.config(config);
  }, 500);
}

在一个页面定义了分享，之后每个页面的分享内容都是一样的了

由于是单页应用，页面不会刷新，所以微信分享一旦定义了，wx变量就会一直存在于系统运行内存中，自然就是每个页面分享的内容就是定义过的就不奇怪了。

解决办法，在afterEach里面，定义每个路由默认的分享标题和描述，如果组件需要再在独立的vue组件里面重新定义一篇分享的API即可

$wechat.onMenuShareTimeline({
    title: state.title, // 分享标题
    success: function () {
      // 用户确认分享后执行的回调函数
    }
});
$wechat.onMenuShareAppMessage({
    title: state.title, // 分享标题
    type: "", // 分享类型,music、video或link，不填默认为link
    dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    }
});

参考文档：
vue微信公众号开发踩坑记录（2)
关于html5-History模式在微信浏览器内的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93594.html

vue+微信支付目录+JSSDK签名解决方案

摘要：主要是用，每当用户第一次进来时，去获取一次签名验证。注意只获取一次，这样签名就解决了。 vue+微信支付目录+JSSDK签名解决方案遇坑如下注意：此方法仅为个人总结，并非唯一解决方案微信JSSDK签名出错微信支付调起支付缺少API参数微信支付目录配置，只有5个配置，可能超过5个地方有配置，路由规划微信授权回调处理我所使用的技术 vue路由模式 history 模...

Little_XM 2019-06-28 14:35 评论0 收藏0
微信开发之录音上传、下载、转码

摘要：具体请看我在提问里的回答下载七牛云文件间歇性失败总结至此，在微信开发中关于录音这一块儿的功能，就已经介绍完毕。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以点阅读原文进行跳转查看，还有好听的背景音乐噢~ 一年的时间里，前前后后都在搞微信开发...

余学文 2019-06-28 18:30 评论0 收藏0
移动端H5开发遇到的坑

摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且微信分享签名错误invalid signature vue单页应用history模式下微信分享一直提示签名错误invalid signature ...

Eirunye 2019-08-26 13:39 评论0 收藏0