WeixinJSBridge API使用实例

  1. <span style="color: rgb(51, 51, 51); font-family: tahoma, arial, 宋体; font-size: 14px; line-height: 21px; background-color: rgb(246, 251, 255);">这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下</span>  
[html]  view plain  copy
  1. </pre><pre name="code" class="html"><!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&signCF8922F49431FFE8A1834D0B32B25CE3",  
  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>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值