首页 > 语言 > JavaScript > 正文

微信WeixinJSBridge API使用实例

2024-05-06 16:20:47
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了微信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> 

上一篇：javascript实现优酷的视频代码自适应宽度

下一篇：js实现鼠标划过给div加透明度的方法

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有