uniapp中针对H5端做微信分享功能总结

我已经封装好了在uniapp里分享的代码,非常方便好用,有需要的朋友可以去下载

前提:

1 需要去微信公众号后台配置js接口安全域名

uniapp中针对H5端做微信分享功能总结_第1张图片

2 白名单是否需要设置,根据自己需求看是否要设置

下面我说一下使用步骤

第一,下载代码jweixin.js和wechatshare.js存放项目位置:项目的common文件夹下

uniapp中针对H5端做微信分享功能总结_第2张图片

第二,需要在wechatshare.js的initJssdk方法里配置一下后端签名验证地址,如果需要后端签名验证代码,请移步这里下载

uniapp中针对H5端做微信分享功能总结_第3张图片

第三 在main.js里定义一下全局变量,这样任何页面都可以使用分享方法,很方便

// #ifdef H5  
import wechat from './common/wechatshare.js'  
if(wechat.isWechat()){  
    Vue.prototype.$wechat =wechat;  
}  
// #endif

第四,在需要分享的页面调用下面代码:

        1 在methods方法里定义分享方法share,

        2 在onLoad方法里调用share方法

share:function(){
	// #ifdef H5  
	if (this.$wechat && this.$wechat.isWechat()) {  
		 this.$wechat.share({  
			 title:this.shareTitle,
			  desc: this.shareDesc,  
			  img: this.shareImg,  
		});  
	}  
	// #endif
},			

如果你的代码和配置没有问题的话,此时微信H5分享就已经完成了,赶快去试一下吧

分享效果图:

uniapp中针对H5端做微信分享功能总结_第4张图片

你可能感兴趣的:(微信,vue.js,javascript,前端,php)