H5分享h5页面、小程序到微信

1、H5分享h5页面（卡片链接形式）到微信

先去微信公众平台填写js接口安全域名

本来想用微信开发js-sdk的，但是做了半天好像没啥效果

概述 | 微信开放文档 (qq.com)

引入js文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

 代码部分：

单独的h5是唤不起微信的，需要原生app去集成微信的sdk，app去调微信的方法，h5再去调app的方法，才可以实现

接下来使用插件：m-share

m-share: h5页面分享组件、支持分享到微信、朋友圈、新浪微博、QQ空间、QQ好友。 (gitee.com)

注意：这种方法也是用native+微信的js-sdk实现的，且在浏览器很受限制，只有qq和uc支持

步骤一：

微信公众平台填写js接口安全域名

步骤二：

先去安装插件，因为是uniapp的项目，没有package.json文件，所以先去项目根目录cmd后执行：

npm init -y

 npm install m-share

步骤三：

分为两种情况：1：在浏览器分享会唤起分享框--分享成功为卡片形式，2：在微信打开就只是引导用户去点三个点去分享--分享成功为链接形式（link的值）

如果是App的话使用uniapp官方提供的api：uni.share

const ShareWXSenceTimeline = (data) => {
		// 微信朋友圈分享
		// #ifdef H5
		vm.$u.toast('H5暂不支持分享功能')
		return
		// #endif
		// #ifdef H5
		uni.share({
			provider: "weixin",
			type: 0,
			scene: "WXSenceTimeline",
			href: ,  //链接
			title: this.title,//标题
			summary:this.title,//内容
			imageUrl:this.company_logo,//图片
			success() {
				// 分享完成，请注意此时不一定是成功分享
				uni.hideLoading()
			},
			fail(e) {
				uni.hideLoading()
				// 分享失败
				uni.showModal({
					title: '提示',
					content: e.msg || '分享失败',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		})
		// #endif
	}

2、H5分享小程序到微信（调用小程序）

先判断在哪个浏览器中：

		isWx() {
			//判断是否为微信
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				return true;
			}
			return false;
		},

1）、在微信浏览器中

目录 | 微信开放文档 (qq.com)

先注入微信权限在onload中调用 

		getWxConfig() {
			uni.request({
				url: 'https:/*****************',
				method: 'POST',
				data: {
					url: location.href.split('#')[0]
				},
				success: res => {
					let result = res.data.data;
					console.log('result', result, {
						debug: false,
						appId: result.appId,
						timestamp: result.timestamp,
						nonceStr: result.noncestr,
						signature: result.signature,
						jsApiList: ['scanQRCode', 'updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						openTagList: ['wx-open-launch-weapp']
					});
					wx.config({
						debug: false,
						appId: result.appId,
						timestamp: result.timestamp,
						nonceStr: result.noncestr,
						signature: result.signature,
						jsApiList: ['scanQRCode', 'updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						openTagList: ['wx-open-launch-weapp']
					});

					wx.ready(function() {
						console.log('ready');
					});
				}
			});
		},

视图及事件 

this.wxPath = 'pages/homepage/home?label_no=' + this.label_no;

--------------------------------------------



						
							
						
					

-----------------------------------------------

		onLaunch() {
			alert('onLaunch');
		},
		onError() {
			alert('error');
		},

2）、在其他浏览器中
获取 URL Scheme | 微信开放文档 (qq.com)

					
						进入房间
					


---------------------------------------------------

		getscheme() {
			
			let _this=this;
			if(this.label_no!==''){
			uni.request({
				url: this.siteBaseUrl+'/appBaseUser/generatescheme',
				method: 'POST',
				data:{
					url:'pages/homepage/home',
					query:"label_no=" + this.label_no
				},
				success(res) {
					if(_this.label_no!==''){
					location.href = res.data.data.openlink;
					}
					
				}
			});}
		},

3、H5分享图片到微信

app是可以实现的，app的内嵌h5也可以实现，单独的h5不能实现

如果是App的话使用uniapp官方提供的api：uni.share

(100条消息) h5 点击按钮生成图片分享微信朋友圈_后端点击按钮分享朋友圈怎么弄_有脾气的程序媛的博客-CSDN博客

H5保存图片到本地

h5在浏览器保存图片到本地也是不太可行的， 

如果是App的话使用uniapp官方提供的api：

 具体代码参考：(100条消息) APP、H5保存图片到本地_白酱酱的博客-CSDN博客