【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>

而後就能夠愉快得使用微信分享了。