【ionic App问题总结系列】ionic 微信朋友圈分享

摘自：
http://www.itwendao.com/artic...
http://www.iamsuperman.cn/
http://www.cnblogs.com/fair-1...

前言

实现ionic微信朋友圈、朋友分享只要按照着插件的文档来就行，为方便查询，现记录总结（本文是在开发Android App的环境下产生的）。

注：

1.每个应用的名称、包名，签名都必须是唯一。为了做到ionic app能覆盖原有的Android App，必须保证ionic app这三者与原来保持一致。

2.不管你使用什么样的cordova 微信分享插件，都必须要在微信开发者平台（https://open.weixin.qq.com/） 申请应用，并获得appid。appid的作用就是用来标识你的应用，让你的应用可以获取微信提供的接口权限，比如：分享到朋友圈、分享给朋友等权限。

关于如何申请可以参考这篇文章：http://www.cnblogs.com/fair-1...

3.要测试微信分享功能，必须是签名之后的release apk，debug-apk是无法测试。因为在微信开发平台申请移动应用的时候需要你填写签名，所以你也必须对你的apk进行签名后才能正常使用微信分享功能；

流程大致是下面五步：

1)一个android apk包

2)应用签名（需要android apk包名来生成签名）

3)填写应用信息(包含签名),微信开放平台申请应用获取appid

4)安装cordova微信分享插件（ cordova-plugin-wechat）

5)在代码中调用实现分享

细化：

1)一个android apk包
通过ionic 生成一个android apk包

2）应用签名（需要android apk包名来生成签名）
如图1:

如图2，根据apk包名,生成应用签名（图中绿色编码）:

3)填写应用信息(包含签名),微信开放平台申请应用获取appid

不管你使用什么样的cordova 微信分享插件，都必须要在微信开发者平台（https://open.weixin.qq.com/） 申请应用，并获得appid。appid的作用就是用来标识你的应用，让你的应用可以获取微信提供的接口权限，比如：分享到朋友圈、分享给朋友等权限。

 图1，等待应用审核通过，就可以获取一个应用appid: 

图2, 圆圈中标记的就是，步骤四所需要的微信appid:

4）安装cordova微信分享插件（ cordova-plugin-wechat）

完成上一步之后，你就获得了appid。然后就可以安装所需要的插件了。
这里使用的插件是：https://github.com/xu-li/cord... 。README部分已经够用了，如果还不清楚的话，作者还很贴心的提供了sample：https://github.com/xu-li/cord... 。

ionic plugin add cordova-plugin-wechat --variable wechatappid=微信appid
ionic platform add android
ionic build android

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

5）在代码中调用实现分享

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

a）：把微信分享的功能写到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()方法，用来分享到微信中。

b)：在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);
    }

c)：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>

然后就可以愉快得使用微信分享了。