为Cordova + Ionic + AngularJS 应用添加微信分享功能

为Cordova + Ionic + AngularJS应用添加微信分享功能

 

 

不知道 Cordova 、Ionic、AngularJS 为何物的，请点击下方链接自行恶补：

·      Cordova

·      Ionic

·      AngularJS

需求

最后开始接触一些基于 Ionic +Cordova + AngularJS技术的移动App的开发，然后就遇到了很多都是需要有一个分享功能的，尤其是微信的分享，这也是第一次搞这种事情啊，没办法，折腾了好多天，解决了这个问题之后发现，原来是如此的简单。

准备好你的App

我在这里创建一个名为 WechatShareDemoApp 的新的App，在工作目录中运行如下命令：

1.   ionic startWechatShareDemoApp tabs

这会使用 Ionic Tabs Seed 创建一个基于标签导航的空的App，创建成功之后，使用任何一个你喜欢的编辑器编辑该项目，我使用的是 WebStorm。

为 DashCtrl 增加一个 share(title,desc,url,thumb) 文法

share(title,desc,url,thumb) 方法用来打开一个 ActionSheet 面板，在该面板中，会提供两个分享按钮，一个用于分享内容至朋友圈，一个用于分享至会话，代码如下：

1.   //上面代码省略

2.   .controller('DashCtrl',function($scope, $ionicActionSheet) {

3.       $scope.share =function(title, desc, url, thumb) {

4.           $ionicActionSheet.show({

5.               buttons: [

6.                   { text:'<b>分享至微信朋友圈</b>' },

7.                   { text:'分享给微信好友' }

8.               ],

9.               titleText:'分享',

10.            cancelText:'取消',

11.            cancel:function() {

12.                //取消时执行

13.            },

14.            buttonClicked:function(index) {

15.                if(index ==0) {

16.                    $scope.shareViaWechat(WeChat.Scene.timeline, title, desc, url, thumb);

17.                }

18.                if(index ==1 ) {

19.                    $scope.shareViaWechat(WeChat.Scene.session, title, desc, url, thumb);

20.                }

21.            }

22.        });

23.    };

24.})

25.//下面代码省略

share(title,desc,url,thumb) 的运行方式是，点击该方法被调用时，打开一个 ActionSheet，点击 分享至微信朋友圈 按钮被点击时，执行 $scope.shareViaWechat(WeChat.Scene.timeline, title, desc,url, thumb)，点击 分享给微信好友 时，执行$scope.shareViaWechat(WeChat.Scene.session, title, desc,url, thumb)，前者分享内容至朋友圈，后者分享内容至会话，但是，$scope.shareViaWechat 方法本身是不存在的，所以，我们还需要添加该方法。

为 DashCtrl 添加 $scope.shareViaWechat 方法

该方法使用了第三方的 Cordova 插件提供的方法 WeChat.share，该方法可以将内容分享至微信中，代码如下：

1.   //前面代码省略

2.   .controller('DashCtrl',function($scope, $ionicActionSheet, $ionicPopup) {

3.    

4.       //......       

5.    

6.       $scope.shareViaWechat =function(scene, title, desc, url, thumb) {

7.           //创建消息体

8.           var msg = {

9.               title:title ? title :"行者无疆",

10.            description: desc ? desc :"A real traveller's province isboundless.",

11.            url: url ?url :"http://www.xingzhewujiang.xinligen.osnuts.com",

12.            thumb:thumb ? thumb :null

13.        };

14. 

15.        WeChat.share(msg, scene,function() {

16.            $ionicPopup.alert({

17.                title:'分享成功',

18.                template:'感谢您的支持！',

19.                okText:'关闭'

20.            });

21.        },function(res) {

22.            $ionicPopup.alert({

23.                title:'分享失败',

24.                template:'错误原因：' + res +'。',

25.                okText:'我知道了'

26.            });

27.        });

28.    };

29.})

30.//后面代码省略

在上面的代码中， WeChat 是由第三方插件提供的，至现在为止，分享功能已经做完，我们现在需要在 views 中添加分享功能的激活按钮。

添加分享按钮

打开 templates/tab-dash.html，在 ion-content 结束前，添加如下代码：

1.   <buttonclass="button button-assertive button-outlinebutton-block"ng-click="share()">分享</button>

该按钮会打开分享的 ActionSheet，我们不需要传任何参数，因为在上面的分享方法中，对没有设定的参数已经提供了默认的内容了。

此时，应用的界面如下图所示：

添加微信分享插件

虽然样子已经成型了，但是还是不能进行分享的，我们需要安装一个插件，该插件使用到了微信官方的第三方开发库，需要先在微信开放平台申请一个AppId，然后还需要使用Gen_Signature_Android221cbf.zip 插件从手机中根据包名获取一个 Signature Code，该代码还必须填写进入开放平台中，在该过程中，若我们的App是运行在Android平台的话，还涉及到 keystore 的问题，这里不做过多的阐述，若我们的项目为新项目的话，还需要先生成一个Android安装包（必须生成 Apk 包之后安装），安装至某一个手机中，然后在该手机中使用上面的 Gen_Signature_Android221cbf 应用获取 Signature 值，再填入开放平台的相应设置中。

您在申请了AppID之后，还需要了解到你需要将你的包名也设置进入开放平台中，该包名在 Ionic 项目中的， config.xml 文件中可以进行设置。

该插件必须在 Platform 添加之后安装，所以我们先添加一个 Platform，比如 Android：

1.   ionic platform add android

在 App 的根目录下使用下面的命令即可：

1.   cordova plugin add com.wordsbaking.cordova.wechat --variableAPP_ID=[你的APPID]

上面的 APP_ID 为你在微信开放平台申请的 App ID，安装该插件时，必须添加至命令中。

打包并安装使用

将新生成的项目专稿 Eclipse 中，打包并安装测试。