文档章节

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

zuoge85
 zuoge85
发布于 2017/09/06 17:05
字数 1162
阅读 19
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
zuoge85
粉丝 0
博文 3
码字总数 0
作品 1
东城
完美解决ios7下应用微信分享问题

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

gongweixin1990 ⋅ 2013/09/25 ⋅ 0

AngualrJs 微信支付url未注册大坑解决方法

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

并不是 ⋅ 2016/09/28 ⋅ 0

iOS 下实现 webview 标题修改

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

LevonLin ⋅ 2017/12/03 ⋅ 0

RESTful SPA 杂谈

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

精通吹水 ⋅ 2016/01/16 ⋅ 0

进军微信第一步:接入微信JS-SDK

【前言】 某天,接到这么一个需求:自定义微信网页分享出来的标题,描述和图标。以前没玩过这个,感觉应该很简单,动手了之后,躺过各种坑才知道并没那么容易。完全独立研究排错,感受颇多,...

果汁凉茶丶 ⋅ 2017/11/22 ⋅ 0

Ls.c/vue-patient

安装 项目地址:(使用) git clone https://github.com/leson1986/vue-patient.git # 安装依赖模块npm install # 启动服务npm run dev # 发布代码npm run build 开发 目录结构 .├── READ...

Ls.c ⋅ 2016/12/20 ⋅ 0

微信内置浏览器内查看H5页面,js冲突问题

遇到这样一个问题:H5页面在微信内置浏览器中访问的时候需要先获取用户坐标地址信息 我目前的做法是: 用百度地图api获取用户坐标以及地址,但是影响了微信的二次分享,即无法再次分享到朋友...

开源中国首席技师 ⋅ 2015/08/09 ⋅ 1

关于微信js分享接口的一些使用心得

虽然微信官方开放了js-sdk,但是在某些老版本的微信上存在兼容性问题,比如在安卓微信6.0.1版本上分享接口就无法使用,官方给出的解决方案就是升级微信。这不坑爹呢!我又不能强制我的用户去...

吾爱 ⋅ 2015/01/21 ⋅ 6

Hash, PushState 和微信 JSSDK 授权

最近将 riot.js 升级到了 3.0,并用上了新版本的 riot-route,原先用了一年多的 2.2.4 版本内置的 riot.route 只支持 hash 形式的 SPA 单页面应用,riot-route 则支持 pushState。 Hash 方式...

XiongLiding ⋅ 2016/12/17 ⋅ 0

微信h5支付开发指南

前言 H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求。同时,由于H5链接传播十分方便、来源不易追踪,...

Tolonger ⋅ 2017/11/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

apollo配置中心的学习笔记

公司现在配置文件太多了,导致配置文件修改起来还是非常麻烦的。在boss(业务运营支撑系统)中,配置文件是存放在jar包的,通过应用jar包来引用配置文件(区分不同环境)。这种方式虽然能够满足...

miaojiangmin ⋅ 4分钟前 ⋅ 0

Jena增删改查AP

插入、更新数据 public static void insert(){ String query = "PREFIX book: <http://www.book.com/jinyong/> \n" + " INSERT DATA \n" + ......

Vincent-Duan ⋅ 5分钟前 ⋅ 0

springMVC之与json数据交互方法

因为我也要返回json数据。所以需要这个注解@ResponseBody,把Java对象转换成json字符串 注意: 1、@RequestBody不能省,因为前台发过来的数据是json数据,得用这个注解去解析该怎么接收这些数...

颖伙虫 ⋅ 9分钟前 ⋅ 0

用实例域代替序号(31)

1、许多枚举天生就与一个单独的int 值相关联 ordinal 方法,返回枚举常量在类型中的数字位置 下述,枚举修改很不方便,不好维护 永远不要根据枚举的序数导出与他相关联的值 而是将他保存在一...

职业搬砖20年 ⋅ 11分钟前 ⋅ 0

并发编程---ConcurrentHashMap源码解析

ConcurrentHashMap是java中为了解决HashMap不能支持高并发而设计的新的实现。 ConcurrentHashMap的类结构 public class ConcurrentHashMap<K,V> extends AbstractMap<K,V> implements C......

千古一梦888 ⋅ 14分钟前 ⋅ 0

微服务 WildFly Swarm 简介

我们将看到的最后一个Java微服务框架是一个相对较新的场景,它利用了 JBoss WildFly 应用服务器中已试过且受信任的 JavaEE 功能。WildFly Swarm 是 WildFly 应用服务器的一个完整的拆下来的组...

woshixin ⋅ 19分钟前 ⋅ 0

android apk 瘦身

头条APK瘦身之路 随着版本迭代,功能增加安装包体积也会慢慢增大。 今日头条576版本APK达到了25M,通过一系列的优化,到目前的607版本为12M。本文主要是介绍头条APK瘦身中用到的一些方法。 ...

GoldenVein ⋅ 22分钟前 ⋅ 1

mac机器学习开发环境部署及helloworld

一、下载并安装Anaconda2.7 https://repo.anaconda.com/archive/Anaconda2-5.2.0-MacOSX-x86_64.pkg 路径:/Users/shijun/anaconda2 二、运行Anaconda Navigator -> Environments -> base(ro......

八戒八戒八戒 ⋅ 34分钟前 ⋅ 0

关于日常开发的经验总结(Java),持续更新中

常量尽量使用枚举来表示,这样表现力会很强,因为枚举比一个常量类要有更多的扩展性 方法的入参和出参尽量不要使用Map,因为Map会让调用者感到迷惑,他不知道你里面装的什么,面向对象的开发...

小99 ⋅ 34分钟前 ⋅ 0

IDEA创建SpringMVC+Mybatis+Maven项目

视频如下(加载有点慢请见谅,服务器不太好): 视频

影狼 ⋅ 34分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部