标签 cordova 下的文章

不知道 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 中,打包并安装测试。

有史以来最强大的开源内容管理系统 Drupal,有史以来最简单的应用开发框架 Phonegap(或者称之为 Cordova),当这两者相遇,就有了这强大的 DrupalGap。

首先,我是一名忠实的Drupal用户,虽然Drupal很多时候让我很苦恼,但是我从来没有打算放弃过它,因为它在别的东西都解决不了问题的时候,总能帮我更快的解决,而PhoneGap(开源版本为 Cordova)我才用没到一年,但是已经感觉到,在一般的应用中,它能给我们带来更快的开发效率,虽然运行效率是差了一点点,不如原生态的,但是,对于一般的小项目,在这开发效率与运行效率之间,它能取得一个很好的平衡,这就已经完全满足我的要求了,最主要的是,HTML5+CSS3太强大了,现在的总是是我需要Drupal来做后端,Phonegap来实现前端,它们之间怎么联系?这就用到了一个杂交体 DrupalGap。

需要完成的项目介绍

写本文的原因是最近要做一个手机端项目,项目的需求其实很简单:

  • 用户可以通过App查看湖南省所有高速公路广告牌(包括其状态,价格,位置,地图展示等)
  • 管理者有一个很方便使用的后台管理这些广告牌资源
  • 管理者可以通过登陆手机端来发布新的广告牌

其实解决方案很多,完全用不着用Drupal这么个东西,只是,为了统一整个公司的技术结构,总前想后的还是用了Drupal,这个项目的服务器端(包括管理程序)地址为:http://zhuoyue.projects.ofsz.com,你可以通过这个网址下载该应用。

安装 DrupalGap 模块

DrupalGap本身只是一个Drupal模块,该模块要求你的Drupal系统中已经安装了以下模块:

配置开发环境

PhoneGap 应用本身可以简单的认为是一个HTML5+CSS3+JavaScript实现的手机版网站,所以在电脑上开发PhoneGap应用的最合适的开发环境就是浏览器,当然,最好的选择肯定就是Chrome 莫属了,除了Chrome自身提供的各种各样的开发扩展工具外,PhoneGap还提供了一个强大的Chrome插件—— Emulate,通过该插件,我们可以在浏览器中模拟出移动终端,安装完该插件之后,我们可以开发部署DrupalGap的第二部分了—— Mobile Application Development Kit。

下载 Mobile Application Development Kit ,将其解压并移动至你的Drupal站点根目录下,然后将其文件夹名称改为 mobile(除 app 与 drupalgap 外的任何名称都可以),现在,整个开发环境已经部署完了,但是在正式开发前,我们还需要对 Mobile Application Development Kit 进行一些简单的设置。

修改 Mobile Application Development Kit 配置

进入 Mobile Application Development Kit 中的 app 目录,将 default.settings.js 文件复制一个复本并命名为 settings.js ,打开 settings.js 文件,找到下面这一行:

drupalgap.settings.site_path = ''; // e.g. http://www.example.com

将其修改成为您的Drupal站点的路径,比如我在卓越广告这个项目中的开发站点地址是:http://zhuoyue.projects.ofsz.com,填写进去即可:

drupalgap.settings.site_path = 'http://zhuoyue.projects.ofsz.com'; // e.g. http://www.example.com

然后将 ripple.index.html 中的内容覆盖至 index.html 中,将 Phonegap的示例配置文件 config.xml 保存在应用的根目录中,在本例中我们的应用根目录是 mobile ,我们还需要为应用制作一个图标,保存为 icon.png 文件至 mobile 目录中。下面已经可以通过下面链接访问到你的应用了:

比如我的示例是:

[phonegap] : http://www.phonegap.com
[cordova] : http://cordova.apache.org
[drupalgap] : http://drupalgap.org

[ctools] : http://drupal.org/project/ctools
[libraries] : http://drupal.org/project/libraries
[oauth] : http://drupal.org/project/oauth
[services] : http://drupal.org/project/services
[views] : http://drupal.org/project/views
[views_datasource] : http://drupal.org/project/views_datasource