标签 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(除 appdrupalgap 外的任何名称都可以),现在,整个开发环境已经部署完了,但是在正式开发前,我们还需要对 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