这篇文章主要介绍了微信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>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
