详解如何开发一个凤蝶H5（支付宝小程序）的组件

今天尝试的折腾了一下凤蝶5(支付宝的小程序),现在开放的东西还很少。ide不是很好用。

凤蝶H5是有dom的，对于开发者来说非常好。这也符合web前段开发的习惯。

大体上和微信小程序差不了太多。至于详细的模块组件就不介绍了，可以去看官方文档,

文档地址链接:   凤蝶H5开放文档链接 

其中最重要的部分就是组件了，凤蝶H5的页面是由组件组合而成的，下面我会在实战中介绍组件。

首先看一下组件的目录结构以及各个文件的作用:

如下图:

1. .axml  视图展示文件，该文件描述了这个组件长啥样子

2. .js  该文件描述了这个组件中需要的业务逻辑

其中两个重要的东西分别是:

a. data对象，和微信小程序一样，data是用来装载视图层所需数据的。默认情况下data会注入一个schemaData（用来描述组件数据格式的东西,具体语法请看官方文档，很容易理解）

b. onReady方法，是在组件渲染完毕后调用的一个方法。它有一个参数，这个参数就是组件对应的dom节点。

可以通过setData()方法来动态设置data中的数据。

3. .json 这个文件转载了一些符合schemaData约定的静态数据。该文件中的数据会提供给.axml使用

4. .less css文件，描述.axml中view样式。

5. .schema 组件所需数据格式描述.

6. package.json 该文件不是必须存在的，不存在时，表示该组件是一个可编辑组件，此时组件不能放在 FengdieContainer 中；存在时，表示该组件是一个可拖拽、可复制组件，需描述相关信息，包括 name snapshot title，其中，name 需和组件 component 名保持一致，且可复制组件只能放在 FengdieContainer中。

总结一下：.sechema规范组件所需数据格式->.json初始化view层所需数据(数据格式遵循.sechema规范)->.js调用onReady来处理业务逻辑，将处理结果存放data中->.axml从.json和data中拿到数据显示

基于以上组件的知识，下面制作一个简单的组件来实践。

1. 第一步：删掉系统默认带的组件如图:

删除的时候会抱一堆错误, 记得将pages/index.axml中的引用的组件一并删掉（如果还出问题，重启ide）

2. 第二步: 我们选择自定义组件 

起名叫CardList

然后各个文件内容如下：（都很简单，就不一一介绍了，主要是搞清楚渲染的流程就可以了）

CardList.axml：

<view class="card-list-wrapper">

  <view class="card-title">

    <img src="`titlePic`" />

  </view>

  <view class="card-list-item" a:for="`items`">

    <view class="pleft">

      <img src="`item`.`p_w_picpath`"/> 

    </view>

    <view class="iright">

      <view class="title">`item`.`title`</view>

      <view class="assist">

        <view class="date">`item`.`date`</view>

        <view class="praise fa fa-thumbs-o-up">+`item`.`praise`</view>

      </view>

    </view>

  </view>

</view>

CardList.js：

import { Component } from 'fengdie-component';

import './CardList.less';

export default Component({

    data:{

        titlePic:'https://cdns.911app.cn/Fgx6q1TZPA7jkjrx61iGt-XAvp-q', //顶部图片

        items:[] //列表数据集

    },

    onReady(dom){

        let cards = [];  //模拟从服务器拿到的数据

        for(let i=0; i<10; i++){

            cards[i] = {

                 "p_w_picpath":"https://cdns.911app.cn/Fgx6q1TZPA7jkjrx61iGt-XAvp-q",

                 "title":"这里是标题啦"+i,

                 "date":"2017-01-11 12:1"+i,

                 "praise":i

            };

        } 

        this.setData({items:cards}); //设置列表数据

    }

});

CardList.less：

.card-list-wrapper{

    background: #EFEFF4;

    display: flex;

    flex-direction: column;

}

.card-title{

    img{

      height: 160px;

      width: 100%;

    }

    display: flex;

    background: #fff;

    height: 160px;

    width: 100%;

    align-items: center;

    justify-content: center;

}

.card-list-item{

    display: flex;

    flex-direction: row;

    background: #fff;

    margin-bottom:20px;

    padding: 20px;

    -moz-box-shadow:2px 2px 10px #ccc;

    -webkit-box-shadow:2px 2px 10px #ccc;

    box-shadow:2px 2px 10px #ccc; 

}

.pleft{

    img{

        width: 140px;

        height: 140px;

    }

    width: 173px;

    height: 140px;

}

.title{

    flex: 1;

}

.iright{

    display: flex;

    flex-direction: column;

    margin-left:20px;

    width: 100%;

}

.assist{

    display: flex;

    flex-direction: row;

    align-items: center;

}

.date{

    flex: 3;

}

.praise{

    flex: 1;

}

CardList.schema：

Array(卡片列表数据规范) {

  p_w_picpath(左边图片地址):Image[maxWidth:140,maxHeight:140],

  title(条目标题):Text,

  date(时间):Date,

  praise(点在数量): Number

}

我没有贴出来得默认就可以了，会自动处理，不用管。

运行结果如图:

模拟器:

真机：

然后简单介绍一下ide的一些常用功能：

声明: 文章由911小程序转载而来，如图片不能正常显示，请访问原地址:  原文http://911app.cn/article/articleinfo?articleId=22

转载于:https://blog.51cto.com/codeguy/1934290