WeixinJSBridge API使用实例
<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>
<!DOCTYPE html>
<html>
<head>
<title>微信WeixinJSBridge API</title>
<meta charset="utf-8" />
<script type="text/javascript">
(function(){
var a=document.getElementsByTagName("html")[];
window.Session={appDomain:a.getAttribute("data-app-domain")||"",staticDomain:a.getAttribute("data-static-domain")||""}
})(); window.registNS=function(fullNS,isIgnorSelf){
var reg=/^[_$a-z]+[_$a-z0-]*/i;var nsArray=fullNS.split(".");
var sEval="";
var sNS="";
var n=isIgnorSelf?nsArray.length-:nsArray.length;
for(var i=;i<n;i++){
if(!reg.test(nsArray[i])){throw new Error("Invalid namespace:"+nsArray[i]+"");
return
}
if(i!=){sNS+="."}
sNS+=nsArray[i];
sEval+="if(typeof("+sNS+")=='undefined') "+sNS+"=new Object();
else "+sNS+";"
}
if(sEval!=""){
return eval(sEval)
}
return{} }; </script>
</head>
<body>
<section class="mod-page-body">
<div class="mod-page-main wordwrap clearfix">
<div class="mod-pageheader"></div>
<div class="mod-pagecontent">
<div class="mod-weixinjsapi">
<div class="x-desc">
微信客户端自带的Js Api：WeixinJSBridge
</div>
<div id="WeixinJsApi">
<input type="button" id="imagePreview" value="图片预览" />
<input type="button" id="profile" value="查看profile" />
<a href="weixin://profile/gh_412d74fbb474">企业微信小助手</a>
<input type="button" id="shareWeibo" value="分享微博" />
<input type="button" id="shareFB" value="分享facebook" />
<input type="button" id="addContact" value="添加联系人" />
<input type="button" id="scanQRCode" value="扫描二维码" />
<input type="button" id="jumpToBizProfile" value="跳转到指定公众账号页面" />
<input type="button" id="toggleMenuBtn" value="隐藏右上角按钮" />
<input type="button" id="toggleToolbar" value="隐藏底部导航栏" />
<input type="button" id="getNetType" value="获取网络状态" />
<input type="button" id="closeWindow" value="关闭" />
<input type="button" id="getBrandWCPayRequest" value="发起公众号微信支付" />
<input type="button" id="setPageState" value="设置页面状态" />
<input type="button" id="sendEmail" value="发邮件" />
<input type="button" id="openSpecificView" value="微信团队打开webView,跳到指定页面" />
<input type="button" id="getCanIAPPay" value="getCanIAPPay" />
<input type="button" id="getBrandIAPPayRequest" value="发起公众号IAP支付" />
<input type="button" id="openUrlByExtBrowser" value="用safari打开指定链接" />
<input type="button" id="openProductView" value="跳转微信商品页" />
<input type="button" id="openLocation" value="查看地理位置" />
<input type="button" id="timelineCheckIn" value="朋友圈签到" />
<input type="button" id="getBrandWCPayCreateCreditCardRequest" value="开通微信信用卡" />
<input type="button" id="geoLocation" value="获取地理位置" />
<input type="button" id="getInstallState" value="获取某app是否安装" />
<input type="button" id="editAddress" value="公众号编辑收货地址" />
<input type="button" id="getLatestAddress" value="公众号获取最近的收货地址" />
<input type="button" id="launch3rdApp" value="启动第三方APP" />
<input type="button" id="jumpWCMall" value="跳转微信商品购买界面" />
<input type="button" id="addEmoticon" value="添加表情" />
<input type="button" id="cancelAddEmoticon" value="取消下载某表情" />
<input type="button" id="hasEmoticon" value="查询是否存在某表情" />
</div>
</div>
</div>
</div>
</section>
<script>
function onBridgeReady() {
WeixinJSBridge.on('menu:share:appmessage', function(argv)
{
WeixinJSBridge.invoke('sendAppMessage',{
"link":"http://m.exmail.qq.com/",
"desc":"desc",
"title":"title for WeiXinJsBridge"
}, function(res) {
WeixinJSBridge.log(res.err_msg);
});
});
WeixinJSBridge.on('menu:share:timeline', function(argv)
{
WeixinJSBridge.invoke("shareTimeline",{
"link":"http://m.exmail.qq.com",
"img_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
"img_width":"",
"img_height":"",
"desc":"i am description",
"title":"just test from WeixinJsBridge"
},
function(e){
alert(e.err_msg);
})
});
} if (typeof WeixinJSBridge === "undefined"){
if (document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}
}else{
onBridgeReady();
} var menuHidden=!,toolbarHidden=!,netType={"network_type:wifi":"wifi网络","network_type:edge":"非wifi,包含3G/2G","network_type:fail":"网络断开连接","network_type:wwan":"2g或者3g"};
document.addEventListener("WeixinJSBridgeReady",function(){
document.getElementById("imagePreview").addEventListener(
"click",function(){
WeixinJSBridge.invoke("imagePreview",{
"urls":[
"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png",
"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_workStyle1ca3fe.png"
],
"current":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png"
})
},!),
document.getElementById("profile").addEventListener(
"click",function(){
alert("profile clicked");
WeixinJSBridge.invoke("profile",{
"username":"gh_412d74fbb474",
"nickname":"企业微信小助手"
})
},!),
document.getElementById("shareWeibo").addEventListener(
"click",function(){
WeixinJSBridge.invoke("shareWeibo",{
"type":"link",
"link":"http://m.exmail.qq.com"
},
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("shareFB").addEventListener(
"click",function(){
WeixinJSBridge.invoke("shareFB",{
"link":"http://m.exmail.qq.com"
})
},!),
document.getElementById("scanQRCode").addEventListener(
"click",function(){
WeixinJSBridge.invoke("scanQRCode",{
})
},!),
document.getElementById("addEmoticon").addEventListener(
"click",function(){
WeixinJSBridge.invoke("addEmoticon",{
"url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png",
"thumb_url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/logo1ca3fe.png" },
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("cancelAddEmoticon").addEventListener(
"click",function(){
WeixinJSBridge.invoke("cancelAddEmoticon",{
"url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png" },
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("hasEmoticon").addEventListener(
"click",function(){
WeixinJSBridge.invoke("hasEmoticon",{
"url":"http://rescdn.qqmail.com/bizmail/zh_CN/htmledition/images/bizmail/v3/icons_features1ca3fe.png" },
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("addContact").addEventListener(
"click",function(){
WeixinJSBridge.invoke("addContact",{
"webtype":"",
"username":"gh_412d74fbb474"
},
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("jumpToBizProfile").addEventListener(
"click",function(){
WeixinJSBridge.invoke("jumpToBizProfile",{
"tousername":"gh_2248a2ade13e"
},
function(e){
alert(e.err_msg);
})
},!),
document.getElementById("toggleMenuBtn").addEventListener(
"click",function(){
menuHidden?
(WeixinJSBridge.call("showOptionMenu"),menuHidden=!,this.value="隐藏右上角按钮")
:
(WeixinJSBridge.call("hideOptionMenu"),menuHidden=!,this.value="显示右上角按钮")
},!),
document.getElementById("toggleToolbar").addEventListener(
"click",function(){
toolbarHidden?
(WeixinJSBridge.call("showToolbar"),toolbarHidden=!,this.value="隐藏底部导航栏")
:
(WeixinJSBridge.call("hideToolbar"),toolbarHidden=!,this.value="显示底部导航栏")
},!),
document.getElementById("getNetType").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getNetworkType",{},
function(e){
alert(netType[e.err_msg])
})
},!),
document.getElementById("closeWindow").addEventListener(
"click",function(){
WeixinJSBridge.invoke("closeWindow",{},function(e){})
},!),
document.getElementById("getBrandWCPayRequest").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getBrandWCPayRequest",{
"appId" : "wxf8b4f85f3a794e77", //公众号名称，由商户传入
"timeStamp" : "", //时间戳 这里随意使用了一个值
"nonceStr" : "adssdasssd13d", //随机串
"package" :
"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", //扩展字段，由商户传入
"signType" : "SHA1", //微信签名方式:sha1
"paySign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8" //微信签名
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("setPageState").addEventListener(
"click",function(){
WeixinJSBridge.invoke("setPageState",{
"state" : ""
})
},!), document.getElementById("sendEmail").addEventListener(
"click",function(){
WeixinJSBridge.invoke("sendEmail",{
"title" : "title!",
"content" : "i am an Email!", //时间戳 这里随意使用了一个值
},
function(e){
// alert(e.err_msg)
})
},!),
document.getElementById("openSpecificView").addEventListener(
"click",function(){
WeixinJSBridge.invoke("openSpecificView",{
"specificview" : "contacts"
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("getCanIAPPay").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getCanIAPPay",{ },
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("getBrandIAPPayRequest").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getBrandIAPPayRequest",{
"appId" : "wxf8b4f85f3a794e77", //公众号名称，由商户传入
"timeStamp" : "", //时间戳 这里随意使用了一个值
"nonceStr" : "adssdasssd13d", //随机串
"package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign=CF8922F49431FFE8A1834D0B32B25CE3",
//扩展字段，由商户传入
"signType" : "SHA1", //微信签名方式:sha1
"paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信签名
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("openLocation").addEventListener(
"click",function(){
WeixinJSBridge.invoke("openProductView",{
"latitude" : 23.113, //纬度
"longitude" : 113.23, //经度
"name" : "TIT创意园", //POI名称
"address" : "广州市海珠区新港中路397号", //地址
"scale" : , //地图缩放级别
"infoUrl" : "http://weixin.qq.com/", //查看位置界面底部的超链接
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("timelineCheckIn").addEventListener(
"click",function(){
WeixinJSBridge.invoke("timelineCheckIn",{
"img_url": "http://mmsns.qpic.cn/mmsns/RLllkTm3DUdV24xbZnKicx9jJWxXI0Bq84zzbtibGuRyk/0", // 分享到朋友圈的缩略图
"img_width": "", // 图片的长度
"img_height": "", // 图片高度
"link": "http://news.qq.com/zt2012/cxkyym/index.htm", // 连接地址
"desc": "这个是描述啊啊", // 描述
"title": "朝鲜称中国渔船越界捕捞", // 分享标题
"latitude" : 23.113, //纬度
"longitude" : 113.23, //经度
"poiId" : "dianping_2331037", //商户id
"poiName" : "TIT创意园", //POI名称
"poiAddress" : "广州市海珠区新港中路397号", //地址
"poiScale" : , //地图缩放级别
"poiInfoUrl" : "http://weixin.qq.com/" //查看位置界面底部的超链接
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("geoLocation").addEventListener(
"click",function(){
WeixinJSBridge.invoke("geoLocation",{
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("getBrandWCPayCreateCreditCardRequest").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getBrandWCPayCreateCreditCardRequest",{
"appId" : "wxf8b4f85f3a794e77", //公众号名称，由商户传入
"timeStamp" : "", //时间戳 这里随意使用了一个值
"nonceStr" : "adssdasssd13d", //随机串
"package" : "bankType=CITIC_CREDIT&bankName=%e4%b8%ad%e4%bf%a1%e9%93%b6%e8%a1%8c&sign= CF8922F49431FFE8A1834D0B32B25CE3",
//扩展字段，由商户传入
"signType" : "SHA1", //微信签名方式:sha1
"paySign" : "1e6f13f78ca0ec43fbb80899087f77568af66987" //微信签名
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("getInstallState").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getInstallState",{
"packageUrl":"teamcircle://"
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("openProductView").addEventListener(
"click",function(){
WeixinJSBridge.invoke("openProductView",{
"productInfo":"json"
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("getLatestAddress").addEventListener(
"click",function(){
WeixinJSBridge.invoke("getLatestAddress",{
"appId" : "wxf8b4f85f3a794e77", //公众号名称，由商户传入
"timeStamp" : "", //时间戳 这里随意使用了一个值
"nonceStr" : "adssdasssd13d", //随机串
"signType" : "SHA1", //微信签名方式:sha1
"addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信签名
"scope" : "snsapi"
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("editAddress").addEventListener(
"click",function(){
WeixinJSBridge.invoke("editAddress",{
"appId" : "wxf8b4f85f3a794e77", //公众号名称，由商户传入
"timeStamp" : "", //时间戳 这里随意使用了一个值
"nonceStr" : "adssdasssd13d", //随机串
"signType" : "SHA1", //微信签名方式:sha1
"addrSign" : "b737015b5b1eabe5db580945a07eac08c7bb55f8", //微信签名
"scope" : "snsapi"
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("launch3rdApp").addEventListener(
"click",function(){
WeixinJSBridge.invoke("launch3rdApp",{
"appId" : "wx5823bf96d3bd56c7", //公众号名称，由商户传入
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("jumpWCMall").addEventListener(
"click",function(){
WeixinJSBridge.invoke("jumpWCMall",{
"appId" : "wx5823bf96d3bd56c7", //公众号名称，由商户传入
"funcId":""
},
function(e){
alert(e.err_msg)
})
},!),
document.getElementById("openUrlByExtBrowser").addEventListener(
"click",function(){
WeixinJSBridge.invoke("openUrlByExtBrowser",{
"url" : "http://m.exmail.qq.com"
},
function(e){
alert(e.err_msg)
})
},!)
}
);
</script>
</body>
</html>
WeixinJSBridge API使用实例的更多相关文章
- 微信WeixinJSBridge API使用实例
http://www.jb51.net/article/66642.htm 这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图 ...
- 微信禁用右上角的分享按钮，WeixinJSBridge API以及隐藏分享的子按钮等菜单项
<!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...
- 微信WeixinJSBridge API
<!DOCTYPE html><html> <head> <title>微信WeixinJSBridge API</title> <m ...
- Google Map JavaScript API V3 实例大全
Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...
- [Python][flask][flask-login]关于flask-login中各种API使用实例
本篇博文跟上一篇[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程有莫大的关系. 简介:Flask-Login 为 Flask 提供了用户会话管理.它处理了 ...
- [Python][flask][flask-wtf]关于flask-wtf中API使用实例教程
简介:简单的集成flask,WTForms,包括跨站请求伪造(CSRF),文件上传和验证码. 一.安装(Install) 此文仍然是Windows操作系统下的教程,但是和linux操作系统下的运行环境 ...
- The MySQL C API 编程实例
在网上找了一些MYSQL C API编程的文章,看了后认为还是写的不够充分,依据自己经验写了这篇<The MySQL C API 编程实例>,希望对须要调用到MYSQL的C的API的朋友有 ...
- 腾讯QQAndroid API调用实例（QQ分享无需登录）
腾讯QQAndroid API调用实例(QQ分享无需登录) 主要分为两个步骤: 配置Androidmanifest.xml 修改activity里边代码 具体修改如下: 1.Activity代 ...
- (转)微信禁用右上角的分享按钮，WeixinJSBridge API以及隐藏分享的子按钮等菜单项
<!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...
随机推荐
- mybatis进阶案例之多表查询
mybatis进阶案例之多表查询 一.mybatis中表之间的关系 在数据库中,实体型之间的关系主要有如下几种: 1.一对一 如果对于实体集A中的每一个实体,实体集B中至多有一个(也可以没有)实体与之 ...
- js实现字符串逆向输出的4种方式
一.第一种方式(利用charAt()这个函数实现) 代码如下: var str="你好世界!!!!"; var str1="";//这里创建一个空字符串用来拼接 ...
- Golang中database/sql包
驱动 github.com/go-sql-driver/mysql 请求一个连接的函数有好几种,执行完毕处理连接的方式稍有差别,大致如下: db.Ping() 调用完毕后会马上把连接返回给连接池. d ...
- spring多数据源分布式事务的分析与解决方案
一.概述 1.业务背景 对老系统进行重构合并,导致新系统需要同时对3个数据库进行管理.由于出现跨库业务,需要实现分布式事务. 2.开发环境 spring框架版本 4.3.10.RELEASE 持久层 ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- onOK Modal.warning iview 要写一个函数 套上，不然会得不到异步调用，直接弹出的时候就执行了
export const warning = (str, callback = _ => {}, outCallback = () => {}) => { Modal.warning ...
- Event loops秒懂
Event loops秒懂 简介 JS是一种单线程脚本语言,为什么要设计成单线程? 举例说明,假设JS是多线程脚本语言,A线程修改了DOM,B线程删除了DOM,一旦B线程先执行完,DOM被删除了,A线 ...
- java时间切片工具
项目中经常会遇到根据根据时间区间来查询数据的场景, 如时间跨度大可能相应的sql的执行效率会显著降低, 因此可以对时间区间进行切割成若干个小范围的时间片, 这样不仅可以提高sql的性能还可以做一下并发 ...
- C#基础--迭代器初识
foreach语句是枚举器(enumerator)的消费者,而迭代器(iterator)是枚举器的产生者. 迭代器模式能提供一种顺序访问一个集合内部的元素,而又不会暴露其内部的方法.当然其缺点就是用f ...
- 《前端之路》- TypeScript (四) class 中各类属性、方法，抽象类、多态
目录 一.TypeScript 中的类 二.TypeScript 中类的继承 三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...