ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート

WBOY
リリース: 2016-05-16 08:59:54
オリジナル
4874 人が閲覧しました

現在、JiaThis、bShare 共有、さらには Baidu 共有などの大手企業など、主流の共有ツールが多数ありますが、それらはまだ PC 側でのみ共有しており、携帯電話のサポートはあまり良くありません。

多くのモバイル ブラウザーには、UC ブラウザーや QQ ブラウザーなどの共有コンポーネントが組み込まれていることは誰もが知っています。組み込みコンポーネント共有により、対応する APP 共有を直接開始できます。JS がブラウザーの組み込みコンポーネントを呼び出すことができる場合コンポーネントを共有するのは素晴らしいですね。

人々の中には専門家もいます。以下の Script House の編集者が、この兄弟が作成した JS ライブラリを紹介します。

1. ツールの紹介nativeShare.js

JavaScript を通じてネイティブ共有を直接呼び出すことができるツール。このツールには次の特徴があります。

1. ネイティブ Weibo、WeChat フレンド、WeChat モーメント、QQ フレンド、QQ スペース共有をサポートします
2. ブラウザの共有機能の呼び出しをさらにサポート
3. jqueryやその他のプラグインに依存しません
注: 現在、モバイル UC ブラウザと QQ ブラウザのみがサポートされています

github プロジェクトのアドレス: https://github.com/JefferyWang/nativeShare.js
Git@OSC プロジェクトのアドレス: http://git.oschina.net/wangjunfeng/nativeShare.js

2. 使用方法

1.CSS ファイルを導入する

コードをコピー コードは次のとおりです。


2. 共有を追加する必要がある場所に次のコードを挿入します。

コードをコピー コードは次のとおりです。


3. 構成情報を追加してインスタンス化する

コードをコピー コードは次のとおりです。

<script><br> var config = {<br><a href="'http://blog.wangjunfeng.com',//">url:'http://blog.wangjunfeng.com',// 共有ウェブ リンク<br> title:'王俊峰の個人ブログ', // タイトル<br> desc:'Wang Junfeng の個人ブログ',//説明<br> img:'http://www.wangjunfeng.com/img/face.jpg',// 画像<br> img_title:'王俊峰の個人ブログ',//画像のタイトル<br> 出典:「王俊峰ブログ」 // 出典<br> };<br> var share_obj = 新しいnativeShare('nativeShare',config);<br> </script>

3. デモのスクリーンショット

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 1: Sina Weibo への共有

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 2: WeChat モーメントへの共有

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 3: WeChat で連絡先と共有する

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 4: 連絡先への QQ 共有

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 5: スペースへの QQ 共有

ネイティブJavaScriptで友達サークルへの共有機能を実現し、iosとandroid_javascriptスキルをサポート
図 6: ブラウザの組み込み共有コンポーネントの呼び出し

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート