├── .gitignore ├── pages ├── bb │ ├── bb.json │ ├── bb.js │ ├── bb.wxss │ └── bb.wxml ├── douban │ ├── douban.json │ ├── douban.wxss │ ├── douban.js │ └── douban.wxml ├── detail │ ├── detail.js │ ├── detail.wxss │ └── detail.wxml └── tm │ ├── tm.wxss │ ├── tm.js │ └── tm.wxml ├── images ├── store.png └── store-selected.png ├── app.js ├── app.wxss ├── README.md ├── utils └── util.js └── app.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /pages/bb/bb.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Mock @贝贝" 3 | } -------------------------------------------------------------------------------- /pages/douban/douban.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Mock @豆瓣电影" 3 | } -------------------------------------------------------------------------------- /images/store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hardog/wechat-app-flexlayout/HEAD/images/store.png -------------------------------------------------------------------------------- /images/store-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hardog/wechat-app-flexlayout/HEAD/images/store-selected.png -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | globalData: { 4 | plist: [] 5 | }, 6 | onLaunch: function () { 7 | console.log('app Launching ...'); 8 | } 9 | }); -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | display: flex; 4 | align-content: flex-start; 5 | flex-direction: column; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /pages/detail/detail.js: -------------------------------------------------------------------------------- 1 | var app = getApp(); 2 | Page({ 3 | data: { 4 | detail: {} 5 | }, 6 | onLoad: function(opts){ 7 | console.log(app.globalData.plist[opts.index]); 8 | this.setData({ 9 | detail: app.globalData.plist[opts.index] 10 | }); 11 | } 12 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Wechat app | 从FlexLayout布局开始 4 | 5 | 6 | # 布局效果演示 7 | 8 | ![effect](http://hardog.net/images/assist/20160930/wechat-effect-app-xM.gif) 9 | 10 | **[TinyMonit](https://github.com/hardog/tinymonit.git) 集群监控Wechat app实现** 11 | 12 | ![tm-wechat](http://hardog.net/images/assist/20161008/tm-wechat-example.gif) 13 | 14 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /pages/tm/tm.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .tm{ 3 | height: 600px; 4 | padding: 5rpx; 5 | } 6 | 7 | .m{ 8 | width: 95%; 9 | border: 1px solid #242f34; 10 | border-radius: 3px; 11 | margin: 5rpx auto; 12 | padding: 10rpx; 13 | background-color: #242f34; 14 | color: #fff; 15 | } 16 | 17 | .m-data{ 18 | margin-top: 20rpx; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .m-data-left{ 24 | display: flex; 25 | flex-direction: row; 26 | margin-top: 10rpx; 27 | } 28 | 29 | .m-data-right{ 30 | display: flex; 31 | flex-direction: row; 32 | margin-top: 10rpx; 33 | } 34 | 35 | .m-data-top-left{ 36 | width: 60%; 37 | } 38 | 39 | .m-data-top-right{ 40 | width: 40%; 41 | } 42 | 43 | .m-green{ 44 | color: #0feb00; 45 | } -------------------------------------------------------------------------------- /pages/tm/tm.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp(); 4 | Page({ 5 | data:{ 6 | plist: [] 7 | }, 8 | onLaunch: function(){ 9 | console.log('index Launching ...'); 10 | }, 11 | onShow: function(){ 12 | var that = this; 13 | 14 | setInterval(function(){ 15 | that.intervalMonit(); 16 | }, 1000); 17 | }, 18 | go: function(e){ 19 | wx.navigateTo({ 20 | url: '../detail/detail?index=' + e.currentTarget.id 21 | }); 22 | }, 23 | intervalMonit: function(){ 24 | var that = this; 25 | 26 | wx.request({ 27 | url: 'http://localhost:8080', 28 | header: { 29 | 'Content-Type': 'application/json' 30 | }, 31 | success: function(r){ 32 | app.globalData.plist = r.data; 33 | that.setData({ 34 | plist: r.data 35 | }); 36 | } 37 | }); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /pages/tm/tm.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 机器名称: {{item.sys.hostname}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/tm/tm", 4 | "pages/bb/bb", 5 | "pages/douban/douban", 6 | "pages/detail/detail" 7 | ], 8 | "tabBar":{ 9 | "borderStyle": "white", 10 | "list": [{ 11 | "text": "TM", 12 | "pagePath": "pages/tm/tm", 13 | "iconPath": "images/store.png", 14 | "selectedIconPath": "images/store-selected.png" 15 | },{ 16 | "text": "贝贝", 17 | "pagePath": "pages/bb/bb", 18 | "iconPath": "images/store.png", 19 | "selectedIconPath": "images/store-selected.png" 20 | },{ 21 | "text": "豆瓣", 22 | "pagePath": "pages/douban/douban", 23 | "iconPath": "images/store.png", 24 | "selectedIconPath": "images/store-selected.png" 25 | }] 26 | }, 27 | "window":{ 28 | "backgroundTextStyle":"light", 29 | "navigationBarBackgroundColor": "#fff", 30 | "navigationBarTitleText": "TinyMonit", 31 | "navigationBarTextStyle":"black" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/douban/douban.wxss: -------------------------------------------------------------------------------- 1 | .menu{ 2 | position: fixed; 3 | top: 0px; 4 | width: 100%; 5 | background: #fff; 6 | border-bottom:#eee solid 1px; 7 | z-index: 100000 8 | } 9 | 10 | .top-nav{ 11 | white-space: nowrap; 12 | width: 95%; 13 | margin: 0 auto; 14 | } 15 | 16 | .top-btn{ 17 | display: inline-block; 18 | padding: 22rpx; 19 | } 20 | 21 | .top-hoverd-btn{ 22 | color: #42bd56; 23 | border-bottom: #42bd56 solid 1px; 24 | } 25 | 26 | .content{ 27 | display: flex; 28 | flex-direction: column; 29 | margin-top: 42px; 30 | height: 600px; 31 | } 32 | 33 | .img-poster{ 34 | margin: 1rpx; 35 | padding: 5rpx; 36 | text-align: center; 37 | box-sizing: border-box; 38 | } 39 | 40 | .actual-img{ 41 | width: 370px; 42 | height: 200px; 43 | } 44 | 45 | .col3{ 46 | display: flex; 47 | flex-direction: column; 48 | margin: 15rpx 0; 49 | clear: both; 50 | } 51 | 52 | .col3-h{ 53 | border-bottom: #eee dotted 1px; 54 | padding: 10rpx; 55 | font-size: 16px; 56 | } 57 | 58 | .col3-img{ 59 | display: inline-block; 60 | margin: 0 1px; 61 | } 62 | 63 | .c3-actual-img{ 64 | width: 130px; 65 | height: 180px; 66 | } 67 | 68 | .col3-img-list{ 69 | width: 100%; 70 | white-space: nowrap; 71 | margin: 2rpx; 72 | } 73 | 74 | .nav{ 75 | display: flex; 76 | flex-flow: row wrap; 77 | } 78 | 79 | .tag{ 80 | margin: 3px 5px; 81 | } -------------------------------------------------------------------------------- /pages/douban/douban.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | hot: 'top-hoverd-btn', 4 | film: '', 5 | book: '', 6 | telv: '', 7 | active: '', 8 | music: '', 9 | other: '', 10 | other1: '' 11 | }, 12 | onLaunch: function(){ 13 | console.log('douban Launching ...'); 14 | }, 15 | toHot: function(){ 16 | console.log('hot'); 17 | this.updateBtnStatus('hot'); 18 | }, 19 | toFilm: function(){ 20 | console.log('film'); 21 | this.updateBtnStatus('film'); 22 | }, 23 | toReadBook: function(){ 24 | console.log('readbook'); 25 | this.updateBtnStatus('book'); 26 | }, 27 | toTelv: function(){ 28 | console.log('telv'); 29 | this.updateBtnStatus('telv'); 30 | }, 31 | toActive: function(){ 32 | console.log('active'); 33 | this.updateBtnStatus('active'); 34 | }, 35 | toMusic: function(){ 36 | console.log('music'); 37 | this.updateBtnStatus('music'); 38 | }, 39 | toOther: function(){ 40 | console.log('other'); 41 | this.updateBtnStatus('other'); 42 | }, 43 | toOther1: function(){ 44 | console.log('other1'); 45 | this.updateBtnStatus('other1'); 46 | }, 47 | updateBtnStatus: function(k){ 48 | this.setData({ 49 | hot: this.getHoverd('hot', k), 50 | film: this.getHoverd('film', k), 51 | book: this.getHoverd('book', k), 52 | telv: this.getHoverd('telv', k), 53 | active: this.getHoverd('active', k), 54 | music: this.getHoverd('music', k), 55 | other: this.getHoverd('other', k), 56 | other1: this.getHoverd('other1', k) 57 | }); 58 | }, 59 | getHoverd: function(src, dest){ 60 | return (src === dest ? 'top-hoverd-btn' : ''); 61 | } 62 | }); -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | .m-detail{ 2 | width: 95%; 3 | margin: 0 auto; 4 | background-color: #242f34; 5 | border-radius: 3rpx; 6 | color: #fff; 7 | padding: 20rpx; 8 | } 9 | 10 | .m-name{ 11 | display: flex; 12 | flex-direction: row; 13 | font-size: 16px; 14 | } 15 | 16 | .m-name-left{ 17 | width: 60%; 18 | } 19 | 20 | .m-name-right{ 21 | width: 40%; 22 | } 23 | 24 | .m-name-right{ 25 | text-align: left; 26 | } 27 | 28 | .m-green{ 29 | color: #0feb00; 30 | } 31 | 32 | .m-block{ 33 | margin: 40rpx auto; 34 | } 35 | 36 | .m-plist{ 37 | border-top: 1px solid #fff; 38 | width: 98%; 39 | padding: 10rpx; 40 | } 41 | 42 | .m-plist-title{ 43 | padding: 10rpx 0 20rpx 0; 44 | font-size: bold; 45 | text-align: left; 46 | } 47 | 48 | .m-plist-head{ 49 | padding: 5rpx 0; 50 | display: flex; 51 | flex-direction: row; 52 | } 53 | 54 | .m-plist-body{ 55 | display: flex; 56 | flex-direction: row; 57 | } 58 | 59 | .m-plist-ceil{ 60 | width: 30%; 61 | text-align: left; 62 | } 63 | 64 | .m-plist-body .m-plist-ceil{ 65 | font-size: 14px; 66 | } 67 | 68 | .m-cpu-list{ 69 | display: flex; 70 | flex-direction: row; 71 | text-align: left; 72 | } 73 | 74 | .m-cpu-single-20, 75 | .m-cpu-single-30{ 76 | padding: 5rpx; 77 | } 78 | 79 | .m-cpu-single-20{ 80 | width: 20%; 81 | } 82 | 83 | .m-cpu-single-30{ 84 | width: 30%; 85 | } 86 | 87 | .m-mem-percent, 88 | .m-cpu-percent{ 89 | text-align: left; 90 | font-size: 14px; 91 | } 92 | 93 | .m-mem{ 94 | display: flex; 95 | flex-direction: column; 96 | } 97 | 98 | .m-mem-body{ 99 | display: flex; 100 | flex-direction: row; 101 | } 102 | 103 | .m-load{ 104 | font-size: 14px; 105 | } 106 | 107 | .m-mem-single{ 108 | width: 33%; 109 | text-align: left; 110 | } -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CPU: {{detail.sys.cpus.percent}} 8 | 9 | 内核{{index}} 10 | {{item.percent}} 11 | {{item.free}} 12 | {{item.total}} 13 | 14 | 15 | 16 | MEM 17 | 18 | {{detail.sys.mem.percent}} 19 | {{detail.sys.mem.free}} 20 | {{detail.sys.mem.total}} 21 | 22 | 23 | 24 | 25 | 26 | 27 | 进程列表 28 | 29 | PID 30 | CPU 31 | MEM 32 | 33 | 34 | {{item.pid}} 35 | {{item.cpu}} 36 | {{item.mem}} 37 | 38 | 39 | -------------------------------------------------------------------------------- /pages/bb/bb.js: -------------------------------------------------------------------------------- 1 | //获取应用实例 2 | Page({ 3 | data: { 4 | new: 'top-hoverd-btn', 5 | good: '', 6 | child: '', 7 | mom: '', 8 | girl: '', 9 | shoe: '', 10 | home: '', 11 | beauti: '', 12 | food: '', 13 | hidden: false 14 | }, 15 | toNew: function(){ 16 | console.log('new'); 17 | this.updateBtnStatus('new'); 18 | }, 19 | toGood: function(){ 20 | console.log('good'); 21 | this.updateBtnStatus('good'); 22 | }, 23 | toChild: function(){ 24 | console.log('child'); 25 | this.updateBtnStatus('child'); 26 | }, 27 | toMom: function(){ 28 | console.log('mom'); 29 | this.updateBtnStatus('mom'); 30 | }, 31 | toGirl: function(){ 32 | console.log('girl'); 33 | this.updateBtnStatus('girl'); 34 | }, 35 | toShoe: function(){ 36 | console.log('shoe'); 37 | this.updateBtnStatus('shoe'); 38 | }, 39 | toHome: function(){ 40 | console.log('home'); 41 | this.updateBtnStatus('home'); 42 | }, 43 | toBeauti: function(){ 44 | console.log('beauti'); 45 | this.updateBtnStatus('beauti'); 46 | }, 47 | toFood: function(){ 48 | console.log('food'); 49 | this.updateBtnStatus('food'); 50 | }, 51 | onLaunch: function () { 52 | console.log('bb Launching ...'); 53 | }, 54 | onShow: function(){ 55 | var that = this; 56 | setTimeout(function(){ 57 | that.setData({ 58 | hidden: true 59 | }); 60 | }, 1500); 61 | }, 62 | updateBtnStatus: function(k){ 63 | this.setData({ 64 | new: this.getHoverd('new', k), 65 | good: this.getHoverd('good', k), 66 | child: this.getHoverd('child', k), 67 | mom: this.getHoverd('mom', k), 68 | girl: this.getHoverd('girl', k), 69 | shoe: this.getHoverd('shoe', k), 70 | home: this.getHoverd('home', k), 71 | beauti: this.getHoverd('beauti', k), 72 | food: this.getHoverd('food', k) 73 | }); 74 | }, 75 | getHoverd: function(src, dest){ 76 | return (src === dest ? 'top-hoverd-btn' : ''); 77 | } 78 | }); 79 | -------------------------------------------------------------------------------- /pages/bb/bb.wxss: -------------------------------------------------------------------------------- 1 | .menu{ 2 | position: fixed; 3 | top: 0px; 4 | width: 100%; 5 | background: #fff; 6 | border-bottom:#eee solid 1px; 7 | z-index: 100000 8 | } 9 | 10 | .top-nav{ 11 | white-space: nowrap; 12 | width: 95%; 13 | margin: 0 auto; 14 | } 15 | 16 | .top-btn{ 17 | display: inline-block; 18 | padding: 22rpx; 19 | font-size: 16px; 20 | } 21 | 22 | .top-hoverd-btn{ 23 | color: #42bd56; 24 | border-bottom: #42bd56 solid 1px; 25 | } 26 | 27 | 28 | .line{ 29 | display: flex; 30 | margin: 5rpx; 31 | border: #ddd solid 1px; 32 | padding: 50rpx; 33 | } 34 | 35 | .text-center{ 36 | margin: 0 auto; 37 | } 38 | 39 | .first{ 40 | text-align: center; 41 | padding: 3rpx; 42 | } 43 | 44 | .toutiao{ 45 | padding: 1rpx; 46 | } 47 | 48 | .toutiao-img{ 49 | width: 80px; 50 | height: 80px; 51 | } 52 | 53 | .two-line-text{ 54 | padding: 8px; 55 | display: flex; 56 | flex-direction: column; 57 | } 58 | 59 | .txt{ 60 | margin: 8px 10px; 61 | font-size: 14px; 62 | white-space: nowrap; 63 | } 64 | 65 | .first-img{ 66 | width: 370px; 67 | height: 180px; 68 | } 69 | 70 | .second{ 71 | padding: 5rpx; 72 | } 73 | 74 | .second-img{ 75 | height: 50px; 76 | width: 95%; 77 | margin-bottom: 5rpx; 78 | } 79 | 80 | .sl-col{ 81 | width: 84px; 82 | margin: 0 2rpx; 83 | border: #ddd solid 1px; 84 | text-align: center; 85 | padding: 3rpx; 86 | font-size: 12px; 87 | } 88 | 89 | .forth{ 90 | display: flex; 91 | text-align: center; 92 | padding: 10px; 93 | } 94 | 95 | .forth-img{ 96 | width: 150px; 97 | height: 200px; 98 | } 99 | 100 | .forth .left{ 101 | border: #ddd dotted 1px; 102 | padding: 1rpx; 103 | margin-right: 5rpx; 104 | } 105 | 106 | .forth .right{ 107 | display: flex; 108 | border: #ddd dotted 1px; 109 | flex-direction: column; 110 | font-size: 12px; 111 | } 112 | 113 | .forth .bottom, 114 | .forth .top{ 115 | display: flex; 116 | margin: 1rpx; 117 | 118 | } 119 | 120 | .cl4-img{ 121 | width: 90px; 122 | height: 90px; 123 | } 124 | 125 | .bottom .cl4, 126 | .top .cl4{ 127 | width: 50%; 128 | margin: 1rpx; 129 | border: #ddd dotted 1px; 130 | flex: auto; 131 | text-align: center; 132 | } 133 | 134 | .one-img{ 135 | flex-direction: column; 136 | padding: 1rpx; 137 | } 138 | 139 | .alone-line-text{ 140 | width: 100%; 141 | text-align: center; 142 | padding: 30rpx; 143 | } 144 | 145 | .poster{ 146 | width: 370px; 147 | height: 200px; 148 | background: #0f0; 149 | } 150 | -------------------------------------------------------------------------------- /pages/bb/bb.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 上新 4 | 好货 5 | 童装 6 | 母婴 7 | 女装 8 | 食品 9 | 丽人 10 | 居家 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 工厂直供 24 | 25 | 26 | 27 | 免费试用 28 | 29 | 30 | 31 | 贝贝众筹 32 | 33 | 34 | 35 | 签到领钱 36 | 37 | 38 | 39 | 40 | 41 | 儿童身高, 体重发育标准! 快来看看 ... 42 | 一件衣服值不值得买, 重要看这五点 ... 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 今日特卖 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /pages/douban/douban.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 热门 4 | 电影 5 | 读书 6 | 电视 7 | 活动 8 | 音乐 9 | 其他 10 | 其他1 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 影院热映 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 免费在线观看新篇 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 新篇速递 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | --------------------------------------------------------------------------------