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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信公众平台网页开发实战--1.微信分享一个网页到朋友圈相关的知识,希望对你有一定的参考价值。

   对微信的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/images/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	});



【代码解释】



  • 为“wxJSSDK”增加“shareApi”方法。

  • 以对象的参数形式,为调用“shareApi”方法的使用者配置具体的JSSDK的API。

  • 分别进行配置填充。

  • 用“wxJSSDK.readySuccessCall.push”增加JSSDK分享API的测试用例。


 打开手机会看到如图3.4所示的UI。点击右上角的分享到朋友圈按钮,会看到如图3.5所示的UI。如果分享成功会弹出对应的提示,如图3.6所示。

技术分享

图3.4  测试用例分享界面                         

技术分享

图3.5  分享到朋友圈UI

技术分享


图3.6  分享到朋友圈成功提示


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

技术分享


以上是关于微信公众平台网页开发实战--1.微信分享一个网页到朋友圈的主要内容,如果未能解决你的问题,请参考以下文章

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

H5网页如何在微信中自定义分享链接(可设置标题+简介+图片)

微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

微信公众号分享到朋友圈的实现方式

微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)