前言

做完之後才發現實現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這三者與原來保持一致）。關於如何申請可以參考這篇文章：

安裝並使用外掛

第一步：先安裝外掛

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的真機效果，可以前往各大應用市場搜尋添米財富 下載便可看到（這裡真不是打廣告）