基于angular的ionic项目获取微信jssdk问题总结

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：546

angular是单网页项目，如果项目使用在微信公众号时，如果按照传统网页的写法会带来一系列的问题。 下面一一列举：

- 获取微信jssdk签名
获取微信jssdk签名需要使用当前网页的地址，但是苹果和安卓手机使用`window.location.href`获取单网页应用地址的结果是不一样的，android手机可以正确获取签名，而苹果手机会获取签名失败，因为此方法在苹果手机中获取到的单网页应用的地址是第一次进入应用的地址，而不是当前页面的地址。
解决办法是在应用入口记录进入应用时的地址，发起签名请求时区分android和ios而使用不同的地址发起请求。
下面是代码片段： AppComponent中保存初次进入应用的地址
```
// routerKeeper 是一个自定义的服务，利用到服务的单例模式
initializeApp() {
	this.platform.ready().then(() => {
		this.routerKeeper.initUrl = window.location.href; // 保存初次进入应用的地址	});
}
```
发起签名请求前根据手机型号不同获取不同的地址
```
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) { // 苹果系统
	return this.inject.get(RouterKeeperService).initUrl; // 获取初始路径
} else {
	return window.location.href; // 当前页面地址
}
```

- 获取微信对象 直接从window中获取微信对象
```
const wx = (window as any).wx;
```
如果页面使用iframe，那么子页面不能发起微信签名请求，而应该由父页面发起微信签名请求，子页面调用父页面的微信对象
```
if (window.parent) {
	if ((window.parent as any).wx) {
		this.weixin = (window.parent as any).wx;
	}
}
```

- 获取微信签名
应该由服务器接口向微信服务器发起签名请求，而不是ionic客户端应用直接向微信服务器发起请求，ionic只需要调用接口获取签名。
```
this.http.get(weixinConfigApi, {redirect})
.pipe(
	map(data => data.content as WeixinJavascriptAuthorization),
)
.subscribe(data => {
	wx.config({
		debug: this.debug,
		appId: data.appId,
		timestamp: data.timestamp,
		nonceStr: data.nonceStr,
		signature: data.signature,
		jsApiList: [
			'updateTimelineShareData', // 分享到朋友圈
			'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
			'chooseImage', // 拍照或从手机相册中选图
			'previewImage', // 预览图片
			'uploadImage', // 上传图片
		]
	});
	wx.ready(() => {
		if (title && link && image) { // 需在用户可能点击分享按钮前就先调用
			/* 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 */
			wx.updateAppMessageShareData({
				title, // 分享标题
				desc: description, // 分享描述
				link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 
				imgUrl: image // 分享图标
			});
			/* 分享到朋友圈 */
			wx.updateTimelineShareData({
				title: description ? description : title, // 分享标题
				link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: image // 分享图标
			});
		} else {
			this.log('title is null');
		}
	});
	this.weixin = wx;
	this.router = redirect;
});
```
> 由于是异步请求，存在延迟，所以如果在页面加载时就调用微信jssdk相关方法需要谨慎处理

- 上传图片
ios和android手机获取微信图片的方式不一样，苹果手机可以将base64编码的图片保存到服务器，而android手机需要根据微信图片编号向微信服务器发起请求来获得图片，获得图片地址为临时地址，获取之后还需要保存到自己的服务器上。
```
const isWkwebview = (window as any).__wxjs_is_wkwebview;
const $this = this;
if (isWkwebview) {
	this.weixin.getLocalImgData({ localId: e, success: (res) => {
		const localData = res.localData; // localData是图片的base64数据，可以用img标签显示
		if (localData) {
			$this.finishUpload(e, localData); 
		} else {
			alert('图片有误');
		}
	}, fail: (error) => {
		alert('选择图片失败（' + error + '）');
	}});
} else {
	this.weixin.uploadImage({
		localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得
		isShowProgressTips: 0, // 默认为1，显示进度提示
		success: (res) => {
			const mediaId = res.serverId; // 返回图片的服务器端ID
			if (mediaId) { $this.finishUpload(e, mediaId); }
		}, fail: (error) => {
			alert('选择图片失败（' + error + '）');
		}
	});
}
```

- 显示图片
如果自定义微信服务，获取到图片时可能不会触发数据双向流动，此时需要手动触发视图刷新。
```
this.wx.imageChange()
.pipe(takeUntil(this.destroy$))
.subscribe((photo) => {
	if (photo) { this.showWeixinPhoto(photo); }
});
/**
  * 获取微信图片
  */
showWeixinPhoto(photo) {
	if (photo.source) {
		this.image = photo.source; // 显示本地图片
		/* 获取微信图片 */
		this.service.getWeixinPic(photo.media).subscribe((image) => {
			if (this.loading) {
				this.loading.dismiss(); // 上传完毕 
			}
			this.image = image; // 显示远程图片
			this.cd.detectChanges(); // 上传完成之后检测视图变化，保证图片上传正确
		});
	} else {
		this.presentLoading(); // 显示加载
	}
}
```

标签： angular ionic weixin jssdk

上一篇：如何使用mvn命令导入依赖下一篇：MPEG-DASH、HLS和MP4格式视频有什么区别？

基于angular的ionic项目获取微信jssdk问题总结

随便看看

留言