([\s\S]*?)<\/span>[\s\S]*?<\/div>[\s\S]*?<\/div>/g
);
if (!list || !list.length) {
return retry();
}
callback(
list.reduce((array, item) => {
const [all, icon, name, detail] = item.match(
/
)
([\s\S]*?)<\/h4>[\s\S]*?
([\s\S]*?)<\/span>/
);
return [...array, { icon, name, detail }];
}, [])
);
} catch (e) {
retry();
}
},
fail: retry
});
}
================================================
FILE: src/page/index/index.js
================================================
import { getRankList } from "../../common/api";
Page({
data: {
rankList: [],
githubUrl: "https://github.com/zhuweiyou/fetop100"
},
onLoad() {
this.getData();
},
onPullDownRefresh() {
this.getData();
},
getData() {
wx.showNavigationBarLoading();
getRankList(rankList => {
this.setData({ rankList });
wx.stopPullDownRefresh();
wx.hideNavigationBarLoading();
});
},
copyGithubUrl() {
wx.setClipboardData({ data: this.data.githubUrl });
},
onShareAppMessage() {
return {
title: "TOP100的前端框架排名",
path: "/page/index/index"
};
}
});
================================================
FILE: src/page/index/index.json
================================================
{
"enablePullDownRefresh": true
}
================================================
FILE: src/page/index/index.wxml
================================================
{{rankList[0].name}}
{{rankList[0].detail}}
{{index + 1}}
{{rank.name}}
{{rank.detail}}
{{githubUrl}}
================================================
FILE: src/page/index/index.wxss
================================================
page {
background: #f7f8fa;
}
.rank__banner {
background-image: linear-gradient(135deg, #79f1a4, #0e5cad);
color: #fff;
padding: 15px 15px 0;
}
.rank__list {
padding: 0 15px 15px;
}
.rank__item {
padding: 15px 0;
border-bottom: 1px dashed #ddd;
position: relative;
display: flex;
background-color: #fff;
color: #4e4f54;
}
.rank__item--first {
padding: 15px;
text-align: center;
overflow: hidden;
background-color: rgba(8, 105, 132, .52);
color: #60bed8;
border: 0;
flex-direction: column;
}
.rank__item--last {
border-bottom: 0;
}
.rank__no {
width: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.rank__icon {
width: 60px;
height: 60px;
background: #f3f3f3;
}
.rank__icon--first {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 10px;
animation: rank__icon--first 20s infinite linear;
}
@keyframes rank__icon--first {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.rank__info {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 15px;
}
.rank__name {
font-size: 18px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.rank__detail {
font-size: 14px;
word-break: break-all;
word-wrap: break-word;
}
.rank__tip {
text-align: center;
font-size: 14px;
color: #666;
padding: 0 15px 15px;
}
================================================
FILE: src/project.config.json
================================================
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"nodeModules": false
},
"compileType": "miniprogram",
"libVersion": "2.1.1",
"appid": "wx993aa7f068f791ea",
"projectname": "%E5%89%8D%E7%AB%AFTOP100",
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
================================================
FILE: src/sitemap.json
================================================
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}