1、下载或更新第三方库 第三方库github地址点此进入
2、在项目中设置微信第三方库
参考:第三方库的使用方法
2.1 将下载好的weixinapi文件放置在项目外的任意文件夹内。例如,新建一个testWeixin的egret项目,将weixinapi放置在其外的libsrc文件夹内,例如:
C:\wamp\www\egret\libsrc\weixinapi
项目文件夹如下:
C:\wamp\www\egret\testWeixin
2.2 配置项目内文件
进入到 Egret 项目内,(如何新建 Egret项目详见:Get Started 或通过 egret wing 文件-- 新建egret 项目)。
找到egretProperties.json 文件,添加weixinapi模块。例如wenxinapi 文件放在以上libsrc文件夹下,通过如下方式添加模块:
其中
{
"name": "weixinapi",
"path": "../libsrc/weixinapi"
}
path 表示微信模块文件的目录.
添加好上述代码后,执行 egret build -e -clean
(编译引擎) 就会把模块编译到项目中,并在代码中使用该第三方库。
2.3 验证引入文件是否成功
在 egret 项目中添加如下代码
var bodyConfig: BodyConfig = new BodyConfig();
bodyConfig.appId = "此处填写公共平台appID,未认证的ID将不能使用自定义分享等接口,请联系微信官方获取";
bodyConfig.debug = true;
/// ... 其他的配置属性赋值
/// 通过config接口注入权限验证配置
if(wx) {
wx.config(bodyConfig);
wx.ready(function() {
/// 在这里调用微信相关功能的 API
});
}
编译成功后,打开浏览器控制台,可以看到以下输出:
参考:微信JS-SDK说明文档
- 步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
- 步骤二:引入JS文件
详见上一章,“配置JSSDK第三方库”
- 步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
注:这里需要通过后台脚本获得动态签名和时间戳等,这里可以参考开发者提供的教程配置后台脚本。
开发者提供的教程:d8q8提供的教程地址
开发者提供的代码下载: d8q8提供的源码下载
[php新接口更新](http://bbs.egret.com/forum.php?mod=viewthread&tid=10639)
此处感谢 开发者论坛 d8q8 同志提供教程。
配置好后台脚本后,这里参考 d8q8 上面给出的源码,定义接口:
interface SignPackage {
appId:string;
nonceStr:string;
timestamp:number;
signature:string;
url:string;
}
获取数据:
private url:string;
private signPackage:SignPackage;
/**
* 获取签名分享
*/
private getSignPackage() {
var urlloader = new egret.URLLoader();
var req = new egret.URLRequest(this.url);
urlloader.load(req);
req.method = egret.URLRequestMethod.GET;
urlloader.addEventListener(egret.Event.COMPLETE, (e)=> {
this.signPackage = <SignPackage>JSON.parse(e.target.data);
this.getWeiXinConfig();//下面会定义
}, this);
}
这里使用以上开发者 d8q8 教程中规定的json数据格式,具体如下:
-
公众号的唯一标识: appId
-
时间戳: timestamp
-
随机码: nonceStr
-
签名: signature
private getWeiXinConfig() {
/*
* 注意:
* 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
* 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
* 3. 完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* 如有问题请通过以下渠道反馈:
* 邮箱地址:[email protected]
* 邮件主题:【微信JS-SDK反馈】具体问题
* 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
*/
//配置参数
var bodyConfig = new BodyConfig();
bodyConfig.debug = true;// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
bodyConfig.appId = this.signPackage.appId;// 必填,公众号的唯一标识
bodyConfig.timestamp = this.signPackage.timestamp;// 必填,生成签名的时间戳
bodyConfig.nonceStr = this.signPackage.nonceStr;// 必填,生成签名的随机串
bodyConfig.signature = this.signPackage.signature;// 必填,签名,见附录1
bodyConfig.jsApiList = [// 必填,需要使用的JS接口列表
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',//判断当前客户端是否支持指定JS接口
'chooseImage'//拍照或从手机相册中选图接口
];
wx.config(bodyConfig);
}
步骤四:通过ready接口处理成功验证
wx.ready(function() {
/// 在这里调用微信相关功能的 API
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
备注:checkJsApi接口是客户端6.0.2新引入的一个预留接口,第一期开放的接口均可不使用checkJsApi来检测。
实例参考来源: 微信JSSDK 实例参考来源
1.微信分享接口
注:微信公共平台需要认证才能使用分享接口,详情咨询微信官方。
1.1 获取“分享给朋友”按钮点击状态及自定义分享内容接口.
private onShareAPPMessage() {
var shareAppMessage = new BodyMenuShareAppMessage();
shareAppMessage.title = '发送给朋友';
shareAppMessage.desc = '在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。';
shareAppMessage.link = 'http://movie.douban.com/subject/25785114/';
shareAppMessage.imgUrl = 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg';
shareAppMessage.trigger = function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
console.log('用户点击发送给朋友');
}
shareAppMessage.success = function (res) {
console.log('已分享');
};
shareAppMessage.fail = function (res) {
console.log('已取消');
};
shareAppMessage.cancel = function (res) {
console.log(JSON.stringify(res));
};
}
1.2 获取“分享到QQ”按钮点击状态及自定义分享内容接口
private onShareQQ() {
var shareqq = new BodyMenuShareQQ();
shareqq.title = "分享到QQ";
shareqq.desc = "在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。";
shareqq.link = "http://movie.douban.com/subject/25785114/";
shareqq.imgUrl = "http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg";
shareqq.complete = function (res) {
console.log(JSON.stringify(res));
};
shareqq.trigger = function (res) {
console.log('用户点击分享到QQ');
};
shareqq.success = function (res) {
console.log('已分享');
};
shareqq.cancel = function (res) {
console.log('已取消');
};
shareqq.fail = function (res) {
console.log(JSON.stringify(res));
};
}
1.3 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
private onshareWeibo(e:egret.TouchEvent) {
var shareweibo = new BodyMenuShareWeibo();
shareweibo.title = "用户点击分享到微博";
shareweibo.desc = "在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。";
shareweibo.link = "http://movie.douban.com/subject/25785114/";
shareweibo.imgUrl = "http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg";
shareweibo.complete = function (res) {
console.log(JSON.stringify(res));
};
shareweibo.trigger = function (res) {
console.log('用户点击分享到微博');
};
shareweibo.cancel = function (res) {
console.log('已取消');
};
shareweibo.fail = function (res) {
console.log(JSON.stringify(res));
};
}
1.4 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
private onTimeline(e:egret.TouchEvent): void {
var sharet = new BodyMenuShareTimeline();
sharet.title = "用户点击分享到朋友圈";
sharet.link = "http://movie.douban.com/subject/25785114/";
sharet.imgUrl = "http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg";
sharet.trigger = function (res) {
// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
console.log('用户点击分享到朋友圈');
};
sharet.success = function (res) {
console.log('已分享');
};
sharet.cancel = function (res) {
console.log('已取消');
};
sharet.fail = function (res) {
console.log(JSON.stringify(res));
};
}
注意:由于此为微信的 JSSDK,所以只支持 web 版本,不支持 native 版本。