今天嘗試的折騰了一下鳳蝶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`.`image`"/>
</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] = {
"image":"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(卡片列表數據規範) {
image(左邊圖片地址):Image[maxWidth:140,maxHeight:140],
title(條目標題):Text,
date(時間):Date,
praise(點在數量): Number
}
我沒有貼出來得默認就可以了，會自動處理，不用管。
運行結果如圖:
模擬器:
真機：
然後簡單介紹一下ide的一些常用功能：
聲明: 文章由911小程序轉載而來，如圖片不能正常顯示，請訪問原地址: 原文http://911app.cn/article/articleinfo?articleId=22