标签分享下的文章

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

需求

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

准备好你的App

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

ionic start WechatShareDemoApp tabs

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

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

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

// 上面代码省略
.controller('DashCtrl', function($scope, $ionicActionSheet) {
    $scope.share = function(title, desc, url, thumb) {
        $ionicActionSheet.show({
            buttons: [
                { text: '<b>分享至微信朋友圈</b>' },
                { text: '分享给微信好友' }
            ],
            titleText: '分享',
            cancelText: '取消',
            cancel: function() {
                // 取消时执行
            },
            buttonClicked: function(index) {
                if(index == 0) {
                    $scope.shareViaWechat(WeChat.Scene.timeline, title, desc, url, thumb);
                }
                if(index ==1 ) {
                    $scope.shareViaWechat(WeChat.Scene.session, title, desc, url, thumb);
                }
            }
        });
    };
})
// 下面代码省略

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，该方法可以将内容分享至微信中，代码如下：

// 前面代码省略
.controller('DashCtrl', function($scope, $ionicActionSheet, $ionicPopup) {

    //......        

    $scope.shareViaWechat = function(scene, title, desc, url, thumb) {
        // 创建消息体
        var msg = {
            title: title ? title : "行者无疆",
            description: desc ? desc : "A real traveller's province is boundless.",
            url: url ? url : "https://pub.ofcrab.com",
            thumb: thumb ? thumb : null
        };

        WeChat.share(msg, scene, function() {
            $ionicPopup.alert({
                title: '分享成功',
                template: '感谢您的支持！',
                okText: '关闭'
            });
        }, function(res) {
            $ionicPopup.alert({
                title: '分享失败',
                template: '错误原因：' + res + '。',
                okText: '我知道了'
            });
        });
    };
})
// 后面代码省略

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

添加分享按钮

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

<button class="button button-assertive button-outline button-block" ng-click="share()">分享</button>

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

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

微信分享 ActionSheet.jpg

添加微信分享插件

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

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

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

ionic platform add android

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

cordova plugin add com.wordsbaking.cordova.wechat --variable APP_ID=[你的APPID]

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

打包并安装使用

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

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

需求