H5实现微信分享

H5页面如何实现微信分享功能

微信分享文档地址：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

步骤一：绑定域名（微信公众号需要配置js安全域名白名单，ip白名单）

以公众号作为载体=》微信公众平台 =》 公众号设置=》 功能设置=》 JS接口安全域名
备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JSSDK依赖

在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载，自行查找

步骤三：废话不多说，直接贴代码

import wx from "weixin-js-sdk";
import {axios} from "@/pages/assets/axios.js"
//页面分享
function getMessage(url) {
	if(url == '') {
		return {
			title: '',
			desc: '',
			imgUrl: ''  
		}
	} else if(url == '') {
		return {
			title: '',
			desc: "",
			imgUrl: ''
		}
	} 
}
//分享调用
function openShare(){
	let that = this;
	let url = "";
	let theUrl = url.split("#")[0];
	let shareImgUrl ="../../static/logo.png"
	axios("POST","/wx/getAccessTokenAndJsapi?url="+theUrl).then(res=>{
		_wxConfig(res) //调用后端接口，通过 config 接口注入权限验证配置
	})
}

//微信jssdk注册配置
function _wxConfig(config) {
  wx.config({
    debug: false,
    appId: config.appId,
    timestamp: config.timestamp,
    nonceStr: config.nonceStr,
    signature: config.signature,
    jsApiList: [
		'onMenuShareTimeline', 'onMenuShareAppMessage'
    ]
  })
  wx.ready(() => {
   wx.onMenuShareAppMessage({
		title: getMessage(location.href).title, // 分享标题
		desc: getMessage(location.href).desc, // 分享描述
		link: location.href, // 分享链接
		imgUrl: getMessage(location.href).imgUrl, // 必须是https网络路径,不能大于20kb
		type: '', // 分享类型,music、video或link，不填默认为link
		dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		success: function () {}
	})		
	
	//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
	wx.onMenuShareTimeline({
		title: getMessage(location.href).title, // 分享标题
		desc: getMessage(location.href).desc, // 分享描述
		link: location.href, // 分享链接
		imgUrl: getMessage(location.href).imgUrl, // 必须是https网络路径,不能大于20kb
		type: '', // 分享类型,music、video或link，不填默认为link
		dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		success: function () {},
	})
	
})
  wx.error(res => {
    console.log("wx.config error:", res);
    // if ( config_num < 10) {
    //   config_num++
    //   _wxConfig(config)
    // }
  })
}

步骤四：分享结果

容我狡辩一下，图片没出来是因为我用的不是网络图片，后续会更新

步骤五：总结

分享结果不咋地，但是流程是没问题的，适合小白们，这点代码绰绰有余。有问题的可以留言，大佬们走过路过，留点痕迹，nice~