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 H5vm.$u.toast('H5暂不支持分享功能')return// #endif// #ifdef H5uni.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接口列表见附录2openTagList: ['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接口列表见附录2openTagList: ['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博客

来源地址：https://blog.csdn.net/m0_65720832/article/details/130105902