微信分享 h5 实现

业务场景：

实现h5页面分享，并将分享的链接携带参数，在微信中使用

问题：

最初开发的时候分享功能已经实现了，可以分享qq，qq空间，但是微信朋友，微信朋友圈分享的效果无法以分享卡片的形式体现

解决：

只有将访问h5的链接挂在公众号的自定义菜单下才可以实现微信中分享朋友圈及朋友以卡片形式展现

代码搞一波：

//utils.js
import wx from 'weixin-js-sdk' //用uniapp在项目根目录下npm i weixin-js-sdk
//微信分享 
function wechatShare(shareData, url) { 
  //这是后端写的接口，需要用后端返回内容配置微信分享的参数
  findWxShareConfigInfo().then((res)=>{ 
	  let {appId,nonceStr,signature,timestamp}=res;  
	 const jsApiList=[
		   'checkJsApi', //检测接口权限	
			  'updateTimelineShareData',
			  'updateAppMessageShareData',
			  'onMenuShareAppMessage', //老版本分享接口(注意这两个旧版本的必须要放的不然会有问题)
			  'onMenuShareTimeline' //老版本分享接口。
			];
	  wx.config({
		  debug:false,
		  appId:res.appId,
		  timestamp:res.timestamp,
		  nonceStr:res.nonceStr,
		  signature:res.signature,
		  jsApiList
	  });
	 wx.ready(() => {
		 share(shareData);
	   // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）  
	 });
	 wx.error(function(res){
	   console.log(res.errMsg);
	 })
	   // 判断客户端是否支持指定js的接口
	   wx.checkJsApi({
	     jsApiList,
	     success: function (res) {
	       // return res
	       console.log('判断客户端支持js接口', res)
	     },
	   })
  })

};
function share(param) {
    var title = param.title
    var imgUrl = param.image
    var description = param.desc
    var url = param.url
    var tempParam = {
      title: title,
      desc: description,
      link: url,
      imgUrl: imgUrl,
      success: (res) => {
        console.log(res) 
      },
      cancel: function (res) {
        console.log('分享失败', res)
      },
    }
    // //分享给朋友
    wx.onMenuShareAppMessage(tempParam)
    // //分享给朋友圈
    wx.onMenuShareTimeline(tempParam)
    // // 分享给朋友
    wx.updateAppMessageShareData(tempParam)
    wx.updateTimelineShareData(tempParam)
  }
module.exports={
    wechatShare
} 

 vue中使用

<script>
   import{wechatShare} from '@/utils/index.js';//引用文件中方法
    export default{
        data(){
            return{
            
            }
        },
        onLoad(){
            this.shareCard(val);
        },
        methods:{
      		shareCard(val){  
				wechatShare({
					title:val.title,
					desc:val.content,
					url:val.url,
					image:val.iconImg
				},val.url);
			},
        }
    }

</script>

注意：

这个分享只是将分享的卡片自定义了，并不能点击页面任意按钮实现分享，需要点击右上角三个点拉起工具栏，分享

至于怎么自定义通过网页按钮拉起微信工具栏还需要在按钮中写：

function onBridgeReady() {
    WeixinJSBridge.call('hideToolbar');//隐藏工具条
 
    //WeixinJSBridge.call('showToolbar');//显示工具条
}
 
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}

收获：

今天微信开发的分享就到这里了，希望我填的坑对你有所帮助