文档章节

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

zuoge85
 zuoge85
发布于 2017/09/06 17:05
字数 1162
阅读 33
收藏 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
完美解决ios7下应用微信分享问题

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

gongweixin1990
2013/09/25
2K
0
AngualrJs 微信支付url未注册大坑解决方法

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

并不是
2016/09/28
653
0
iOS 下实现 webview 标题修改

修改页面标题?,用不就好咯。emm..,并没有这么简单,在iOS的webview中,这个方法未必行得通。之前在做一个支付宝相关的H5页面便遇到这个问题,一起来看下吧~ 原因分析 通常来讲,iOS的原生...

LevonLin
2017/12/03
0
0
RESTful SPA 杂谈

RESTful SPA 杂谈 在从前的从前,Javascript还不是流行的时代,HTML语言可以说是浏览器的基础了,那时候,一个页面的HTML渲染,完全依赖于后端服务器,如JSP ,PHP等页面渲染技术。 后来Jav...

精通吹水
2016/01/16
181
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部