如何实现微信中的分享功能

发布网友发布时间：2022-04-19 16:06

我来回答

共3个回答

懂视网时间：2022-05-12 06:41

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

（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 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	}

【代码解释】

在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 成功分享自定义图片到朋友圈

热心网友时间：2022-05-12 03:49

微信公众号不能直接分享，微信公共号主要是用来群发信息的。解决方法：可以把自己的微信公共账号或者二维码制作成网页，然后分享该网页给其他用户。也可以通过网络推广等手段推广自己的微信公共账号的网页，提高微信公共账号知名度和粉丝数量。

热心网友时间：2022-05-12 05:07

进入微信开放平台
2
点击页面右上角的“注册”，完成注册。

END
二、微信分享AppID的申请流程

1
点击页面右上方的“管理中心”，进入后，点击“创建移动应用”。

2
按照要求一次填入相关信息。

所有的应用签名统一为：3cdd57368f36104e6b97233e710ec2d2,包名及类名请在您的应用的“修改版权”页面的最下方获取

3
信息填写完成后，点击“提交审核”等待微信审核人员的审核。
4
您可以在“管理中心”中查看审核进度。

END
三、提取应用专用微信分享AppID，实现微信分享

1
审核通过后，在“管理中心”的“已通过审核”的应用中，找出需要的应用，点击“查看详情”。

2
在“查看详情”中，提取微信分享AppID。

3
将提取到的微信分享AppID输入到应用管理的“修改版权”页面的最下方输入框中，重新生成并发布更新即可。

首页

文章

如何实现微信中的分享功能

【代码解释】