前言
做完之后才发现实现ionic微信朋友圈、朋友分享并不难。只要按照着插件的文档来就行。但是在刚接触的时候依然是存在疑惑,还是写点记录总结下吧(本文是在开发Android App的环境下产生的)。
整个流程大致是下面三步:
微信开放平台申请应用获取appid
安装cordova微信分享插件
在代码中调用实现分享
开发前的准备
不管你使用什么样的cordova 微信分享插件,都必须要在微信开发者平台(https://open.weixin.qq.com/) 申请应用,并获得appid。appid的作用就是用来标识你的应用,让你的应用可以获取微信提供的接口权限,比如:分享到朋友圈、分享给朋友等权限。由于之前开发原生Android App的同事已经将这一步完成了,我直接是利用已经申请好的appid,并没有重新尝试(实际上也并没办法尝试,每个应用的名称、包名,签名都必须是唯一。为了做到ionic app能覆盖原有的Android App,我也必须保证ionic app这三者与原来保持一致)。关于如何申请可以参考这篇文章:http://www.cnblogs.com/fair-1107518056/p/5667773.html
安装并使用插件
完成上一步之后,你就获得了appid。然后就可以安装所需要的插件了。这里使用的插件是:https://github.com/xu-li/cordova-plugin-wechat 。README部分已经够用了,如果还不清楚的话,作者还很贴心的提供了sample:https://github.com/xu-li/cordova-plugin-wechat-example 。
第一步:先安装插件
cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID
其中YOUR_WECHAT_APPID
要替换成你上一步申请应用成功后获得的appid。
如果你只是用到了“分享给好友”和“分享到朋友圈”这两个功能,那代码其实就非常简单了。
第二步:把微信分享的功能写到service层中
/**
* 微信分享插件Service
*/
.factory('WechatService', [ function () {
function share(params) {
if (typeof Wechat === "undefined") {
alert("手机尚未安装微信");
return false;
}
var json = {};
Wechat.share(params, function () {
alert(分享成功);
}, function (reason) {
alert('Failed'+ reason);
});
return true;
}
return {
share: share
}
}])
插件安装后,会自动注册一个Wechat
全局变量,在这个全局变量下,定义了一个share()
方法,用来分享到微信中。
第三步:在Controller层中调用
/**
* type 表示分享类型。0:表示分享给朋友,1表示分享到朋友圈
/
$scope.share = function (type) {
var json = {};
Wechat.isInstalled(function (installed) {
if (!installed) {
alert(尚未安装微信);
return false
}
}, function (reason) {
alert('Failed'+ reason);
});
$scope.params = {
scene: type,
message: {
title: "添米送万元,几万人都在领,我在这里等你",
thumb: "https://www.91tianmi.com/mobile/statics/mobile/images/icon-tm-logo.jpg",
description: "写上描述文本",
media: {
type: Wechat.Type.LINK,
webpageUrl: “http://xxx.xxx.com/siteurl” // 这里的webpageUrl要替换成你的页面url
}
}
};
WechatService.share($scope.params);
}
第四步:View层中的html页面显示
<div class="row text-center" flex="box:mean">
<div class="share-option" ng-click="share(0)">
<img src="main/assets/images/account/invite/share-friends.png" alt="" class="icon-share">
<p>微信好友</p>
</div>
<div class="share-option" ng-click="share(1)">
<img src="main/assets/images/account/invite/share-timeline.png" alt="" class="icon-share">
<p>微信朋友圈</p>
</div>
</div>
然后就可以愉快得使用微信分享了。
问题总结
安装插件的时候必须要将添加你的appid,要不然是无法调用分享功能;
要测试微信分享功能,必须是签名之后的release apk,debug-apk是无法测试。因为在微信开发平台申请移动应用的时候需要你填写签名,所以你也必须对你的apk进行签名后才能正常使用微信分享功能;
结尾
想要查看ionic Android App的真机效果,可以前往各大应用市场搜索添米财富
下载便可看到(这里真不是打广告)
文章首发于我的个人博客: www.iamsuperman.cn