微信公衆プラットフォームのホームページ開発実戦--1.微信は1つのホームページを友达の輪に分かち合います
微信のJSDKをカプセル化し、類似のファイル構造を作成し、indexを追加する.htmlとshareApi.jsファイル、構造は図3.3に示す.
図3.3 3.2節ファイル構造
また、読者に注意してください.wxJSDK.jsファイルのJSDK環境構成では、以下のように構成パラメータを変更する必要があります.
index.htmlファイルには次のコード(HTML 5ページ)が追加されています.
【コード 】は「wxJSDK」に「shareApi」メソッドを します. オブジェクトのパラメータ で、「shareApi」メソッドを び すユーザのための のJSDKのAPIが される. は、それぞれ を う. 「wxJSDK.readySuccessCall.push」でJSDK APIのテスト を します.
を くと、 3.4に すUIが されます. の「モーメンツ 」ボタンをクリックすると、 3.5に すUIが されます. に すると、 3.6に すように、 するプロンプトがポップアップされます.
3.4 インタフェース
3.5モーメンツUIへの
3.6モーメンツの のヒントを する
『 プラットフォームウェブページ ——HTML 5+JSDK 』
の を します
図3.3 3.2節ファイル構造
また、読者に注意してください.wxJSDK.jsファイルのJSDK環境構成では、以下のように構成パラメータを変更する必要があります.
01 jsApiList: [ //
02 "onMenuShareTimeline",
03 "onMenuShareAppMessage",
04 "onMenuShareQQ",
05 "onMenuShareWeibo"
06 ] // ， JS ， JS Bindex.htmlファイルには次のコード(HTML 5ページ)が追加されています.
01 html>
02
03
04
05 3 3.2
06
07
08
09 :)
19 ！
20
21
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 });
【コード 】
を くと、 3.4に すUIが されます. の「モーメンツ 」ボタンをクリックすると、 3.5に すUIが されます. に すると、 3.6に すように、 するプロンプトがポップアップされます.
3.4 インタフェース
3.5モーメンツUIへの
3.6モーメンツの のヒントを する
『 プラットフォームウェブページ ——HTML 5+JSDK 』
の を します