您现在的位置是：首页 > 文章详情

微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

日期：2017-06-15点击：585收藏

对微信的JSSDK进行封装一下，创建一份类似的文件结构，增加index.html与shareApi.js文件，结构如图3.3所示。

图3.3 3.2节文件结构

另外，提醒读者一下，wxJSSDK.js文件的JSSDK环境配置中，需要更改一下配置参数，代码如下：

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

index.html文件增加如下代码(HTML5网页)：

01	<!DOCTYPE html>
02	<html lang="en">
03	<head>
04		<meta charset="UTF-8">
05		<title>第3章 3.2节 分享接口的作用</title>
06	    <!--依赖文件：jQuery-->
07	    <script src="./js/jquery-1.11.2.min.js"></script>
08	    <!--依赖文件：微信的JSSDK源文件-->
09	    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
10	    <!--依赖文件：coolie-->
11	    <script src="./js/cookie.js"></script>
12	    <!--JSSDK的环境-->
13	    <script src="./js/wxJSSDK.js"></script>
14	    <!--引入检测API的分享接口-->
15	    <script src="./shareApi.js"></script>
16	</head>
17	<body>
18	    <h1 style="font-size: 40px">:)</h1>
19	    <b style="font-size: 20px">分享接口的作用！</b>
20	</body>
21	</html>

shareApi.js增加分享API的测试封装方案代码：
01	/*声明：
02	        为了方便读者朋友，这里省略配置环境，直接写检测代码。
03	 */
04	
05	/*
06	 函数名称：wxJSSDK.shareApi
07	 函数功能：为wxJSSDK增加分享模块
08	 参数：
09	    shareList（Array） 必选项，待分享的API配置表
10	 */
11	wxJSSDK.shareApi = function(shareList){
12	    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕
13	
14	        // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
15	        if(shareList.onMenuShareTimeline){
16	            var ParametersTimeline = shareList.onMenuShareTimeline;
17	            wx.onMenuShareTimeline({
18	                title: ParametersTimeline.title, 		// 分享标题
19	                link: ParametersTimeline.link, 		// 分享链接
20	                imgUrl: ParametersTimeline.imgUrl, 	// 分享图标
21	                success: function () {
22	                    // 用户确认分享后执行的回调函数
23	                    ParametersTimeline.success && ParametersTimeline.success();
24	                },
25	                cancel: function () {
26	                    // 用户取消分享后执行的回调函数
27	                    ParametersTimeline.cancel && ParametersTimeline.cancel();
28	                }
29	            });
30	        }
31	
32	        // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
33	        if(shareList.onMenuShareAppMessage){
34	            var ParametersAppMessage = shareList.onMenuShareAppMessage;
35	            wx.onMenuShareAppMessage({
36	                title: ParametersAppMessage.title, 	// 分享标题
37	                desc: ParametersAppMessage.desc, 	// 分享描述
38	                link: ParametersAppMessage.link, 	// 分享链接
39	                imgUrl: ParametersAppMessage.imgUrl, // 分享图标
40	                type: ParametersAppMessage.type, 	// 分享类型，music、video或link， 
41	不填默认为link
42	                dataUrl:  ParametersAppMessage.dataUrl, // 如果type是music或video，
43	则要提供数据链接，默认为空
44	                success: function () {
45	                    // 用户确认分享后执行的回调函数
46	                    ParametersAppMessage.success && 
47	ParametersAppMessage.success();
48	                },
49	                cancel: function () {
50	                    // 用户取消分享后执行的回调函数
51	                    ParametersAppMessage.cancel && ParametersAppMessage.cancel();
52	                }
53	            });
54	        }
55	
56	        // 获取“分享到QQ”按钮点击状态及自定义分享内容接口
57	        if(shareList.onMenuShareQQ){
58	            var ParametersQQ = shareList.onMenuShareQQ;
59	            wx.onMenuShareQQ({
60	                title: ParametersQQ.title, 			// 分享标题
61	                desc: ParametersQQ.desc, 			// 分享描述
62	                link: ParametersQQ.link, 			// 分享链接
63	                imgUrl: ParametersQQ.imgUrl, 		// 分享图标
64	                success: function () {
65	                    // 用户确认分享后执行的回调函数
66	                    ParametersQQ.success && ParametersQQ.success();
67	                },
68	                cancel: function () {
69	                    // 用户取消分享后执行的回调函数
70	                    ParametersQQ.cancel && ParametersQQ.cancel();
71	                }
72	            });
73	        }
74	
75	        // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
76	        if(shareList.onMenuShareWeibo){
77	            var ParametersWeibo = shareList.onMenuShareWeibo;
78	            wx.onMenuShareWeibo({
79	                title: ParametersWeibo.title, 			// 分享标题
80	                desc: ParametersWeibo.desc, 		// 分享描述
81	                link: ParametersWeibo.link,			// 分享链接
82	                imgUrl: ParametersWeibo.imgUrl, 	// 分享图标
83	                success: function () {
84	                    // 用户确认分享后执行的回调函数
85	                    ParametersWeibo.success && ParametersWeibo.success();
86	                },
87	                cancel: function () {
88	                    // 用户取消分享后执行的回调函数
89	                    ParametersWeibo.cancel && ParametersWeibo.cancel();
90	                }
91	            });
92	        }
93	
94	    }else{
95	        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用检测API服
96	务。");
97	    }
98	
99	}
100	
101	// 成功初始化后执行API分享事务
102	wxJSSDK.readySuccessCall.push(function(){
103	    var title = "HTML5外包，HTML5外包，HTML5是我们的生活，值得信赖的HTML5解决
104	方案提供商！",
105	        link = "http://www.html5waibao.com",
106	        imgUrl = "http://www.html5waibao.com/p_w_picpaths/logo_35.png",
107	        desc = "html5外包,HTML5外包,html5外宝,html5活,html5手机网站",
108	        success = function(){
109	            alert("分享成功回调");
110	        },
111	        cancel = function(){
112	            alert("分享失败回调");
113	        };
114	    wxJSSDK.shareApi({
115	        onMenuShareTimeline : {		// 分享到朋友圈
116	            title: title, 				// 分享标题
117	            link: link, 				// 分享链接
118	            imgUrl: imgUrl, 			// 分享图标
119	            success: function () {
120	                success();
121	
122	            },
123	            cancel: function () {
124	                cancel();
125	
126	            }
127	        },
128	        onMenuShareAppMessage:{
129	            title: title, 				// 分享标题
130	            desc: desc,				// 分享描述
131	            link: link, 				// 分享链接
132	            imgUrl: imgUrl, 			// 分享图标
133	            type: "link", // 分享类型，music、video或link，不填默认为link
134	            dataUrl:  "", // 如果type是music或video，则要提供数据链接，默认为空
135	            success: function () {
136	                success();
137	            },
138	            cancel: function () {
139	                cancel();
140	            }
141	        },
142	        onMenuShareQQ:{
143	            title: title, 			// 分享标题
144	            desc: desc,			// 分享描述
145	            link: link, 			// 分享链接
146	            imgUrl: imgUrl, 		// 分享图标
147	            success: function () {
148	                success();
149	            },
150	            cancel: function () {
151	                cancel();
152	            }
153	        },
154	        onMenuShareWeibo:{
155	            title: title, 			// 分享标题
156	            desc: desc, 			// 分享描述
157	            link: link, 			// 分享链接
158	            imgUrl: imgUrl, 		// 分享图标
159	            success: function () {
160	                success();
161	            },
162	          cancel: function () {
163	                cancel();
164	            }
165	        }
166	    });
167	});