微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

68 阅读 0 评论 45 点赞

我是靠谱客的博主健忘摩托，最近开发中收集的这篇文章主要介绍微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本书是分享微信jssdk开发的第二篇。

4.2.1 项目需求

需求说明：实现微信端的手机用户，点击按钮选取1张图片，分享到朋友圈。

4.2.2 需求分解

通过对需求的了解，可以将其分解为：

（1）微信端手机用户，可以使用微信的JSSDK。

（2）选取图片，使用JSSDK的“chooseImage”，由于分享图片本地地址无法分享，因此还需要JSSDK的“uploadImage”。

（3）分享到朋友圈，需要JSSDK的“onMenuShareTimeline”。

（4）综合起来，业务逻辑请查看图4.5。

图4.5 业务逻辑结构图

4.2.3 代码实现

首先将JSSDK的环境复制一份，到本节目录下，创建index.html文件、imageSharing.js文件，目录结构如图4.6。

图4.6

4.2节目录结构

修改一下JSSDK环境的配置文件，代码如下：

jsApiList: [ // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
"chooseImage",
"previewImage",
"uploadImage",
"onMenuShareTimeline"
]
//其他代码略

依据需求，构建一个“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"></script>
10
<!--依赖文件：微信的JSSDK源文件-->
11
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
12
<!--依赖文件：coolie-->
13
<script src="./js/cookie.js"></script>
14
<!--JSSDK的环境-->
15
<script src="./js/wxJSSDK.js"></script>
16
<!--引入检测API的图像服务-->
17
<script src="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="请选择分享图片" 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: '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='"+chooseImageID+"'>");
28
$("#selectImg").html("已选择图片，请点击右上角分享到朋友圈按钮");
29
shareTimeline();
30
}
31
}
32
});
33
});
34	}

【代码解释】

l 在index.html中，创建了一个分享自定义图片的按钮，如图4.7所示。

l 点击分享按钮，调用JSSDK的选择图片API，让用户选中图片，如图4.8所示。

l 之后，调用“uploadImage”上传图片。

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