H5页面微信分享

H5页面微信分享

单纯的h5页面在微信中访问

1.使用微信分享默认的标题，描述，以及缩略图

标题：微信自动抓取html中的title
例如：
	<title>标题</title>
	
描述：自动获取当前浏览页的url(不可自定义，无法修改)

缩略图：可以在父层 div 上设置 display: none; 或者对 img 设置 position: absolute; visibility: hidden;）
例如：
    <div style="display:none;"><img src="./logo512.png" alt=""></div>
    //插入图片，微信会抓取当前图片作为分享的缩略图
    <div id="root"></div>
</body>

2.自定义微信分享内容（标题，描述以及缩略图）

如下图

自定义分享内容需要调用微信的api，详情请参考官方微信开放文档
一定要认真读文档，按照文档的步骤一步一步配置，以下仅仅是在项目代码中的使用方式

yarn add （npm install） weixin-js-sdk

调试时建议使用微信开发者工具

import wx from 'weixin-js-sdk';
getWxInformation = (url,args) => {

    let config = {
        title:"自定义标题",
        desc: "自定义描述",
        link: "跳转连接",// 此链接中不可以含有#，若含有’#‘将配置不生效，url.splict('#')[0]
        imgUrl: "自定义缩略图的url"
    };
    
	
    ajax.post("url").then(res => {	
		// wx.config中的配置项appId，timestamp，nonceStr，signature均由后台请求接口返回
		
        wxConfig(res?.data,config)
    });
};

//微信方法调用顺序
//先wx.config被调用之后，成功，wx.ready方法才会被调用
"updateTimelineShareData","updateAppMessageShareData",是微信新的api,但是有时候新的api不起作用
所以调用的时候可以配置一下老的api,以免某些手机出现不支持使用新api，这样就可以避免兼容问题了（
 "onMenuShareAppMessage","onMenuShareTimeline"对应的老api）


wxConfig = (data,config) => {

    wx.config({
        debug: false, // true，开启，控制台会打印出相关信息，手机上也会弹出alter信息
        appId: data?.appId,// 必填
        timestamp: data?.timestamp,// 必填
        nonceStr: data?.nonceStr,// 必填
        signature: data?.signature,// 必填
        jsApiList: [ // 配置所需调用微信的api
            "updateTimelineShareData",
            "updateAppMessageShareData",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
        ]
    });

    wx.checkJsApi({
        jsApiList: [
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
        ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });

    wx.ready(function () {

        wx.onMenuShareAppMessage({
            ...config,
            success: function () {

            }
        });

        wx.onMenuShareTimeline({
            ...config,
            success: function () {

            }
        });

        wx.updateAppMessageShareData({
            ...config,
            success: function () {

            }
        });

        wx.updateTimelineShareData({
            ...config,
            success: function () {

            }
        })

    });

    wx.error(function(res){
    });
};

3.微信二次分享时，自定义内容不生效

原因：

微信二次分享时，微信会自动向当前页面url中添加参数，例如：https://localhost:8080/login
微信二次分享时的连接为：https://localhost:8080/login?form=...等内容，
与生成wx.config参数时所需要的页面url产生差异，所以导致二次分享自定义内容失效


解决办法：

在html文件中重置一下路由
例如：
if(window.location.href.includes("from=")){
        window.location.href = "https://localhost:8080/login"
   }