微信民众平台网页开辟实战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
02
03
04
05
06
07
08
09 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夹杂开辟解密》

迎接一同交换本书