html5 分享微信标题 h5分享功能

转载

jacksky 2023-07-12 16:08:57

文章标签 html5 分享微信标题微信 H5 显示图片 文章分类 HTML5 移动开发

适用场景：

通过uni-app实现的H5页面分享功能。
要求链接必须在微信端内打开。手机上浏览器打开无效。

流程描述：

第一步安装js-sdk。

方式一：NPM安装方式

npm install jweixin-module --save

方式二：下载使用方式。（本人用的就是这种）

//npm安装的引用
var jweixin = require('jweixin-module')
//自己下载根据路径引用
var jweixin = require('../../common/jweixin-module')

第二步需要转发页面添加代码。

this.$u.api.wxshareApi是封装好的请求数据的接口。surl是地址用于后端请求微信签名，具体操作交给后端。我们这边可以给他传递surl，也可以让后端用项目在网上的根域名直接请求。
以下代码是我修改后的，原来代码地址：https://ask.dcloud.net.cn/article/36284

//引入资源
var jweixin = require('../../common/jweixin-module')
export default {
	data() {
		return {
			wxsharetip:false
		}
	},
	methods: {
		wxshare(item){
			//#ifdef H5
			//据说可以解决URL中带参数的问题，前台用的js编码，后台php解码 
			//var surl = encodeURIComponent(window.location.href.split('#')[0]); 
			this.$u.api.wxshareApi({
				//url:surl
			}).then(res => {
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
					appId: res.data.appId, // 必填，公众号的唯一标识  
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳  
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串  
					signature: res.data.signature, // 必填，签名，见附录1  
					surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确  
					jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]  
				}); 
				 jweixin.ready(()=> {
				 //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
                       jweixin.updateAppMessageShareData({  
                           title: '标题', // 分享标题  
                           desc: "描述内容", // 分享描述  
                           link: "链接", // 分享链接  
                           imgUrl: '显示图片', // 分享图标                                
                           success: res => { 
                           	//点击分享时提示用户分享图，
							this.wxsharetip = true
				 	    },  
                           cancel: function() {  
                               // 用户取消分享后执行的回调函数  
                           }  
                       });  
                       //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）  
                       jweixin.updateTimelineShareData({  
                           title: '标题', // 分享标题                                  
                           link: '链接', // 分享链接  
                           imgUrl: '显示图片', // 分享图标                                
                           success: res => { 
                           	//点击分享时提示用户分享图，
							this.wxsharetip = true
				 	    }, 
                           cancel: function() {  
                               // 用户取消分享后执行的回调函数  
                           }  
                       }); 
				 }) 
			})
			//#endif
		}
	}
}