今天尝试的折腾了一下凤蝶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