文档章节

解决SPA微信分享失效问题?!

zuoge85
 zuoge85
发布于 2017/09/06 17:05
字数 1162
阅读 49
收藏 0

IOS直接访问域名,跳转子页面不能分享的问题!!

在ios内通过http://www.abc.com 进入后跳转页面可能出现的分享失效问题!注意不带最后的”/“。
我们可以在代码内进行一次跳转来解决这个问题,注意WKWebview和UIWebview处理方式稍微不一样。

在spa应用框架未初始化的时候调用!

6

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

 

if (this.isIos() && location.pathname == "/") {

let baseUrl = "/account" + (location.search ? location.search : "");

//

if(window["__wxjs_is_wkwebview"]){

history.replaceState(null, null, baseUrl);

}else{

location.replace(baseUrl);

}

}

//注意排除 微信web开发者工具

let isIos = ()=>{

return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) &&

!(navigator.userAgent.indexOf("wechatdevtools") > -1);

}

客户端签名

每次跳转都 需要去服务器请签名,所以如果不考虑安全可以在客户端签名

6

 

1

2

3

4

5

6

7

8

9

10

11

 

import uuidV4 from "uuid/v4";

import jsSHA from "jssha/src/sha1";

let nonceStr = uuidV4();

let timestamp = Math.ceil(new Date().getTime() / 1000);

let str1 = "jsapi_ticket=" + tokenModel.jsToken

+ "&noncestr=" + nonceStr + "&timestamp="

+ timestamp + "&url=" + url;

let shaObj = new jsSHA("SHA-1", "TEXT");

shaObj.update(str1);

let signature = shaObj.getHash("HEX");

微信文档有如下说明,但是我认为一般没问题
“3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。”

安卓和ios不同的签名过程

经过反复尝试ios 和 安卓 的签名过程如下

ios: 首次进入的location(在处理了不带路径问题后获取的location),且判定是否已经签名过,如果没签名过就签名,已经签名的url不用签名!
安卓: 每次都使用 当前location.href.split(‘#’)[0] 签名

注意最好在popstate 事件 内触发签名

6

 

1

2

3

4

5

 

window.addEventListener('popstate', (event) => {

setTimeout(()=>{

//签名

},0)

}, false);

菜单无辜消失的问题

这个问题很没有规律,但是安卓下非常容易出现,解决办法,在签名成功后立即执行一次显示全部菜单

6

 

1

 

wx.showAllNonBaseMenuItem();

完整签名代码示例

6

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

 

const shareMap = {};

let share = {

title: '标题', // 分享标题

desc: '描述!', // 分享描述

link: location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: location.origin + '/lips_share.jpg', // 分享图标

};

//popstate后调用

const innerInitWeixinConfig = () => {

let tokenModel = {}//启动的时候获取的签名需要信息;

if (!wx || !tokenModel) {

return;

}

let url = this.isIos() ? this._location : location.href.split('#')[0];

let nonceStr = uuidV4();

let timestamp = Math.ceil(new Date().getTime() / 1000);

let str1 = "jsapi_ticket=" + tokenModel.jsToken

+ "&noncestr=" + nonceStr + "&timestamp="

+ timestamp + "&url=" + url;

console.log("签名串", str1);

let shaObj = new jsSHA("SHA-1", "TEXT");

shaObj.update(str1);

let signature = shaObj.getHash("HEX");

if (!this.isIos() || (!shareMap[url])) {

shareMap[url] = url;

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: tokenModel.appid, // 必填,公众号的唯一标识

timestamp, // 必填,生成签名的时间戳

nonceStr, // 必填,生成签名的随机串

signature,// 必填,签名,见附录1

jsApiList: [

'onMenuShareTimeline',

'onMenuShareAppMessage',

'onMenuShareQQ',

'onMenuShareWeibo',

'onMenuShareQZone',

'startRecord',

'stopRecord',

'onVoiceRecordEnd',

'playVoice',

'pauseVoice',

'stopVoice',

'onVoicePlayEnd',

'uploadVoice',

'downloadVoice',

'chooseImage',

'previewImage',

'uploadImage',

'downloadImage',

'translateVoice',

'getNetworkType',

'openLocation',

'getLocation',

'hideOptionMenu',

'showOptionMenu',

'hideMenuItems',

'showMenuItems',

'hideAllNonBaseMenuItem',

'showAllNonBaseMenuItem',

'closeWindow',

'scanQRCode',

'chooseWXPay',

'openProductSpecificView',

'addCard',

'chooseCard',

'openCard'

] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

wx.ready(() => {

console.log("微信jssdk 初始化正确", share);

nativeShare();

});

wx.error(function (res) {

console.log("微信jssdk 初始化失败", res);

});

} else {

nativeShare();

}

};

const nativeShare = () => {

if (share) {

wx.onMenuShareTimeline(this.share);

wx.onMenuShareAppMessage(this.share);

wx.onMenuShareQQ(this.share);

wx.onMenuShareWeibo(this.share);

wx.onMenuShareQZone(this.share);

}

wx.showAllNonBaseMenuItem();

}

参考

  1. 微信官方有下面这段不明觉厉的说明!

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web
app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web
app的页面会导致签名失败,此问题会在Android6.2中修复)。

