微信開發實戰之分享功能-H5教程-PHP中文網

首頁

web前端

H5教程

微信開發實戰之分享功能

PHP中文网

Jun 20, 2017 pm 01:57 PM

實戰平台開發網頁

透過對需求的了解，可以將其分解為：

（1）微信端手機用戶，可以使用微信的JSSDK。

（2）選取圖片，使用JSSDK的“chooseImage”，由於分享圖片時本地地址無法分享，因此也需要JSSDK的“uploadImage”。

（3）分享到朋友圈，需要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	}

【程式碼解釋】

#在index.html中，創建了一個分享自訂圖片的按鈕，如圖4.7所示。
點選分享按鈕，呼叫JSSDK的選擇圖片API，讓使用者選取圖片，如圖4.8所示。

## 圖4.8 選擇圖片之後的UI

#之後，呼叫「uploadImage」上傳圖片。

上傳成功之後，返回上傳之後的服務端“serverId”，再呼叫下載多媒體的API，將圖片賦值給JSSDK的分享API“onMenuShareTimeline”。

使用者可以查看分享效果，如圖4.9、圖4.10所示。

###圖4.9 分享到朋友圈編輯的UI ###############圖4.10 成功分享自訂圖片到朋友圈# ##

以上是微信開發實戰之分享功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee