做完之后才发现实现ionic微信朋友圈、朋友分享并不难。只要按照着插件的文档来就行。但是在刚接触的时候依然是存在疑惑，还是写点记录总结下吧（本文是在开发Android App的环境下产生的）。

整个流程大致是下面三步：

  1. 微信开放平台申请应用获取appid

  2. 安装cordova微信分享插件

  3. 在代码中调用实现分享

开发前的准备

不管你使用什么样的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 。

第一步：先安装插件

1
2

cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID

其中YOUR_WECHAT_APPID要替换成你上一步申请应用成功后获得的appid。

如果你只是用到了“分享给好友”和“分享到朋友圈”这两个功能，那代码其实就非常简单了。

第二步：把微信分享的功能写到service层中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
* 微信分享插件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层中调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
* 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页面显示

1
2
3
4
5
6
7
8
9
10
11

<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第一版已经悄悄上线了，有兴趣研究ionic用在公司正式项目的朋友可以前往各大应用市场搜索“添米财富”进行下载，下载后打开，如果有提示更新，点击“立即更新”后下载最新的app进行安装覆盖即可。升级完版本后的App就是基于ionic 开发。在公司尚未正式推广之前，我都没有对里面的代码进行压缩混淆，想研究的朋友自己解压缩apk后就可以看到完整的源码了。很想放到github上的，但是由于是公司的项目，便打消了这个念头。