微信WeixinJSBridge API使用实例

http://www.jb51.net/article/66642.htm

这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下
 

注意:请在微信中测试

  1 <!DOCTYPE html>
  2 <html>
  3  <head>
  4  <title>微信WeixinJSBridge API</title> 
  5  <meta charset="utf-8" /> 
  6  <script type="text/javascript">
  7 (function(){
  8 var a=document.getElementsByTagName("html")[0];
  9 window.Session={appDomain:a.getAttribute("data-app-domain")||"",staticDomain:a.getAttribute("data-static-domain")||""}
 10 })();
 11   
 12 window.registNS=function(fullNS,isIgnorSelf){
 13 var reg=/^[_$a-z]+[_$a-z0-9]*/i;var nsArray=fullNS.split(".");
 14 var sEval="";
 15 var sNS="";
 16 var n=isIgnorSelf?nsArray.length-1:nsArray.length;
 17 for(var i=0;i<n;i++){
 18   if(!reg.test(nsArray[i])){throw new Error("Invalid namespace:"+nsArray[i]+"");
 19   return
 20   }
 21   if(i!=0){sNS+="."}
 22   sNS+=nsArray[i];
 23   sEval+="if(typeof("+sNS+")==‘undefined‘) "+sNS+"=new Object();
 24   else "+sNS+";"
 25 }
 26 if(sEval!=""){
 27 return eval(sEval)
 28 }
 29 return{}
 30   
 31 };
 32   
 33 </script> 
 34  </head> 
 35  <body>
 36  <section class="mod-page-body"> 
 37   <div class="mod-page-main wordwrap clearfix"> 
 38   <div class="mod-pageheader"></div> 
 39   <div class="mod-pagecontent"> 
 40    <div class="mod-weixinjsapi"> 
 41    <div class="x-desc">
 42     微信客户端自带的Js Api:WeixinJSBridge
 43    </div> 
 44    <div id="WeixinJsApi"> 
 45     <input type="button" id="imagePreview" value="图片预览" /> 
 46     <input type="button" id="profile" value="查看profile" /> 
 47     <a href="weixin://profile/gh_412d74fbb474">企业微信小助手</a> 
 48     <input type="button" id="shareWeibo" value="分享微博" /> 
 49     <input type="button" id="shareFB" value="分享facebook" /> 
 50     <input type="button" id="addContact" value="添加联系人" /> 
 51     <input type="button" id="scanQRCode" value="扫描二维码" /> 
 52     <input type="button" id="jumpToBizProfile" value="跳转到指定公众账号页面" /> 
 53     <input type="button" id="toggleMenuBtn" value="隐藏右上角按钮" /> 
 54     <input type="button" id="toggleToolbar" value="隐藏底部导航栏" /> 
 55     <input type="button" id="getNetType" value="获取网络状态" /> 
 56     <input type="button" id="closeWindow" value="关闭" /> 
 57     <input type="button" id="getBrandWCPayRequest" value="发起公众号微信支付" /> 
 58     <input type="button" id="setPageState" value="设置页面状态" /> 
 59     <input type="button" id="sendEmail" value="发邮件" /> 
 60     <input type="button" id="openSpecificView" value="微信团队打开webView,跳到指定页面" /> 
 61     <input type="button" id="getCanIAPPay" value="getCanIAPPay" /> 
 62     <input type="button" id="getBrandIAPPayRequest" value="发起公众号IAP支付" /> 
 63     <input type="button" id="openUrlByExtBrowser" value="用safari打开指定链接" /> 
 64     <input type="button" id="openProductView" value="跳转微信商品页" /> 
 65     <input type="button" id="openLocation" value="查看地理位置" /> 
 66     <input type="button" id="timelineCheckIn" value="朋友圈签到" /> 
 67     <input type="button" id="getBrandWCPayCreateCreditCardRequest" value="开通微信信用卡" /> 
 68     <input type="button" id="geoLocation" value="获取地理位置" /> 
 69     <input type="button" id="getInstallState" value="获取某app是否安装" /> 
 70     <input type="button" id="editAddress" value="公众号编辑收货地址" /> 
 71     <input type="button" id="getLatestAddress" value="公众号获取最近的收货地址" /> 
 72     <input type="button" id="launch3rdApp" value="启动第三方APP" /> 
 73     <input type="button" id="jumpWCMall" value="跳转微信商品购买界面" /> 
 74     <input type="button" id="addEmoticon" value="添加表情" /> 
 75     <input type="button" id="cancelAddEmoticon" value="取消下载某表情" /> 
 76     <input type="button" id="hasEmoticon" value="查询是否存在某表情" /> 
 77    </div> 
 78    </div> 
 79   </div> 
 80   </div> 
 81  </section> 
 82  <script>
 83 function onBridgeReady() {
 84   WeixinJSBridge.on(‘menu:share:appmessage‘, function(argv) 
 85   {
 86     WeixinJSBridge.invoke(‘sendAppMessage‘,{
 87           "link":"http://m.exmail.qq.com/",
 88           "desc":"desc",
 89           "title":"title for WeiXinJsBridge"
 90     }, function(res) {
 91       WeixinJSBridge.log(res.err_msg);
 92     });
 93   });
 94   WeixinJSBridge.on(‘menu:share:timeline‘, function(argv) 
 95   {
 96   WeixinJSBridge.invoke("shareTimeline",{
 97     "link":"http://m.exmail.qq.com",
 98     "img_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
 99     "img_width":"172",
100     "img_height":"40",
101     "desc":"i am description",
102     "title":"just test from WeixinJsBridge"
103     },
104     function(e){
105     alert(e.err_msg);
106     })
107   });
108 }
109   
110 if (typeof WeixinJSBridge === "undefined"){
111   if (document.addEventListener){
112     document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
113   }
114 }else{
115   onBridgeReady();
116 }
117   
118   var menuHidden=!1,toolbarHidden=!1,netType={"network_type:wifi":"wifi网络","network_type:edge":"非wifi,包含3G/2G","network_type:fail":"网络断开连接","network_type:wwan":"2g或者3g"};
119   document.addEventListener("WeixinJSBridgeReady",function(){
120       document.getElementById("imagePreview").addEventListener(
121       "click",function(){
122                 WeixinJSBridge.invoke("imagePreview",{
123         "urls":[
124         "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
125         "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
126         "http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_workStyle1ca3fe.png"
127         ],
128         "current":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
129         })
130             },!1),
131     document.getElementById("profile").addEventListener(
132       "click",function(){
133         alert("profile clicked");
134         WeixinJSBridge.invoke("profile",{
135           "username":"gh_412d74fbb474",
136           "nickname":"企业微信小助手"  
137         })
138       },!1),
139     document.getElementById("shareWeibo").addEventListener(
140       "click",function(){
141         WeixinJSBridge.invoke("shareWeibo",{
142           "type":"link",
143           "link":"http://m.exmail.qq.com"
144         },
145         function(e){
146           alert(e.err_msg);
147         })
148       },!1),
149     document.getElementById("shareFB").addEventListener(
150       "click",function(){
151         WeixinJSBridge.invoke("shareFB",{
152           "link":"http://m.exmail.qq.com"
153         })
154       },!1),
155     document.getElementById("scanQRCode").addEventListener(
156       "click",function(){
157         WeixinJSBridge.invoke("scanQRCode",{
158         })
159       },!1),
160     document.getElementById("addEmoticon").addEventListener(
161       "click",function(){
162         WeixinJSBridge.invoke("addEmoticon",{
163           "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
164           "thumb_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png"
165   
166         },
167         function(e){
168                     alert(e.err_msg);
169                 })
170       },!1),
171     document.getElementById("cancelAddEmoticon").addEventListener(
172       "click",function(){
173         WeixinJSBridge.invoke("cancelAddEmoticon",{
174           "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
175   
176         },
177         function(e){
178                     alert(e.err_msg);
179                 })
180       },!1),
181     document.getElementById("hasEmoticon").addEventListener(
182       "click",function(){
183         WeixinJSBridge.invoke("hasEmoticon",{
184           "url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
185   
186         },
187         function(e){
188                     alert(e.err_msg);
189                 })
190       },!1),
191     document.getElementById("addContact").addEventListener(
192       "click",function(){
193         WeixinJSBridge.invoke("addContact",{
194           "webtype":"1",
195           "username":"gh_412d74fbb474"
196         },
197         function(e){
198           alert(e.err_msg);
199         })
200       },!1),
201     document.getElementById("jumpToBizProfile").addEventListener(
202       "click",function(){
203         WeixinJSBridge.invoke("jumpToBizProfile",{
204           "tousername":"gh_2248a2ade13e"
205         },
206         function(e){
207           alert(e.err_msg);
208         })
209       },!1),
210     document.getElementById("toggleMenuBtn").addEventListener(
211       "click",function(){
212         menuHidden?
213         (WeixinJSBridge.call("showOptionMenu"),menuHidden=!1,this.value="隐藏右上角按钮")
214         :
215         (WeixinJSBridge.call("hideOptionMenu"),menuHidden=!0,this.value="显示右上角按钮")
216       },!1),
217     document.getElementById("toggleToolbar").addEventListener(
218       "click",function(){
219         toolbarHidden?
220         (WeixinJSBridge.call("showToolbar"),toolbarHidden=!1,this.value="隐藏底部导航栏")
221         :
222         (WeixinJSBridge.call("hideToolbar"),toolbarHidden=!0,this.value="显示底部导航栏")
223       },!1),
224     document.getElementById("getNetType").addEventListener(
225       "click",function(){
226         WeixinJSBridge.invoke("getNetworkType",{},
227           function(e){
228             alert(netType[e.err_msg])
229           })
230       },!1),
231      document.getElementById("closeWindow").addEventListener(
232             "click",function(){
233                 WeixinJSBridge.invoke("closeWindow",{},function(e){})
234             },!1),
235     document.getElementById("getBrandWCPayRequest").addEventListener(
236       "click",function(){
237       WeixinJSBridge.invoke("getBrandWCPayRequest",{
238         "appId" : "wxf8b4f85f3a794e77", //公众号名称,由商户传入
239         "timeStamp" : "189026618", //时间戳 这里随意使用了一个值
240         "nonceStr" : "adssdasssd13d", //随机串
241         "package" :
242         "body=xxx&fee_type=1&input_charset=GBK¬ify_url=http&out_trade_no=16642817866003386000&partner=1900000109&return_url=http&spbill_create_ip=127.0.0.1&total_fee=1&sign=273B7EEEE642A8E41F27213D8517E0E4", //扩展字段,由商户传入
243         "signType" : "SHA1", //微信签名方式:sha1
244         "paySign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8" //微信签名
245         },
246         function(e){
247           alert(e.err_msg)
248         })
249       },!1),
250     document.getElementById("setPageState").addEventListener(
251       "click",function(){
252       WeixinJSBridge.invoke("setPageState",{
253         "state" : "1"
254         })
255       },!1),
256   
257     document.getElementById("sendEmail").addEventListener(
258       "click",function(){
259       WeixinJSBridge.invoke("sendEmail",{
260         "title" : "title!",
261         "content" : "i am an Email!", //时间戳 这里随意使用了一个值
262         },
263         function(e){
264     //     alert(e.err_msg)
265         })
266       },!1),
267     document.getElementById("openSpecificView").addEventListener(
268       "click",function(){
269       WeixinJSBridge.invoke("openSpecificView",{
270         "specificview" : "contacts"
271         },
272         function(e){
273           alert(e.err_msg)
274         })
275       },!1),
276     document.getElementById("getCanIAPPay").addEventListener(
277       "click",function(){
278       WeixinJSBridge.invoke("getCanIAPPay",{ },
279         function(e){
280           alert(e.err_msg)
281         })
282       },!1),
283     document.getElementById("getBrandIAPPayRequest").addEventListener(
284       "click",function(){
285       WeixinJSBridge.invoke("getBrandIAPPayRequest",{
286         "appId" : "wxf8b4f85f3a794e77", //公众号名称,由商户传入
287         "timeStamp" : "189026618", //时间戳 这里随意使用了一个值
288         "nonceStr" : "adssdasssd13d", //随机串
289         "package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign=CF8922F49431FFE8A1834D0B32B25CE3",
290         //扩展字段,由商户传入
291         "signType" : "SHA1", //微信签名方式:sha1
292         "paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信签名
293         },
294         function(e){
295           alert(e.err_msg)
296         })
297       },!1),
298     document.getElementById("openLocation").addEventListener(
299       "click",function(){
300       WeixinJSBridge.invoke("openProductView",{  
301         "latitude" : 23.113, //纬度
302         "longitude" : 113.23, //经度
303         "name" : "TIT创意园", //POI名称
304         "address" : "广州市海珠区新港中路397号", //地址
305         "scale" : 14, //地图缩放级别
306         "infoUrl" : "http://weixin.qq.com/", //查看位置界面底部的超链接        
307         },
308         function(e){
309           alert(e.err_msg)
310         })
311       },!1),
312     document.getElementById("timelineCheckIn").addEventListener(
313       "click",function(){
314       WeixinJSBridge.invoke("timelineCheckIn",{  
315         "img_url": "http://mmsns.qpic.cn/mmsns/RLllkTm3DUdV24xbZnKicx9jJWxXI0Bq84zzbtibGuRyk/0", // 分享到朋友圈的缩略图
316         "img_width": "640", // 图片的长度
317         "img_height": "640", // 图片高度
318         "link": "http://news.qq.com/zt2012/cxkyym/index.htm", // 连接地址
319         "desc": "这个是描述啊啊", // 描述
320         "title": "朝鲜称中国渔船越界捕捞", // 分享标题
321         "latitude" : 23.113, //纬度
322         "longitude" : 113.23, //经度
323         "poiId" : "dianping_2331037", //商户id
324         "poiName" : "TIT创意园", //POI名称
325         "poiAddress" : "广州市海珠区新港中路397号", //地址
326         "poiScale" : 14, //地图缩放级别
327         "poiInfoUrl" : "http://weixin.qq.com/" //查看位置界面底部的超链接
328         },
329         function(e){
330           alert(e.err_msg)
331         })
332       },!1),
333     document.getElementById("geoLocation").addEventListener(
334       "click",function(){
335       WeixinJSBridge.invoke("geoLocation",{  
336         },
337         function(e){
338           alert(e.err_msg)
339         })
340       },!1),
341     document.getElementById("getBrandWCPayCreateCreditCardRequest").addEventListener(
342       "click",function(){
343       WeixinJSBridge.invoke("getBrandWCPayCreateCreditCardRequest",{ 
344         "appId" : "wxf8b4f85f3a794e77", //公众号名称,由商户传入
345         "timeStamp" : "189026618", //时间戳 这里随意使用了一个值
346         "nonceStr" : "adssdasssd13d", //随机串
347         "package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign= CF8922F49431FFE8A1834D0B32B25CE3",
348         //扩展字段,由商户传入
349         "signType" : "SHA1", //微信签名方式:sha1
350         "paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信签名
351         },
352         function(e){
353           alert(e.err_msg)
354         })
355       },!1),
356     document.getElementById("getInstallState").addEventListener(
357       "click",function(){
358       WeixinJSBridge.invoke("getInstallState",{  
359           "packageUrl":"teamcircle://"
360         },
361         function(e){
362           alert(e.err_msg)
363         })
364       },!1),
365     document.getElementById("openProductView").addEventListener(
366       "click",function(){
367       WeixinJSBridge.invoke("openProductView",{  
368           "productInfo":"json"
369         },
370         function(e){
371           alert(e.err_msg)
372         })
373       },!1),
374     document.getElementById("getLatestAddress").addEventListener(
375         "click",function(){
376         WeixinJSBridge.invoke("getLatestAddress",{ 
377           "appId" : "wxf8b4f85f3a794e77", //公众号名称,由商户传入
378           "timeStamp" : "189026618", //时间戳 这里随意使用了一个值
379           "nonceStr" : "adssdasssd13d", //随机串
380           "signType" : "SHA1", //微信签名方式:sha1
381           "addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信签名
382           "scope"  : "snsapi"
383         },
384         function(e){
385           alert(e.err_msg)
386         })
387       },!1),
388     document.getElementById("editAddress").addEventListener(
389         "click",function(){
390         WeixinJSBridge.invoke("editAddress",{  
391           "appId" : "wxf8b4f85f3a794e77", //公众号名称,由商户传入
392           "timeStamp" : "189026618", //时间戳 这里随意使用了一个值
393           "nonceStr" : "adssdasssd13d", //随机串
394           "signType" : "SHA1", //微信签名方式:sha1
395           "addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信签名
396           "scope"  : "snsapi"
397         },
398         function(e){
399           alert(e.err_msg)
400         })
401       },!1),
402     document.getElementById("launch3rdApp").addEventListener(
403         "click",function(){
404         WeixinJSBridge.invoke("launch3rdApp",{ 
405           "appId" : "wx5823bf96d3bd56c7", //公众号名称,由商户传入
406         },
407         function(e){
408           alert(e.err_msg)
409         })
410       },!1),
411     document.getElementById("jumpWCMall").addEventListener(
412         "click",function(){
413         WeixinJSBridge.invoke("jumpWCMall",{  
414           "appId" : "wx5823bf96d3bd56c7", //公众号名称,由商户传入
415           "funcId":"1000"
416         },
417         function(e){
418           alert(e.err_msg)
419         })
420       },!1),
421     document.getElementById("openUrlByExtBrowser").addEventListener(
422       "click",function(){
423       WeixinJSBridge.invoke("openUrlByExtBrowser",{
424         "url" : "http://m.exmail.qq.com"
425         },
426         function(e){
427           alert(e.err_msg)
428         })
429       },!1)
430     }
431   );
432 </script> 
433  </body>
434 </html>

 

微信WeixinJSBridge API使用实例

上一篇:重磅!阿里云携手生态发布工业大脑多款一体机新品


下一篇:你的故事有毒 微信源码