Drupal8+ionic

作者:老葛 亚艾元软件

  这里探索Drupal 8与最新ionic技术的结合,在Drupal7时代,我们将Drupal 与IOnic 相结合,为客户搭建微信公众号、搭建APP程序,受到了客户的好评。

这里我们将会继续探索Drupal8与IOnic结合的技术实践。

一、系统构成及相关性能指标

 

        我们采用Drupal + Wechat模块 + Solr + Tomcat + AngularJS + Ionic等国际国内先进的技术。

1

二、系统设计特色

 

     2.1一套系统同时支持微信、APP(Android,IOS等)。

 

        由于我们前端采用的Ionic + AngularJS,它所开发出来的产品,既可以在微信浏览器里面打开,也可以通过Phonegap封装成android、IOS等其他手机APP。这样,既可以使得微信、Android、IOS应用的界面保持统一,也降低了开发成本。    

      2.2标准化,采用HTML5技术标准。

 

        通过采用HTML5技术标准,可以充分利用里面的先进技术,比如通过采用SVG矢量图图标,使得图片占用空间更小、能够适应各种屏幕大小且不变形;通过采用HTML视频、音频标签,使得视频、音频的播放能够兼容所有支持HTML5的手机;通过采用HTML5的WebSocket标准,使得从服务器端能够实时的向微信、APP端推送消息。

    

      2.3性能优良,客户端响应极快。

 

        AngularJS,Solr,Drupal,这些系统本身的性能是比较卓著的,加上我们的技术积累,使得我们开发出来的移动应用产品,性能优良;Ionic,AngularJS,在加载一个页面时,仅仅加载了页面中变动的部分,而不是加载整个页面,这样在微信/APP,与后台进行交互时,传输的数据量小,速度快,也为客户节省了移动端的流量。


 2.4界面简洁大方,符合用户思维习惯。

 

      Ionic就是一个UI框架,专门负责UI,它之所以能够成为2015年排名第一的框架,就是漂亮,界面简洁大方。

 

三、系统相关技术支撑系统介绍

 

     我们采用先进的开源技术,加上我们自身的技术积累,通过深度整合,形成了我们自己的产品特色。  

 

 

     3.1 Ionic介绍。

 

7

    

        Ionic是基于HTML5的开源框架UI框架,Ionic 采用AngularJS,而AngularJS是Google公司的技术产品,像Google的Gmail、地图,等很多业务系统,前端都采用AngularJS了进行构建;国内的一些大型互联网公司,比如腾讯、爱奇艺,他们的很多系统,也都采用了AngularJS。Ionic是2015年,全球排名第一的HTML5开源框架,因其界面优美、性能优良,受到了越来越多的APP开发者的喜爱,在中国,基于Ionic技术的开发,使用的人也日益增多。

 

 

     3.2 Ionic+ AngularJS 方面。

 

     我们通过实际的项目经验,先后解决了常见的技术问题:

     1. Ionic(angularJS)示例程序的运行,在phonegap下面的打包。

     2. Ionic(angularJS)与Drupal的连接问题,从Drupal端取数据。

     3. Ionic(angularJS)端登陆Drupal的问题,以及用户的权限控制。

     4. 从Ionic(angularJS)端,向Drupal提交数据的问题。

     5. 通过Ionic(angularJS),向Drupal端上传图片、文件。

     6. 解决Ionic(angularJS)端视频播放的问题。

     7. 解决无限滚动的技术问题,下拉更新的问题。

     8. 解决了在微信端,直接打开Ionic(angularJS)页面的问题。

 


Drupal版本:

React Ionic infinite scroll example

  I try to use infinite scroll component in Ionic (React) project, but there is no document about how to use it, for the official document, it said that ionic react does not support infinite scroll yet. But in source code, it exists. Then I try to fixed it by myself, here is the sample code that I use, it works well:

    作者:亚艾元技术部

我在Ionic(react)项目中,尝试使用无限下拉组件,但是官方没有这方面的文档,官方文档说不支持这个功能暂时,但是在最新的代码里面已经添加了这个组件。我经过自己的不断尝试,将这个常用功能搞定,下面是可以工作的代码:

class Reports extends React.Component<Props, State> {
  ionInfiniteScrollRef: React.RefObject<HTMLIonInfiniteScrollElement>;
  constructor(props: Props) {
    super(props);
     this.ionInfiniteScrollRef = React.createRef<HTMLIonInfiniteScrollElement>();
    this.state = {
      items: [],
         hasMore: true,
         page:0
      //showPopover: false,
      //showPopoverEvent: null
    };
  }
 
  componentDidMount() {
     this.loadItems();
  }
  loadMoreItems = () =>{
     this.loadItems();
      if (this.ionInfiniteScrollRef.current) {
      this.ionInfiniteScrollRef.current.complete();
      }           
        //e.target.complete();
  }
….
<IonContent color="primary" >
    {this.renderList()}
  <IonInfiniteScroll threshold="50px" ref={this.ionInfiniteScrollRef}  onIonInfinite={this.loadMoreItems}>
    <IonInfiniteScrollContent
      loadingSpinner="bubbles"
      loadingText="Loading more data...">      
    </IonInfiniteScrollContent>
  </IonInfiniteScroll>
 </IonContent>

 

Several key points:

1, put IonInfiniteScroll after your list.

2, ref={this.ionInfiniteScrollRef}, using Ref to get the instance of IonInfiniteScroll

3, complete it using code “this.ionInfiniteScrollRef.current.complete(); “ in loadMoreItems. Complete method could not be called when componentDidMount.

 

这个问题的关键点:

1, 是IonInfiniteScroll列表放在列表的下面,

2, 使用ref=这个属性,获取当前的IonInfiniteScroll

3,   完成的代码调用“this.ionInfiniteScrollRef.current.complete(); “,我开始尝试把它放在loadItems这个函数里面,loadItems这个函数在componentDidMount里面调用了,这种情况下,会报没有.complete方法。我将它移出来,放在loadMoreItems,解决了这个问题。

Drupal版本: