Implementation of secondary sharing of Html5 pages

This article mainly introduces the relevant information about the implementation of secondary sharing of Html5 pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Secondary sharing is quite important for H5 pages. After all, QQ or WeChat habitually uses its own sharing function after it is sent out. Different from the PC side, the PC directly copies the address. I was making invitations two days ago, and I encountered a lot of mistakes. Personal development and corporate development are still different. Various issues and other issues should be mentioned in the postscript of an invitation. Let's get down to business.

WeChat secondary sharing

WeChat’s documentation is pretty good. If you read the whole article, you can basically avoid a lot of pitfalls (remember that WeChat documents are used to write some pitfalls at the end instead of putting them together)

Let me first talk about how to do it on WeChat Secondary sharing of

document address, by introducing the official API. The documentation is pretty good, just pass it in shareInfo.

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: sign.appid, // 必填，公众号的唯一标识
    timestamp: sign.timestamp, // 必填，生成签名的时间戳
    nonceStr: sign.nonceStr, // 必填，生成签名的随机串
    signature: sign.signature, // 必填，签名，见附录1
    jsApiList: [
            &#39;onMenuShareTimeline&#39;,
            &#39;onMenuShareAppMessage&#39;,
            &#39;onMenuShareQQ&#39;,
            &#39;onMenuShareWeibo&#39;,
            &#39;onMenuShareQZone&#39;
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
    wx.showOptionMenu();
    wx.onMenuShareAppMessage(shareInfo); //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareTimeline(shareInfo); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareQQ(shareInfo); //获取“分享到QQ”按钮点击状态及自定义分享内容接口
    wx.onMenuShareWeibo(shareInfo); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    wx.onMenuShareQZone(shareInfo); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
});

Are there any pitfalls in secondary sharing on WeChat?

well? I wrote it correctly, why doesn't it work? There is no requirement written down in the document?

First check WeChat Public Platform-Development-Interface Permissions and find that those who do not have permissions are prompted that they have not been obtained. Then go for WeChat authentication. My sharing interface prompts that I have obtained it. What was said above? WeChat’s documentation can be viewed at the back, and there are generally instructions. This is the sentence below, then the problem arises, personal account cannot be authenticated.

Cannot be shared on both iOS and Android (please confirm that the official account has been authenticated. Only certified official accounts have the permission to share related interfaces. If it is indeed authenticated, check whether the listening interface is in the wx.ready callback function Triggered in)

About api adjustment failure error sorting

• invalid url domain, my question is js secure domain name is not working

• invalid url signature, my problem is that jsapi_ticket is not updated

• WeChat JS interface signature verification tool

QQ second sharing first let’s talk about the documents

Documents circulating on the Internet, what api, I tried it, but it doesn't work. Enter through the address, and the final maintenance is for 15 years or something.

How to set up secondary sharing

The most scientific way is to use meta tags.

<meta itemprop="name" content="标题" />
<meta itemprop="image" content="副标题" />
<meta name="description" itemprop="description" content="分享图" />

Is there anything you should pay attention to

This meta tag cannot be added later, it must be there when entering the page, which means that you can only use the background template. Otherwise, some Android lower versions cannot pull the summary (yes, some mobile phones can get it dynamically), and iOS does not support it.

In fact, technical articles are time-sensitive

This article was written on July 30, 2018

Tested on July 30, 2018

Summary: The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Implementation of secondary sharing of Html5 pages. For more information, please follow other related articles on the PHP Chinese website!