Update: from May 2018, jithis will turn off sharing function. Please use http://sharesdk.mob.com/ Or search other social sharing Libraries
When developing web pages, we often encounter sharing functions. At this time, we can use ready-made tools such as JiaThis , share and share functions can be realized through simple configuration of several steps.
For example, I want to generate icon like sharing
image.png The basic code is as follows:
<!-- JiaThis Button BEGIN --> <div> <span>Share to:</span> <a>QQ space</a> <a>Sina Weibo</a> <a>Tencent meager</a> <a>Renren net</a> <a>Kaixin</a> <a href="http://Www.jiatis.com/share "class =" jiatis jiatis "TXT jiatis" separator jtico jtico "jiatis" target = "blank" > more</a> <a></a> </div> <script type="text/javascript" > var jiathis_config={ url:"http://www.jianshu.com", summary:"Sharing summaries", title:"Share title ##", shortUrl:false, hideMore:false } </script> <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script> <!-- JiaThis Button END -->
Roughly divided into three parts
Share icon html template, jiaatis config configuration object, http://v3.jiaatis.com/code/jia.js class library
According to the idea of Vue components, it is now packaged as a component for future use in other projects.
If it is Vue cli, create a new Share.vue. The content is simple as follows. template is empty, because customization may require external input. The component must have a config attribute, which is a configuration item object. I hung config under window, which may be risky. But there is no better way.
<template> </template> <script> // User defined Daquan of JiaThis button // http://www.jiathis.com/customize export default { name: 'share', props: { config: { type: Object, required: true }, }, mounted: function () { // Optimization is needed here window.jiathis_config = Object.assign({ url: "http://www.jiathis.com", summary: "Sharing summaries", title: "Share title", shortUrl: false, hideMore: false }, this.config) // Here we need vue to introduce jquery // http://api.jquery.com/jquery.getscript/ $.getScript('http://v3.jiathis.com/code/jia.js') }, computed: { }, methods: { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
Where sharing is needed
In template, note inline-template In this way, the component will take its content as its template. This part needs customization and cannot be written in the share component.
<share :config="shareConfig" inline-template> <div> <a></a> <a></a> <a></a> <a></a> <a href="http://www.jiathis.com/share" target="_blank"></a> <a></a> </div> </share>
image.png