微信JSSDK javascript 开发 代码片段,仅供参考
最全面最专业的微信公众平台开发教程:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html
比较完整的分享教程:http://www.cnblogs.com/leinov/p/5256879.html
ajax调用服务器接口:
function GetWeiXinJsapiConfig() {
var url = encodeURIComponent(location.href.split('#')[0]);
alert('url is ' + url);
$.ajax({
type: "POST",
url: "/XXX/GetWeiXinJsapiConfig",
data: "{'curUrl': '" + url +
"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
console.log(data.d);
var configData = $.parseJSON(data.d);
console.log('sig is ' + configData.signature);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: configData.appid, // 必填,公众号的唯一标识
timestamp: configData.timestamp, // 必填,生成签名的时间戳
nonceStr: configData.noncestr, // 必填,生成签名的随机串
signature: configData.signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
alert('OK---');
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: descContent, // 分享描述
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
}); });
wx.error(function(res){
// alert("err" + res);
});
},
error: function(data) {
var is_json;
var json;
try {
var json = $.parseJSON(data.responseText);
is_json = true;
} catch (e) {
is_json = false;
} if (is_json) {
// add_json_error(data, json);
console.log(json.Message);
} else {
// Show the response text as plaintext.
var status = data.status;
var statusText = data.statusText; // If we've hit a 400 (Bad Request), show the responseText.
if (status === 400) {
statusText += ": " + data.responseText;
}
console.log(status + " " + statusText);
}
},
complete: function() { }
});
}
定义微信分享数据,一次定义,多处使用:
// 定义微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://photocdn.sohu.com/20130122/Img364302298.jpg',
"link" : 'http://www.baidufe.com',
"desc" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
"title" : "欢迎使用WeixinApi"
}; // 分享的回调
var wxCallbacks = {
// 收藏操作是否触发回调,默认是开启的
favorite : false, // 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip,为什么要取消呢?
alert("分享被取消,msg=" + resp.err_msg);
},
// 分享失败了
fail : function(resp) {
// 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?
alert("分享失败,msg=" + resp.err_msg);
},
// 分享成功
confirm : function(resp) {
// 分享成功了,我们是不是可以做一些分享统计呢?
alert("分享成功,msg=" + resp.err_msg);
},
// 整个分享过程结束
all : function(resp,shareTo) {
// 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?
alert("分享" + (shareTo ? "到" + shareTo : "") + "结束,msg=" + resp.err_msg);
}
};
// 自定义分享到:微信好友、朋友圈、腾讯微博、QQ好友
WeixinApi.share(wxData,wxCallbacks);
初始化等待分享:
// 开发阶段,开启WeixinApi的调试模式
WeixinApi.enableDebugMode(); // 初始化WeixinApi,等待分享
WeixinApi.ready(function(Api) { // 微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
"link" : 'http://www.baidufe.com',
"desc" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
"title" : "欢迎使用WeixinApi"
}; // 分享的回调
var wxCallbacks = {
// 收藏操作不执行回调,默认是开启(true)的
favorite : false, // 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip,为什么要取消呢?
alert("分享被取消,msg=" + resp.err_msg);
},
// 分享失败了
fail : function(resp) {
// 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?
alert("分享失败,msg=" + resp.err_msg);
},
// 分享成功
confirm : function(resp) {
// 分享成功了,我们是不是可以做一些分享统计呢?
alert("分享成功,msg=" + resp.err_msg);
},
// 整个分享过程结束
all : function(resp,shareTo) {
// 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?
alert("分享" + (shareTo ? "到" + shareTo : "") + "结束,msg=" + resp.err_msg);
}
}; // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks); // 点击分享到朋友圈,会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks); // 点击分享到腾讯微博,会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks); // iOS上,可以直接调用这个API进行分享,一句话搞定
Api.generalShare(wxData,wxCallbacks);
});
隐藏右上角option menu入口
WeixinApi.ready(function(Api) {
// 隐藏
Api.hideOptionMenu(); // 显示
// Api.showOptionMenu();
});
隐藏底部工具栏
WeixinApi.ready(function(Api) {
// 隐藏
Api.hideToolbar(); // 显示
// Api.showToolbar();
});
获取当前的网络类型
WeixinApi.ready(function(Api) {
Api.getNetworkType(function(network){
/**
* network取值:
*
* network_type:wifi wifi网络
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 网络断开连接
* network_type:wwan 2g或者3g
*/
});
});
调起客户端图片播放组件
WeixinApi.ready(function(Api) {
// 需要播放的图片src list
var srcList = [src1, src2, ..., srcN];
// 选一个作为当前需要展示的图片src
var curSrc = src1;
// 调起
Api.imagePreview(curSrc, srcList);
});
关掉当前微信公众页面窗口
WeixinApi.ready(function(Api) {
// 关闭窗口
WeixinApi.closeWindow({
success : function(resp){
alert('关闭窗口成功!');
},
fail : function(resp){
alert('关闭窗口失败');
}
});
});
判断当前网页是否在微信内置浏览器中打开
// true or false
var flag = WeixinApi.openInWeixin();
发送电子邮件
WeixinApi.sendEmail({
subject : '邮件标题',
body : '邮件正文'
},function(resp){
// 注意这里可不要轻易alert,会卡死的。。。
});
禁止用户分享
// 先对Api进行初始化
WeixinApi.ready(function(Api) {
// 禁止分享
Api.disabledShare(function(){
alert('当前页面禁止分享!');
});
});
常见问题:
用了这个API怎么没生效
- 1)、
WeixinApi.js
路径是否引用正确 - 2)、
WeixinApi.ready
是否正确执行了?(可以在里面加一个alert,简单粗暴可依赖) - 3)、开启
WeixinApi.enableDebugMode
方便问题定位
想自己做一个按钮直接分享
就我目前了解到的情况来看,是行不通的,官方都有做权限控制
怎样动态修改分享的信息:wxData
用到Api提供的async:true
配置
关于分享的其它方法以及注意事项,请移步这位仁兄这里,有比较详细的答案:https://www.baidufe.com/item/f07a3be0b23b4c9606bb.html
微信JSSDK javascript 开发 代码片段,仅供参考的更多相关文章
- Webdriver控制翻页控件,并实现向前向后翻页功能,附上代码,仅供参考,其他类似日期控件的功能可以自己封装
新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...
- 第二步 (仅供参考) sencha touch 使用cmd打包apk
最新版本的cmd可以直接将sencha touch项目打包成本地应用,不过还有很多不足,本文仅供参考 通过sencha app build native命令可以直接将项目打包成本地应用,不过在命令运行 ...
- 2019第十届蓝桥杯C++B组题解(赛后重写的,不确保答案正确性,仅供参考)
先说一下这次的感受吧,我们考场比较乱,开始比赛了,还有的电脑有故障,(向这些人发出同情),第一次认真参加比赛,真正比赛的时候感觉没有那么正式,很乱,各种小问题,(例如博主就没找到题目在哪里,找到后又不 ...
- 如何有效防止DEDE织梦系统被挂木马安全设置(仅供参考)
尊敬的客户,您好! 感谢广大客户对我司工作的信任和支持! 我司在最近的一个多月内陆续发现多起因 DedeCMS 安全漏洞造成网站被上传恶意脚本的事件,入侵者可利用恶意脚本对外发送大量 ...
- Unity上一页下一页切换功能实现源码(仅供参考)
在做项目时我们有时需要实现切换上一页下一页图片,切换上一首下一首歌曲等等类似的功能.这里写了个简单的实现源码(仅供参考),要是有更好的方法欢迎提出来,共同进步~ 以切换上一页下一页图片为例: usin ...
- Ubuntu 12.04 分区方案(仅供参考)
Ubuntu 12.04 分区方案(仅供参考) 总空间大小:50G 目录 建议大小 实际大小 格式 描述 / 10G~20G 10G ext4 根目录 swap <2048M 1G swap ...
- VSS的运用小内容(针对于vs2008版本)(小的问题都是,仅供参考--只针对于菜鸟级的)
自己开始接触vss 的时候有些小的习惯没有很好的养成,下面的有关VSS内容都是简单的迁入迁出的问题,(仅供参考) 1.文件的迁入迁出:(.txt..xlsx..doc) a:文件的覆盖问题: 对于文件 ...
- mysql 千万级数据查询效率实践,分析 mysql查询优化实践--本文只做了一部分,仅供参考
数据量, 1300万的表加上112万的表 注意: 本文只做了部分优化,并不全面,仅供参考, 欢迎指点. 请移步tim查看,因为写的时候在tim写的,粘贴过来截图有问题,就直接上链接了. https ...
- jdk1.8+SpringAOP注解报java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut select错误的不知原因的解决办法[仅供参考]
先说办法:如果Aspectweaver-1.*.*jar这三个包版本比较低, 比如1.5.0这一层次的,可以找版本高一点的包替换低版本的包,问题可以得到解决 jar包的下载地址:https://mvn ...
随机推荐
- 初识JavaScript 变量, 操作符, 数组
这里讲的不会太多, 因为所有的语言都是一样的, 一些基本的东西, 所以就随便写写. 变量 变量就是可变的量, 编程角度理解就是用于存储某种/某些数值的存储器. 我们可以把变量具象理解为一个盒子, 而我 ...
- Android 面试题汇总
面试题基础储备 1.Activity相关 a.Activity的特点 1.可见 2.可交互 他之所以可交互,是因为他同时实现了Window.Callback和KeyEvent.Callback, 可 ...
- RMAN备份失败: ORA-19502 & ORA-27072: File I/O error
早上检查一ORACLE数据库的RMAN备份的邮件时,发现出现了ORA-27072: File I/O error等错误,具体信息如下所示: channel ORA_DISK_1: starting p ...
- Python学习笔记1-数据类型
数据类型: float — 浮点数可以精确到小数点后面15位 int — 整型可以无限大 bool — 非零为true,零为false list — 列表 Float/Int: 运算符: / — 浮点 ...
- SQL报表(Report Builder)里面的几个常见问题(持续更新)
一 SQL报表常常会遇到在表格中的相除,如果分母为零,一般会显示错误号,我们可以这么处理:(加上是A/B) ,, B) 但是我们不能这么写: ,,A/B) //我们不能这么写,会产生BUG,至于什么B ...
- PHP+Apache+Zend Studio+MySql+Navicat+phpAdmin
本文章介绍整个PHP开发环境的搭建 数据库:MySql 5.5.50 数据库软件:Navicat 11.1.20和phpAdmin 4.6.5.1任选 php库:PHP 7.0.13 服务器:Apa ...
- 解决webkit浏览器中js方法中使用window.event提示未定义的问题
这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...
- 关于安装ruby brew 提示失败
Error running 'requirements_osx_brew_update_system ruby-1.9.3-p551', showing last 15 lines of /Users ...
- 转: 深入理解Linux修改hostname
from: http://www.cnblogs.com/kerrycode/p/3595724.html 写的相当详细!!! 深入理解Linux修改hostname 2014-03-12 10:17 ...
- bzoj[3238][ahoi差异]
Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output HINT 2<=N<=5 ...