首页 > 代码库 > 微信公众平台网页开发实战--2.从手机相册中选照片然后分享

微信公众平台网页开发实战--2.从手机相册中选照片然后分享

通过对需求的了解,可以将其分解为:

(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接口列表见附录B02	    "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="http://www.mamicode.com/js/jquery-1.11.2.min.js"></script>10	    <!--依赖文件:微信的JSSDK源文件-->11	    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>12	    <!--依赖文件:coolie-->13	    <script src="http://www.mamicode.com/js/cookie.js"></script>14	    <!--JSSDK的环境-->15	    <script src="http://www.mamicode.com/js/wxJSSDK.js"></script>16	    <!--引入检测API的图像服务-->17	    <script src="http://www.mamicode.com/imageSharing.js"></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 style="font-size: 8em">:)</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="http://www.mamicode.com/请选择分享图片" id="chooseImage" /><br /><br />40	</body>41	</html>           

在imageSharing.js文件中增加处理业务的代码如下:

01	/*02	 函数名称:wxJSSDK.shareApi03	 函数功能:为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.imageApi34	 函数功能:为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_O3LCC97	ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id="+res.serverId; // 返回图片的服务器端ID98	                        back && back();99	                    }100	                }101	            });102	        },103	        shareTimeline = function(){104	            uploadImage(function(){105	                wxJSSDK.shareApi({					// 分享图片···106	                    onMenuShareTimeline : {			// 分享到朋友圈107	                        title: "实例:从手机相册中选照片然后分享!", // 分享标题108	                        link: ‘http://weibo.com/xixinliang‘, 	// 分享链接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 style=‘width: 30%‘ 27	src=http://www.mamicode.com/‘"+chooseImageID+"‘>");28	                    $("#selectImg").html("已选择图片,请点击右上角分享到朋友圈按钮");29	                    shareTimeline();30	                }31	            }32	        });33	    });34	}

【代码解释】

 

  • 在index.html中,创建了一个分享自定义图片的按钮,如图4.7所示。
  • 点击分享按钮,调用JSSDK的选择图片API,让用户选中图片,如图4.8所示。

 

技术分享

图4.7  自定义分享图片UI  

技术分享

 图4.8  选择图片之后的UI

 

  • 之后,调用“uploadImage”上传图片。
  • 上传成功之后,返回上传之后的服务端“serverId”,再调用下载多媒体的API,将图片赋值给JSSDK的分享API“onMenuShareTimeline”。

 

 用户可以查看分享效果,如图4.9和图4.10所示。

技术分享

图4.9  分享到朋友圈编辑的UI  

技术分享

图4.10  成功分享自定义图片到朋友圈


《微信公众平台网页开发实战——HTML5+JSSDK混合开发解密》

技术分享

 

欢迎一起交流本书

技术分享

微信公众平台网页开发实战--2.从手机相册中选照片然后分享