首页 > 代码库 > 微信WeixinJSBridge API使用实例

微信WeixinJSBridge API使用实例

2024-08-15 09:10:48   222人阅读

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="http://www.mamicode.com/图片预览" />  46     <input type="button" id="profile" value="http://www.mamicode.com/查看profile" />  47     <a href="weixin://profile/gh_412d74fbb474">企业微信小助手</a>  48     <input type="button" id="shareWeibo" value="http://www.mamicode.com/分享微博" />  49     <input type="button" id="shareFB" value="http://www.mamicode.com/分享facebook" />  50     <input type="button" id="addContact" value="http://www.mamicode.com/添加联系人" />  51     <input type="button" id="scanQRCode" value="http://www.mamicode.com/扫描二维码" />  52     <input type="button" id="jumpToBizProfile" value="http://www.mamicode.com/跳转到指定公众账号页面" />  53     <input type="button" id="toggleMenuBtn" value="http://www.mamicode.com/隐藏右上角按钮" />  54     <input type="button" id="toggleToolbar" value="http://www.mamicode.com/隐藏底部导航栏" />  55     <input type="button" id="getNetType" value="http://www.mamicode.com/获取网络状态" />  56     <input type="button" id="closeWindow" value="http://www.mamicode.com/关闭" />  57     <input type="button" id="getBrandWCPayRequest" value="http://www.mamicode.com/发起公众号微信支付" />  58     <input type="button" id="setPageState" value="http://www.mamicode.com/设置页面状态" />  59     <input type="button" id="sendEmail" value="http://www.mamicode.com/发邮件" />  60     <input type="button" id="openSpecificView" value="http://www.mamicode.com/微信团队打开webView,跳到指定页面" />  61     <input type="button" id="getCanIAPPay" value="http://www.mamicode.com/getCanIAPPay" />  62     <input type="button" id="getBrandIAPPayRequest" value="http://www.mamicode.com/发起公众号IAP支付" />  63     <input type="button" id="openUrlByExtBrowser" value="http://www.mamicode.com/用safari打开指定链接" />  64     <input type="button" id="openProductView" value="http://www.mamicode.com/跳转微信商品页" />  65     <input type="button" id="openLocation" value="http://www.mamicode.com/查看地理位置" />  66     <input type="button" id="timelineCheckIn" value="http://www.mamicode.com/朋友圈签到" />  67     <input type="button" id="getBrandWCPayCreateCreditCardRequest" value="http://www.mamicode.com/开通微信信用卡" />  68     <input type="button" id="geoLocation" value="http://www.mamicode.com/获取地理位置" />  69     <input type="button" id="getInstallState" value="http://www.mamicode.com/获取某app是否安装" />  70     <input type="button" id="editAddress" value="http://www.mamicode.com/公众号编辑收货地址" />  71     <input type="button" id="getLatestAddress" value="http://www.mamicode.com/公众号获取最近的收货地址" />  72     <input type="button" id="launch3rdApp" value="http://www.mamicode.com/启动第三方APP" />  73     <input type="button" id="jumpWCMall" value="http://www.mamicode.com/跳转微信商品购买界面" />  74     <input type="button" id="addEmoticon" value="http://www.mamicode.com/添加表情" />  75     <input type="button" id="cancelAddEmoticon" value="http://www.mamicode.com/取消下载某表情" />  76     <input type="button" id="hasEmoticon" value="http://www.mamicode.com/查询是否存在某表情" />  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="http://www.mamicode.com/隐藏右上角按钮")214         :215         (WeixinJSBridge.call("hideOptionMenu"),menuHidden=!0,this.value="http://www.mamicode.com/显示右上角按钮")216       },!1),217     document.getElementById("toggleToolbar").addEventListener(218       "click",function(){219         toolbarHidden?220         (WeixinJSBridge.call("showToolbar"),toolbarHidden=!1,this.value="http://www.mamicode.com/隐藏底部导航栏")221         :222         (WeixinJSBridge.call("hideToolbar"),toolbarHidden=!0,this.value="http://www.mamicode.com/显示底部导航栏")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", //微信签名方式:sha1244         "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", //微信签名方式:sha1292         "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", //商户id324         "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", //微信签名方式:sha1350         "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", //微信签名方式:sha1381           "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", //微信签名方式:sha1395           "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使用实例


联系
我们