WeChat開発実践共有機能-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

WeChat開発実践共有機能

PHP中文网

Jun 20, 2017 pm 01:57 PM

実戦プラットホーム開発するウェブページ

要件を理解すると、次のように分類できます:

(1) WeChat 携帯電話ユーザーは WeChat の JSSDK を使用できます。

(2) 画像を選択し、JSSDKの「chooseImage」を使用します。画像を共有する際はローカルアドレスを共有できないため、JSSDKの「uploadImage」も必要です。

(3) Momentsへの共有にはJSSDKの「onMenuShareTimeline」が必要です。

合わせて、ビジネスロジックを図 4.5 に示します。

図 4.5 ビジネスロジック構造図

まず、JSSDK 環境をこのセクションのディレクトリにコピーし、index.html ファイルと imageSharing.js ファイルを作成します。ディレクトリ構造は図 4.6 に示されています。

図 4.6 セクション 4.2 ディレクトリ構造

JSSDK 環境の構成ファイルを変更します。コードは次のとおりです:

01	jsApiList: [ // 必填，需要使用的JS接口列表，所有JS接口列表见附录B
02	    "chooseImage",
03	    "previewImage",
04	    "uploadImage",
05	    "onMenuShareTimeline"
06	]
07	//其他代码略

要件に従って、「id」が「chooseImage」と等しいクリックボタンを構築します。選択した画像のコンテナを表示するには、index.html ファイルに次のコードを追加します。

01	<!DOCTYPE html>
02	<html lang="en">
03	<head>
04		<meta charset="UTF-8">
05	    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
06	minimum-scale=1, maximum-scale=1.0, user-scalable=no">
07	    <title>第4章 4.2节-实例：从手机相册中选照片然后分享</title>
08	    <!--依赖文件：jQuery-->
09	    <script src="./js/jquery-1.11.2.min.js?1.1.10"></script>
10	    <!--依赖文件：微信的JSSDK源文件-->
11	    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js?1.1.10"></script>
12	    <!--依赖文件：coolie-->
13	    <script src="./js/cookie.js?1.1.10"></script>
14	    <!--JSSDK的环境-->
15	    <script src="./js/wxJSSDK.js?1.1.10"></script>
16	    <!--引入检测API的图像服务-->
17	    <script src="imageSharing.js?1.1.10"></script>
18	    <style>
19	        input{
20	            width: 100%;
21	            padding: 0.2em;
22	            background-color: #5eb95e;
23	            font-size: 1.4em;
24	            background-image: linear-gradient(to bottom, #62c462, #57a957);
25	            background-repeat: repeat-x;
26	            color: #ffffff;
27	            text-align: center;
28	            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29	            border-radius: 0.3em;
30	        }
31	    </style>
32	</head>
33	<body>
34	    <h1 id="">:)</h1>
35	    <b style="font-size: 2em">实例：从手机相册中选照片然后分享，支持选择1张图片！
36	</b><br /><br />
37	    <p id="imageContainer" style="text-align: center;width: 100%"></p>
38	    <p id="selectImg" style="color: #5eb95e;text-align: center">没有自定义分享图片</p>
39	    <input type="button" value="请选择分享图片" id="chooseImage" /><br /><br />
40	</body>
41	</html>

imageSharing.js ファイルに次のようにビジネスコードを追加します。