参考地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

  1. vue-router 项目的讨论 https://github.com/vuejs/vue-router/issues/481

本文转载自:https://www.forkjoin.org/2017/08-25-WeixinShare/

共有 人打赏支持
zuoge85
粉丝 1
博文 3
码字总数 0
作品 1
东城
Vue开发微信H5 微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在...

golddemon
08/08
0
0
绕过微信不支持检测 HTML History PushState 变化的问题

去年我在做一个 Web 项目的时候,发现「微信的内置浏览器不支持检测 HTML History PushState」,导致一些麻烦的事情。到了今年我发现微信依然没有解决这个问题,于是写篇 Blog 记录一下。 什...

I'm TualatriX
09/21
0
0
完美解决ios7下应用微信分享问题

iOS 7上应用的微信分享失效解决方法 大量移动应用在iOS 7下无法成功分享给微信好友、朋友圈,降低了用户体验,并影响了社会化传播。友盟第一时间升级了社会化组件,率先支持微信iOS 5.0.1,及...

gongweixin1990
2013/09/25
2K
0
记录一次vue2.0(history模式)下微信自定义分享的坑

吐槽:关于微信自定义分享前前后后翻了文档两三遍,感觉大佬们写文档都是这么潇洒么?躲在角落里的我瑟瑟发抖了两天..... 下面我们(带着愤怒)来看微信文档来进行开发:传送门 1. 根据文档来...

One day,
09/05
0
0
AngualrJs 微信支付url未注册大坑解决方法

最近公司要做个微信web新项目,正好在看angular,就愉快的玩耍上了,用ui-router做路由控制,一开始偷懒没有去掉url内的#,不幸的碰到了两个微信js的坑。 1、微信支付授权的url在SPA内不会正...

并不是
2016/09/28
653
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq学习(一)

RabbitMQ是目前非常热门的一款消息中间件,具有高可靠、易拓展、高可用及丰富的功能 1.什么是消息中间件 消息是指在应用间传送的数据。包含文本字符串、JSON、内嵌对象 消息队列中间件(消息...

hensemlee
8分钟前
0
0
学习设计模式——原型模式

1. 认识原型模式 1. 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。 2. 结构: Prototype:声明一个克隆自身的接口,用来约束想要克隆自己的具体实现类,要求这些类...

江左煤郎
14分钟前
0
0
观察者模式

观察者模式的套路 有如下角色: 事件,比如修改,用户点击; 事件队列,触发事件之后,会把事件一个一个放入事件队列 监听器,采用某种方式(一般是轮询,或者io阻塞机制),来判断事件队列是否有新的未...

黄威
17分钟前
0
0
线程安全策略

四个线程安全策略 线程限制: 一个被线程限制的对象,由线程独占,并且只能被占有它的线程修改 共享只读: 一个共享只读的对象,在没有额外同步的情况下,可以被多个线程并发访问,但是任何线...

Ala6
24分钟前
1
0
Dubbo (三)源码分析 —— 架构原理

1 核心功能 首先要了解Dubbo提供的三大核心功能: Remoting:远程通讯 提供对多种NIO框架抽象封装,包括“同步转异步”和“请求-响应”模式的信息交换方式。 Cluster: 服务框架 提供基于接口方...

小刀爱编程
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部