01	/*
02	 函数名称：wxJSSDK.shareApi
03	 函数功能：为wxJSSDK增加分享模块
04	 参数：
05	 shareList（Array） 必选项，待分享的API配置表
06	 */
07	wxJSSDK.shareApi = function(shareList){
08	    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
09	
10	        //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
11	        if(shareList.onMenuShareTimeline){
12	            var ParametersTimeline = shareList.onMenuShareTimeline;
13	            wx.onMenuShareTimeline({
14	                title: ParametersTimeline.title, 		// 分享标题
15	                link: ParametersTimeline.link,		// 分享链接
16	                imgUrl: ParametersTimeline.imgUrl, 	// 分享图标
17	                success: function () {
18	                    // 用户确认分享后执行的回调函数
19	                    ParametersTimeline.success && ParametersTimeline.success();
20	                },
21	                cancel: function () {
22	                    // 用户取消分享后执行的回调函数
23	                    ParametersTimeline.cancel && ParametersTimeline.cancel();
24	                }
25	            });
26	        }
27	
28	    }else{
29	        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用分享服务。");
30	    }
31	}
32	/*
33	 函数名称：wxJSSDK.imageApi
34	 函数功能：为wxJSSDK增加图像服务
35	 参数：
36	 imageApi 图像API Object 配置
37	 */
38	wxJSSDK.imageApi = function(imageApi){
39	    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
40	        if(imageApi){
41	
42	            imageApi.chooseImage && wx.chooseImage({//拍照或从手机相册中选图接口
43	                success: function (res) {
44	                    imageApi.chooseImage.success && 
45	imageApi.chooseImage.success(res);
46	                }
47	            });
48	
49	            imageApi.previewImage && wx.previewImage({	// 预览图片接口
50	                current: imageApi.previewImage.current, 	// 当前显示的图片链接
51	                urls: imageApi.previewImage.urls 			// 需要预览的图片链接列表
52	            });
53	
54	            imageApi.uploadImage && wx.uploadImage({	// 上传图片接口
55	                localId: imageApi.uploadImage.localId, 		// 需要上传的图片的本地ID，
56	由chooseImage接口获得
57	                isShowProgressTips: imageApi.uploadImage.isShowProgressTips || 1, // 
58	默认为1，显示进度提示
59	                success: function (res) {
60	                    imageApi.uploadImage.success && 
61	imageApi.uploadImage.success(res);
62	                }
63	            });
64	
65	            imageApi.downloadImage && wx.downloadImage({//下载图片接口
66	                serverId:imageApi.downloadImage.serverId, // 需要下载的图片的服务器端
67	ID，由uploadImage接口获得
68	                isShowProgressTips: imageApi.downloadImage.isShowProgressTips || 1, // 
69	默认为1，显示进度提示
70	                success: function (res) {
71	                    imageApi.downloadImage.success && 
72	imageApi.downloadImage.success(res);
73	                }
74	            });
75	        }else{
76	            console.log("缺少配置参数");
77	        }
78	    }else{
79	        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用图像接口服
80	务。");
81	    }
82	
83	}
84	
85	window.onload = function(){
86	    var chooseImageID,	// 拍照或从手机相册中选图接口
87	        shareImage,
88	        uploadImage = function(back){
89	            wxJSSDK.imageApi({	// 上传图片···
90	                uploadImage:{
91	                    localId:chooseImageID.toString(),
92	                    success:function(res){//临时access_token，上传图片成功之后，执行分
93	享操作
94	                   shareImage = 
95	"http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=
96	eQv3HPwEFxwsw8cyh5O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC
97	ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id="+res.serverId; // 返回图片的服务器端ID
98	                        back && back();
99	                    }
100	                }
101	            });
102	        },
103	        shareTimeline = function(){
104	            uploadImage(function(){
105	                wxJSSDK.shareApi({					// 分享图片···
106	                    onMenuShareTimeline : {			// 分享到朋友圈
107	                        title: "实例：从手机相册中选照片然后分享！", // 分享标题
108	                        link: &#39;http://weibo.com/xixinliang&#39;, 	// 分享链接
109	                        imgUrl: shareImage, 			// 分享图标
110	                        success: function () {
111	
112	                        },
113	                        cancel: function () {
114	
115	                        }
116	                    }
117	                });
118	            });
119	        };
120	    $("#chooseImage").click(function(){
121	        wxJSSDK.imageApi({
22	            chooseImage:{
23	                success:function(res){
24	                    chooseImageID =  res.localIds[0]; // 返回选定照片的本地ID列表，
25	localId可以作为img标签的src属性显示图片
26	                    $("#imageContainer").html("<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/001/17c991ba38dceb9bfbf33b6cf0582a8e-2.png?x-oss-process=image/resize,p_40"  class="lazy"  style=&#39;width: 30%&#39; 
27	src=&#39;"+chooseImageID+"&#39;>");
28	                    $("#selectImg").html("已选择图片，请点击右上角分享到朋友圈按钮");
29	                    shareTimeline();
30	                }
31	            }
32	        });
33	    });
34	}

[コードの説明]

は、図 4.7 に示すように、index.html にカスタムイメージを共有するボタンを作成しました。
図 4.8 に示すように、共有ボタンをクリックして JSSDK の画像選択 API を呼び出し、ユーザーが画像を選択できるようにします。

図 4.7 カスタマイズされた写真共有 UI

図 4.8 写真を選択した後の UI

の後、「uploadImage」を呼び出して写真をアップロードします。
アップロードが成功したら、アップロード後にサーバー「serverId」を返し、マルチメディアダウンロードAPIを呼び出し、画像をJSSDK共有API「onMenuShareTimeline」に割り当てます。

図 4.9 と図 4.10 に示すように、ユーザーは共有効果を確認できます。

図 4.9 モーメント編集 UI への共有

図 4.10 カスタム写真のモーメントへの共有の成功

以上がWeChat開発実践共有機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、