├── show-img
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    └── mulu.png
├── .gitignore
├── reading
    ├── hr.we
    ├── search.we
    ├── hot-recommend.we
    ├── recommend.we
    ├── category.we
    └── list.we
├── setting.we
├── util.js
├── post.we
├── README.MD
├── components-add
    ├── wxc-navpage.we
    ├── wxc-navbar.we
    └── tabbar.we
├── yywebview.we
├── index.we
└── reading.we


/show-img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/weex-yy/HEAD/show-img/1.png


--------------------------------------------------------------------------------
/show-img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/weex-yy/HEAD/show-img/2.png


--------------------------------------------------------------------------------
/show-img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/weex-yy/HEAD/show-img/3.png


--------------------------------------------------------------------------------
/show-img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/weex-yy/HEAD/show-img/4.png


--------------------------------------------------------------------------------
/show-img/mulu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vczero/weex-yy/HEAD/show-img/mulu.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | 
 3 | node_modules
 4 | 
 5 | 
 6 | .idea
 7 | 
 8 | /dist
 9 | 
10 | 


--------------------------------------------------------------------------------
/reading/hr.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hr"></div>
 3 | </template>
 4 | 
 5 | <style>
 6 |  .hr{
 7 |    margin-top:20;
 8 |    border-top-width:1;
 9 |    border-top-color:#C1C1C1;
10 |    height:20;
11 |  }
12 | </style>


--------------------------------------------------------------------------------
/setting.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrapper">
 3 |      <text class="text" style="color:{{color}}">设置</text>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | 
 9 | </style>
10 | 
11 | <script>
12 | 
13 | </script>


--------------------------------------------------------------------------------
/util.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | //App数据接口
 4 | //1) type表示不同的类型, 主要有config, it, manager, cookies, sanwen
 5 | //2)http://123.57.39.116:3000/data/read?type=config
 6 | var SERVER_PATH = 'http://123.57.39.116:3000/data/read?type=';
 7 | 
 8 | 
 9 | exports.getServerPath = function() {
10 | 	return SERVER_PATH;
11 | };


--------------------------------------------------------------------------------
/post.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="wrapper">
 3 |      <text class="text">反馈</text>
 4 |      <text>{{text}}</text>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style>
 9 | 
10 | </style>
11 | 
12 | <script>
13 |     module.exports = {
14 |         data: {
15 |             data2: []
16 |         },
17 |         created: function(){
18 | 
19 |         },
20 |         computed:{
21 | 
22 |         }
23 |     };
24 | </script>


--------------------------------------------------------------------------------
/reading/search.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="height:80; margin-top:25;">
 3 |     <input class="search" type="text"  placeholder="搜索"></input>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 |  .search {
 9 |    height:75;
10 |    padding-left:20;
11 |    font-size:30;
12 |    border-width:1;
13 |    border-color:#C1C1C1;
14 |    margin-left:10;
15 |    margin-right:10;
16 |    outline:none;
17 |    border-radius:5;
18 |    placeholder-color:#393939;
19 |    font-weight: 200;
20 |  }
21 | </style>


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
 1 | ## 微阅读
 2 | 基于weex开发的微阅读App，供准备学习Weex的同学大家参考。内容包括：页面跳转、tabbar、navpage抽离出来自己定制等。           
 3 | 
 4 | ## 如何运行     
 5 | 1. 下载https://github.com/alibaba/weex官方仓库。      
 6 | 2. 删除examples目录下面的所有文件，将该项目里面所有文件拷贝进去。         
 7 | 	![](show-img/mulu.png)
 8 | 3. Web预览。在weex仓库根目录执行
 9 | 
10 | 	```
11 | 	./start
12 | 	```
13 | 	这时候应该启动了编译和服务器。     
14 | 	浏览器输入：127.0.0.1:12580 即可预览效果。     
15 | 4. iOS预览，按照weex仓库步骤，运行playground。  
16 | 
17 | ## 效果  
18 |       
19 | ![](show-img/1.png)       
20 | ![](show-img/2.png)     
21 | ![](show-img/3.png)      
22 | ![](show-img/4.png)           
23 | 
24 | 
25 | ## H5效果和定制化打包      
26 | 参考：https://github.com/vczero/weex-yy-h5
27 | 


--------------------------------------------------------------------------------
/components-add/wxc-navpage.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   	<div class="wrapper">
 3 |     	  <wxc-navbar data-role={{dataRole}} height={{height}} background-color={{backgroundColor}} title={{title}} title-color={{titleColor}} left-item-src={{leftItemSrc}} left-item-title={{leftItemTitle}} left-item-color={{leftItemColor}} right-item-src={{rightItemSrc}} right-item-title={{rightItemTitle}} right-item-color={{rightItemColor}}></wxc-navbar>
 4 |     	  <div class="wrapper" style="margin-top:{{height}}">
 5 |     		    <content></content>
 6 |     	  </div>
 7 |   	</div>
 8 | </template>
 9 | 
10 | <style>
11 |   	.wrapper {
12 |   		position: absolute; 
13 |   		top: 0; 
14 |   		left: 0; 
15 |   		right: 0; 
16 |   		bottom: 0;
17 |   	}
18 | </style>
19 | 
20 | <script>
21 |     require('./wxc-navbar.we');
22 |     module.exports = {
23 |         data: {
24 |           dataRole: 'navbar',
25 |           backgroundColor: 'black',
26 |           height: 88,
27 |           title: "",
28 |           titleColor: 'black',
29 |           rightItemSrc: '',
30 |           rightItemTitle: '',
31 |           rightItemColor: 'black',
32 |           leftItemSrc: '',
33 |           leftItemTitle: '',
34 |           leftItemColor: 'black',
35 |         }
36 |     }
37 | </script>


--------------------------------------------------------------------------------
/yywebview.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wrapper">
 3 |         <web class="web" src="{{src}}" style="height:{{height}};" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
 4 |     </div>
 5 | </template>
 6 | 
 7 | 
 8 | <style>
 9 |     .text{
10 |         font-size:26;
11 |     }
12 | 
13 |     .web{
14 |         flex:1;
15 |     }
16 | </style>
17 | <script>
18 |     require('./components-add/wxc-navpage.we');
19 |     //background-color="#0A60FE" title-color="#fff" left-item-color="#fff"
20 |     module.exports = {
21 |         data: {
22 |             src: '',
23 |             width: 0,
24 |             height: 0,
25 |             src: '',
26 |             title: '测试页面',
27 |             leftTitle:'',
28 |         },
29 |         created: function(){
30 |             var config  = this.$getConfig();
31 |             this.width = config.env.deviceWidth;
32 |             this.height = config.env.deviceHeight;
33 |             var url = config.bundleUrl;
34 |             this.src = this._getUrl(url, 'weixin_url');
35 |             this.title = decodeURIComponent(this._getUrlParam(url, 'weixin_title'));
36 | 
37 |             this.$on('naviBar.leftItem.click',function(e){
38 |                 //pop back
39 |                 var params = {
40 |                     'animated' : 'true',
41 |                 }
42 |                 var navigator = require('@weex-module/navigator');
43 |                 navigator.pop(params, function(e) {});
44 |             });
45 |         },
46 | 
47 |         methods: {
48 |             pagestart: function(){
49 |                 //TODO: loading
50 |             },
51 |             pagefinish: function(){
52 |                 //TODO: close loading
53 |             },
54 |             error: function(){
55 |                 //TODO: show infowindow
56 |             },
57 |             _getUrl: function(url, key){
58 |                 var isExits = url.indexOf(key);
59 |                 if(isExits > -1){
60 |                     return url.split('url=')[1];
61 |                 }
62 |             },
63 |             _getUrlParam: function(url, key){
64 |                 var reg = new RegExp('[?|&]' + key + '=([^&]+)');
65 |                 var match = url.match(reg);
66 |                 return match && match[1];
67 |             }
68 |         }
69 |     };
70 | 
71 | </script>


--------------------------------------------------------------------------------
/reading/hot-recommend.we:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 |         <div style="flex:1;" class="item" url="{{url}}" title="{{title}}"  repeat="{{hotRecommend}}" onclick="openWebPage">
 4 |             <image class="img" src="{{img}}" style="width:{{width}};" resize="cover"></image>
 5 |             <text class="title" style="width:{{width}};">{{title}}</text>
 6 |         </div>
 7 |     </dvi>
 8 | </template>
 9 | 
10 | <style>
11 |     .row{
12 |         flex-direction: row;
13 |         height: 310;
14 |         margin-top:5;
15 |         margin-right:10;
16 |     }
17 |     .title{
18 |         font-size:26;
19 |         font-weight:300;
20 |         margin-top:5;
21 |         color:#414141;
22 |         lines: 2;
23 |         text-overflow:ellipsis;
24 |         height:80;
25 |     }
26 | 
27 |     .img{
28 |         height:240;
29 |     }
30 |     .item{
31 |         margin-left:10;
32 |     }
33 | </style>
34 | 
35 | <script>
36 |     module.exports = {
37 |         data: {
38 |            hotRecommend: [],
39 |            width: 0,
40 |            dir: 'examples',
41 |            baseURL: ''
42 |         },
43 |         created: function(){
44 |             //var width = (this.$getConfig().env.deviceWidth - 50) /4;
45 |             //this.width = width;
46 |             this.width = 175;
47 | 
48 |             var bundleUrl = this.$getConfig().bundleUrl;
49 |             bundleUrl = new String(bundleUrl);
50 | 
51 |             var nativeBase;
52 |             var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
53 | 
54 |             var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
55 |             if (isAndroidAssets) {
56 |               nativeBase = 'file://assets/';
57 |             }
58 |             else if (isiOSAssets) {
59 |               nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
60 |             }
61 |             else {
62 |              //http://127.0.0.1:12580/examples/build/reading.js
63 |               var host = 'localhost:12580';
64 |               var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
65 |               if (matches && matches.length >= 2) {
66 |                 host = matches[1];
67 |               }
68 |               //nativeBase = 'http://' + host + '/weex_tmp/h5_render/';
69 |               nativeBase = 'http://' + host + '/' + this.dir + '/build/';
70 |             }
71 |             var h5Base = './index.html?page=./' + this.dir + '/build/';
72 |             //Native端
73 |             var base = nativeBase;
74 |             //H5端
75 |             if (typeof window === 'object') {
76 |               base = h5Base;
77 |             }
78 |             this.baseURL = base;
79 |         },
80 |         methods: {
81 |             openWebPage: function(e){
82 |                 var obj = e.target.attr;
83 |                 var url = obj.url;
84 |                 var title = obj.title;
85 |                 
86 |                 var navigator = require('@weex-module/navigator');
87 |                 var params = {
88 |                     'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
89 |                     'animated' : 'true',
90 |                 }
91 |                 navigator.push(params, function(e) {});
92 |             }
93 |         }
94 |     };
95 | </script>


--------------------------------------------------------------------------------
/components-add/wxc-navbar.we:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="container" style="height:{{height}}; background-color:{{backgroundColor}};" data-role={{dataRole}}>
  3 |         <text class="right-text" style="color:{{rightItemColor}};" navi-item-position="right" if={{rightItemSrc}} onclick = "onclickrightitem">{{rightItemTitle}}</text>
  4 |         <image class="right-image" navi-item-position="right" src={{rightItemSrc}} if={{rightItemSrc}} onclick="onclickrightitem"></image>
  5 |         <text class="left-text" style="color:{{leftItemColor}};" navi-item-position="left" if={{leftItemSrc}} onclick= "onclickleftitem">{{leftItemTitle}}</text>
  6 |         <image class="left-image" navi-item-position="left" src={{leftItemSrc}} if={{leftItemSrc}} onclick="onclickleftitem"></image>
  7 |         <text class="center-text" style="color:{{titleColor}};" navi-item-position="center">{{title}}</text>
  8 |     </div>
  9 | </template>
 10 | 
 11 | <style>
 12 |     .container {
 13 |         flex-direction: row; 
 14 |         position: fixed; 
 15 |         top: 0; 
 16 |         left: 0; 
 17 |         right: 0; 
 18 |         width: 750;
 19 |         border-bottom-width:1;
 20 |         border-bottom-color: #E0E0E0;
 21 |     }
 22 |     .right-text {
 23 |         position: absolute; 
 24 |         bottom: 28; 
 25 |         right: 32; 
 26 |         text-align: right;
 27 |         font-size: 32; 
 28 |         font-family: 'Open Sans', sans-serif;
 29 |     }
 30 |     .left-text {
 31 |         position: absolute; 
 32 |         bottom: 28; 
 33 |         left :68;
 34 |         top:20;
 35 |         height: 50;
 36 |         text-align:left;
 37 |         font-size: 32; 
 38 |         font-family: 'Open Sans', sans-serif;
 39 |         text-align:center;
 40 |         line-height:50;
 41 |     }
 42 |     .center-text {
 43 |         position: absolute; 
 44 |         bottom: 25; 
 45 |         left: 172; 
 46 |         right: 172;
 47 |         text-align: center; 
 48 |         font-size: 33;
 49 |         font-weight: bold;
 50 |         text-overflow:ellipsis;
 51 |         height:42;
 52 |         lines:1;
 53 |     }
 54 |     .left-image {
 55 |         position: absolute; 
 56 |         bottom: 20; 
 57 |         left: 20;
 58 |         top:20;
 59 |         width: 50; 
 60 |         height: 50;
 61 |     }
 62 |     .right-image {
 63 |         position: absolute; 
 64 |         bottom: 20; 
 65 |         right: 28; 
 66 |         width: 50; 
 67 |         height: 50;
 68 |     }
 69 | </style>
 70 | 
 71 | <script>
 72 |     module.exports = {
 73 |         data: {
 74 |           dataRole: 'navbar',
 75 | 
 76 |           //导航条背景色
 77 |           backgroundColor: 'black',
 78 | 
 79 |           //导航条高度
 80 |           height: 88,
 81 | 
 82 |           //导航条标题 
 83 |           title: "",
 84 | 
 85 |           //导航条标题颜色
 86 |           titleColor: 'black',
 87 | 
 88 |           //右侧按钮图片
 89 |           rightItemSrc: '',
 90 | 
 91 |           //右侧按钮标题
 92 |           rightItemTitle: '',
 93 | 
 94 |           //右侧按钮标题颜色
 95 |           rightItemColor: 'black',
 96 | 
 97 |           //左侧按钮图片
 98 |           leftItemSrc: '',
 99 | 
100 |           //左侧按钮标题
101 |           leftItemTitle: '',
102 | 
103 |           //左侧按钮颜色
104 |           leftItemColor: 'black',
105 |         },
106 |         methods: {
107 |           onclickrightitem: function (e) {
108 |             this.$dispatch('naviBar.rightItem.click', {});
109 |           },
110 |           onclickleftitem: function (e) {
111 |             this.$dispatch('naviBar.leftItem.click', {});
112 |           }
113 |         }
114 |     }
115 | </script>
116 | 


--------------------------------------------------------------------------------
/reading/recommend.we:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |       <text class="title-big">推荐专题</text>
  4 |       <div class="img-view">
  5 |          <div class="img-div-left center" onclick="openWebPage(0)">
  6 |             <image class="img" style="height:200;width:{{width}}};" resize="cover" src="{{imgs[0]}}" />
  7 |          </div>
  8 |          <div class="img-div-right center" onclick="openWebPage(1)">
  9 |             <image class="img" style="height:200;width:{{width}}};" resize="cover" src="{{imgs[1]}}" />
 10 |          </div>
 11 |       </div>
 12 |     </div>
 13 | </template>
 14 | 
 15 | <style>
 16 |  .center{
 17 |    justify-content:center;
 18 |    align-items:center;
 19 |   }
 20 |  .title-big{
 21 |    font-size:32;
 22 |    font-weight:200;
 23 |    color:#444444;
 24 |    margin-left:10;
 25 |  }
 26 |  .img-view{
 27 |    flex-direction:row;
 28 |    height:200;
 29 |    margin-top:20;
 30 |  }
 31 |  .img-div-left{
 32 |    flex:1;
 33 |    margin-left:10;
 34 |    margin-right:5;
 35 |    height:200;
 36 |  }
 37 |  .img-div-right{
 38 |    flex:1;
 39 |    margin-left:5;
 40 |    margin-right:10;
 41 |  }
 42 |  .img{
 43 |    border-radius:5;
 44 |  }
 45 | </style>
 46 | 
 47 | <script>
 48 |   var webview = require('@weex-module/webview');
 49 |   module.exports = {
 50 |     data:{
 51 |       width: 0,
 52 |       recommend: [],
 53 |       dir: 'examples',
 54 |       baseURL: ''
 55 |     },
 56 |     created: function(){
 57 |         //这里需要兼容web和Native，因为web有viewport的scale控制，而native没有
 58 |         var config = this.$getConfig();
 59 |         this.width = 360;
 60 | 
 61 |         var bundleUrl = config.bundleUrl;
 62 |         bundleUrl = new String(bundleUrl);
 63 |         var nativeBase;
 64 |         var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
 65 | 
 66 |         var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
 67 |         if (isAndroidAssets) {
 68 |           nativeBase = 'file://assets/';
 69 |         }
 70 |         else if (isiOSAssets) {
 71 |           nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
 72 |         }
 73 |         else {
 74 |          //http://127.0.0.1:12580/examples/build/reading.js
 75 |           var host = 'localhost:12580';
 76 |           var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
 77 |           if (matches && matches.length >= 2) {
 78 |             host = matches[1];
 79 |           }
 80 |           //nativeBase = 'http://' + host + '/weex_tmp/h5_render/';
 81 |           nativeBase = 'http://' + host + '/' + this.dir + '/build/';
 82 |         }
 83 |         var h5Base = './index.html?page=./' + this.dir + '/build/';
 84 |         //Native端
 85 |         var base = nativeBase;
 86 |         //H5端
 87 |         if (typeof window === 'object') {
 88 |           base = h5Base;
 89 |         }
 90 |         this.baseURL = base;
 91 |     },
 92 |     computed: {
 93 |         imgs: {
 94 |             get: function(){
 95 |                 var imgs = [];
 96 |                 var recommend = this.recommend;
 97 |                 for(var i in recommend){
 98 |                     imgs.push(recommend[i].img);
 99 |                 }
100 |                 return imgs;
101 |             }
102 |         }
103 |     },
104 |     methods: {
105 |         openWebPage: function(index){
106 |             var url = this.recommend[index].url;
107 |             var title = this.recommend[index].title;
108 |             //var path = './index.html?page='+ './dist/yywebview.js&weixin_title=' + title + '&weixin_url=' + url;
109 |             var navigator = require('@weex-module/navigator');
110 |             var params = {
111 |                 'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
112 |                 'animated' : 'true',
113 |             }
114 |             console.log('------',params.url);
115 |             navigator.push(params, function(e) {});
116 |         }
117 |     }
118 |   };
119 | </script>


--------------------------------------------------------------------------------
/index.we:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | <template>
  5 |   <div>
  6 |       <search></search>
  7 |       <hr></hr>
  8 |       <scroller class="scroller">
  9 |          <recommend recommend="{{recommendTopic}}"></recommend>
 10 |          <hr></hr>
 11 |          <text class="title-big">热门推荐</text>
 12 |          <hot-recommend hot-recommend="{{hotRecommend1}}"></hot-recommend>
 13 |          <hot-recommend hot-recommend="{{hotRecommend2}}"></hot-recommend>
 14 | 
 15 |          <hr></hr>
 16 |          <text class="title-big">专题分类</text>
 17 |          <category list="{{category1}}"></category>
 18 |          <category list="{{category2}}"></category>
 19 | 
 20 |          <hr></hr>
 21 |          <text class="title-big">轻松一刻</text>
 22 |          <hot-recommend hot-recommend="{{cookies1}}"></hot-recommend>
 23 |          <hot-recommend hot-recommend="{{cookies2}}"></hot-recommend>
 24 | 
 25 |          <div style="height:50;"></div>
 26 |       </scroller>
 27 |       
 28 |   </div>
 29 | </template>
 30 | 
 31 | <style>
 32 |     .title-big{
 33 |        font-size:32;
 34 |        font-weight:200;
 35 |        color:#444444;
 36 |        margin-left:10;
 37 |        margin-bottom:10;
 38 |     }
 39 |     .container {
 40 |         position: absolute;
 41 |         top: 0; left: 0;
 42 |         right: 0;
 43 |         bottom: 0;
 44 |         margin-top: 0;
 45 |         margin-bottom: 88;
 46 |     }
 47 |     .scroller{
 48 |         position: absolute;
 49 |         top: 160;
 50 |         left: 0;
 51 |         right: 0;
 52 |         bottom: 0;
 53 |     }
 54 | </style>
 55 | 
 56 | <script>
 57 |     require('./components-add/tabbar.we');
 58 |     require('./reading/search.we');
 59 |     require('./reading/hr.we');
 60 |     require('./reading/recommend.we');
 61 |     require('./reading/hot-recommend.we');
 62 |     require('./reading/category.we');
 63 |     //var util = require('./util');
 64 |     
 65 |     var SERVER_PATH = 'http://123.57.39.116:3000/data/read?type=';
 66 |     module.exports = {
 67 |         data:{
 68 |          width: 0,
 69 |          height: 0,
 70 |          recommendTopic:[],
 71 |          hotRecommend1:[],
 72 |          hotRecommend2:[],
 73 |          category1: [],
 74 |          category2: [],
 75 |          cookies1: [],
 76 |          cookies2: []
 77 |         },
 78 |         created: function(){
 79 |             this._getData();
 80 |         },
 81 |         methods:{
 82 |             _getData: function(){
 83 |                 var that = this;
 84 |                 var stream = require('@weex-module/stream');
 85 |                 var url = SERVER_PATH + 'config';
 86 |                 stream.fetch({
 87 |                   method: 'GET',
 88 |                   url: url,
 89 |                   type:'json'
 90 |                 }, function(response) {
 91 |                     if(response.status == 200){
 92 |                       //这里需要兼容web和Native，Native需要将传递的数据JSON化
 93 |                       var data = response.data;
 94 |                       try{
 95 |                         data = JSON.parse(response.data); 
 96 |                       }catch(e){}
 97 |                                                         
 98 |                       if(data.status){
 99 | 
100 |                         var obj = data.data;
101 |                         that.recommendTopic.$set(0, obj.recommendTopic[0]);
102 |                         that.recommendTopic.$set(1, obj.recommendTopic[1]);                     
103 |                         that.recommendTopic = obj.recommendTopic;
104 |                         that.hotRecommend1 = obj.hotTopic.slice(0, 4);
105 |                         that.hotRecommend2 = obj.hotTopic.slice(4, 8);
106 |                         that.category1 = obj.category.slice(0, 2);
107 |                         that.category2 = obj.category.slice(2, 4);
108 |                         that.cookies1 = obj.other.slice(0, 4);
109 |                         that.cookies2 = obj.other.slice(4, 8);
110 |                       }else{
111 |                        //TODO:
112 |                       }
113 |                     }else{
114 |                         //TODO:错误处理
115 |                         //console.log('--response:-- ', response);
116 |                     }
117 |                 },function(err){
118 |                     //console.log('---err---', err);
119 |                     //TODO:错误处理
120 |                 });
121 |             }
122 |         }
123 |       };
124 | </script>


--------------------------------------------------------------------------------
/reading.we:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |       <search></search>
  4 |       <hr></hr>
  5 |       <scroller class="scroller">
  6 |          <recommend recommend="{{recommendTopic}}"></recommend>
  7 |          <hr></hr>
  8 |          <text class="title-big">热门推荐</text>
  9 |          <hot-recommend hot-recommend="{{hotRecommend1}}"></hot-recommend>
 10 |          <hot-recommend hot-recommend="{{hotRecommend2}}"></hot-recommend>
 11 | 
 12 |          <hr></hr>
 13 |          <text class="title-big">专题分类</text>
 14 |          <category list="{{category1}}"></category>
 15 |          <category list="{{category2}}"></category>
 16 | 
 17 |          <hr></hr>
 18 |          <text class="title-big">轻松一刻</text>
 19 |          <hot-recommend hot-recommend="{{cookies1}}"></hot-recommend>
 20 |          <hot-recommend hot-recommend="{{cookies2}}"></hot-recommend>
 21 | 
 22 |          <div style="height:50;"></div>
 23 |       </scroller>
 24 |       <tabbar></tabbar>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <style>
 29 |     .title-big{
 30 |        font-size:32;
 31 |        font-weight:200;
 32 |        color:#444444;
 33 |        margin-left:10;
 34 |        margin-bottom:10;
 35 |     }
 36 |     .container {
 37 |         position: absolute;
 38 |         top: 0; left: 0;
 39 |         right: 0;
 40 |         bottom: 0;
 41 |         margin-top: 0;
 42 |         margin-bottom: 88;
 43 |     }
 44 |     .scroller{
 45 |         position: absolute;
 46 |         top: 160;
 47 |         left: 0;
 48 |         right: 0;
 49 |         bottom: 88;
 50 |     }
 51 | </style>
 52 | 
 53 | <script>
 54 |     require('./components-add/tabbar.we');
 55 |     require('./reading/search.we');
 56 |     require('./reading/hr.we');
 57 |     require('./reading/recommend.we');
 58 |     require('./reading/hot-recommend.we');
 59 |     require('./reading/category.we');
 60 |     //var util = require('./util');
 61 |     
 62 |     var SERVER_PATH = 'http://123.57.39.116:3000/data/read?type=';
 63 |     module.exports = {
 64 |         data:{
 65 |          width: 0,
 66 |          height: 0,
 67 |          recommendTopic:[],
 68 |          hotRecommend1:[],
 69 |          hotRecommend2:[],
 70 |          category1: [],
 71 |          category2: [],
 72 |          cookies1: [],
 73 |          cookies2: []
 74 |         },
 75 |         created: function(){
 76 |             this._getData();
 77 |         },
 78 |         methods:{
 79 |             _getData: function(){
 80 |                 var that = this;
 81 |                 var stream = require('@weex-module/stream');
 82 |                 var url = SERVER_PATH + 'config';
 83 |                 stream.fetch({
 84 |                   method: 'GET',
 85 |                   url: url,
 86 |                   type:'json'
 87 |                 }, function(response) {
 88 |                     if(response.status == 200){
 89 |                       //这里需要兼容web和Native，Native需要将传递的数据JSON化
 90 |                       var data = response.data;
 91 |                       try{
 92 |                         data = JSON.parse(response.data); 
 93 |                       }catch(e){}
 94 |                                                         
 95 |                       if(data.status){
 96 | 
 97 |                         var obj = data.data;
 98 |                         that.recommendTopic.$set(0, obj.recommendTopic[0]);
 99 |                         that.recommendTopic.$set(1, obj.recommendTopic[1]);                     
100 |                         that.recommendTopic = obj.recommendTopic;
101 |                         that.hotRecommend1 = obj.hotTopic.slice(0, 4);
102 |                         that.hotRecommend2 = obj.hotTopic.slice(4, 8);
103 |                         that.category1 = obj.category.slice(0, 2);
104 |                         that.category2 = obj.category.slice(2, 4);
105 |                         that.cookies1 = obj.other.slice(0, 4);
106 |                         that.cookies2 = obj.other.slice(4, 8);
107 |                       }else{
108 |                        //TODO:
109 |                       }
110 |                     }else{
111 |                         //TODO:错误处理
112 |                         //console.log('--response:-- ', response);
113 |                     }
114 |                 },function(err){
115 |                     //console.log('---err---', err);
116 |                     //TODO:错误处理
117 |                 });
118 |             }
119 |         }
120 |       };
121 | </script>


--------------------------------------------------------------------------------
/reading/category.we:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="row">
  3 |         <div class="item-left center border" onclick="gotoList" title="{{texts[0]}}">
  4 |             <text class="title">{{texts[0]}}</text>
  5 |         </div>
  6 |         <div class="item-right center border" onclick="gotoList" title="{{texts[1]}}">
  7 |             <text class="title">{{texts[1]}}</text>
  8 |         </div>
  9 |     </div>
 10 | </template>
 11 | <style>
 12 |     .row{
 13 |         flex-direction: row;
 14 |         height:150;
 15 |         margin-top:6;
 16 |     }
 17 |     .item-left{
 18 |         flex:1;
 19 |         border-width:1;
 20 |         border-color: #BEBEBE;
 21 |         border-radius:4;
 22 |         margin-left:10;
 23 |         margin-right:5;
 24 |     }
 25 | 
 26 |     .item-right{
 27 |         flex:1;
 28 |         margin-left:5;
 29 |         margin-right:10;
 30 |     }
 31 |     .center{
 32 |         justify-content:center;
 33 |         align-items: center;
 34 |     }
 35 |     .border{
 36 |         border-width:1;
 37 |         border-color: #BEBEBE;
 38 |         border-radius:4;
 39 |     }
 40 | 
 41 |     .title{
 42 |         font-weight:300;
 43 |         font-size:29;
 44 |         color:#2A2C28;
 45 |     }
 46 | </style>
 47 | <script>
 48 |     module.exports = {
 49 |         data: {
 50 |             list: [],
 51 |             texts:[],
 52 |             dir: 'examples',
 53 |             baseURL: ''
 54 |         },
 55 |         created: function(){
 56 |             var bundleUrl = this.$getConfig().bundleUrl;
 57 |             bundleUrl = new String(bundleUrl);
 58 | 
 59 |             var nativeBase;
 60 |             var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
 61 | 
 62 |             var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
 63 |             if (isAndroidAssets) {
 64 |               nativeBase = 'file://assets/';
 65 |             }
 66 |             else if (isiOSAssets) {
 67 |               nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
 68 |             }
 69 |             else {
 70 |              //http://127.0.0.1:12580/examples/build/reading.js
 71 |               var host = 'localhost:12580';
 72 |               var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
 73 |               if (matches && matches.length >= 2) {
 74 |                 host = matches[1];
 75 |               }
 76 |               //nativeBase = 'http://' + host + '/weex_tmp/h5_render/';
 77 |               nativeBase = 'http://' + host + '/' + this.dir + '/build/';
 78 |             }
 79 |             var h5Base = './index.html?page=./' + this.dir + '/build/';
 80 |             //Native端
 81 |             var base = nativeBase;
 82 |             //H5端
 83 |             if (typeof window === 'object') {
 84 |               base = h5Base;
 85 |             }
 86 |             this.baseURL = base;
 87 |         },
 88 |         computed: {
 89 |            texts: {
 90 |                get: function(){
 91 |                  var texts = [];
 92 |                  for(var i in this.list){
 93 |                     texts.push(this.list[i].text);
 94 |                  }
 95 |                  return texts;
 96 |                }
 97 |            }
 98 |         },
 99 |         methods: {
100 |             gotoList: function(e){
101 |                 var obj = e.target.attr;
102 |                 var title = obj.title;
103 |                 var type = this._getType(title);
104 |                 //加载列表
105 |                 var navigator = require('@weex-module/navigator');
106 |                 var params = {
107 |                     'url': this.baseURL + 'reading/list.js?type=' + type + '&title=' + title,
108 |                     'animated' : 'true',
109 |                 }
110 |                 
111 |                 navigator.push(params, function(e) {});
112 |             },
113 | 
114 |             _getType: function(title){
115 |                 var type = 'it';
116 |                 switch(title){
117 |                     case '互联网':
118 |                         type = 'it';
119 |                         break;
120 |                     case '散文':
121 |                         type = 'sanwen';
122 |                         break;
123 |                     case '笑话':
124 |                         type = 'cookies';
125 |                         break;
126 |                     case '管理':
127 |                         type = 'manager';
128 |                         break;
129 |                     default:
130 |                         break;
131 |                 }
132 |                 return type;
133 |             }
134 |         }
135 | 
136 |     };
137 | </script>


--------------------------------------------------------------------------------
/components-add/tabbar.we:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 |     <div class="tabbar">
  4 |         <div repeat={{tabItems}} src="{{src}}" style="flex: 1;"  onclick="onclickitem">
  5 |             <div class="container" style="background-color:#fff;">
  6 |                 <image class="top-line" src = "http://gtms03.alicdn.com/tps/i3/TB1mdsiMpXXXXXpXXXXNw4JIXXX-640-4.png"></image>
  7 |                 <image class="tab-icon" src ="{{icon}}"></image>
  8 |                 <text class="tab-text" style="color:#000;">{{title}}</text>
  9 |             </div>
 10 |         </div>
 11 |     </div>
 12 | </template>
 13 | 
 14 | <style>
 15 |     .container {
 16 |         flex: 1;
 17 |         flex-direction: column;
 18 |         align-items:center;
 19 |         justify-content:center;
 20 |         height: 100;
 21 |     }
 22 |     .top-line {
 23 |         position: absolute;
 24 |         top: 0;
 25 |         left: 0;
 26 |         right: 0;
 27 |         height: 2;
 28 |     }
 29 |     .tab-icon {
 30 |         margin-top:5;
 31 |         width: 55;
 32 |         height: 55
 33 |     }
 34 |     .tab-text {
 35 |         margin-top:10;
 36 |         text-align: center;
 37 |         font-size: 20;
 38 |     }
 39 |     .tabbar{
 40 |             flex-direction: row;
 41 |             position: fixed;
 42 |             bottom: 0;
 43 |             left: 0;
 44 |             right: 0;
 45 |             height: 110;
 46 |         }
 47 | </style>
 48 | 
 49 | <script>
 50 |     module.exports = {
 51 |         data:{
 52 |             dir: 'examples',
 53 |             baseURL: '',
 54 |             tabItems: [
 55 |               {
 56 |                 index: 0,
 57 |                 title: '首页',
 58 |                 icon: 'http://o94apbmjs.bkt.clouddn.com/11.png',
 59 |                 src: 'reading.js'
 60 |               },
 61 |               {
 62 |                 index: 1,
 63 |                 title: '阅读',
 64 |                 icon: 'http://o94apbmjs.bkt.clouddn.com/23.png',
 65 |                 src: 'reading.js'
 66 |               },
 67 |               {
 68 |                 index: 2,
 69 |                 title: '反馈',
 70 |                 icon: 'http://o94apbmjs.bkt.clouddn.com/17.png',
 71 |                 src: 'post.js'
 72 |               },
 73 |               {
 74 |                 index: 3,
 75 |                 title: '设置',
 76 |                 icon: 'http://o94apbmjs.bkt.clouddn.com/setting.png',
 77 |                 src: 'setting.js'
 78 |               }
 79 |             ]
 80 |         },
 81 | 
 82 |         created: function(){
 83 |             var bundleUrl = this.$getConfig().bundleUrl;
 84 |             bundleUrl = new String(bundleUrl);
 85 | 
 86 |             var nativeBase;
 87 |             var dir = 'dist/';
 88 |             var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
 89 | 
 90 |             var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
 91 |             if (isAndroidAssets) {
 92 |               nativeBase = 'file://assets/';
 93 |             }
 94 |             else if (isiOSAssets) {
 95 |               nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
 96 |             }
 97 |             else {
 98 |              //http://127.0.0.1:12580/examples/build/reading.js
 99 |               var host = 'localhost:12580';
100 |               var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
101 |               if (matches && matches.length >= 2) {
102 |                 host = matches[1];
103 |               }
104 |               //nativeBase = 'http://' + host + '/weex_tmp/h5_render/';
105 |               nativeBase = 'http://' + host + '/' + this.dir + '/build/';
106 |             }
107 |             var h5Base = './index.html?page=./' + this.dir + '/build/';
108 |             //Native端
109 |             var base = nativeBase;
110 |             //H5端
111 |             if (typeof window === 'object') {
112 |               base = h5Base;
113 |             }
114 |             this.baseURL = base;
115 |         },
116 |         methods: {
117 |             onclickitem: function(e){
118 |                 var vm = this;
119 |                 var obj =  e.target.attr;
120 |                 var url = this.baseURL + obj.src;
121 |                 var navigator = require('@weex-module/navigator');
122 |                 var params = {
123 |                     url: url,
124 |                     animated : 'true',
125 |                 }
126 |                 navigator.push(params, function(e) {});
127 | 
128 |                 /*var modal = require('@weex-module/modal');
129 |                  modal.alert({
130 |                   'message': params.url,
131 |                   'okTitle': 'ok',
132 |                   'cancelTitle': 'cancel'
133 |                 }, function() {
134 |                   //this.toast(params.url);
135 |                   //vm.$call('navigator','push',params, function () {});                 
136 |                 });*/
137 | 
138 |             }
139 |         }
140 |     }
141 | </script>
142 | 


--------------------------------------------------------------------------------
/reading/list.we:
--------------------------------------------------------------------------------
  1 | <template>
  2 |      <scroller style="margin-top:10;">
  3 |         <div repeat="{{list}}" class="row-item" onclick="gotoPage" title="{{title}}" url="{{url}}">
  4 |             <div class="row">
  5 |                 <div class="img_view">
  6 |                     <image class="img" src="{{img}}" resize="cover"></image>
  7 |                 </div>
  8 |                 <div style="flex:1;">
  9 |                     <text class="title">
 10 |                         {{title}}
 11 |                     </text>
 12 |                     <text class="time">
 13 |                          {{time.substring(0,10)}}
 14 |                     </text>
 15 |                 <div>
 16 |             </div>
 17 |         </div>
 18 |        </scroller>
 19 | </template>
 20 | 
 21 | <style>
 22 |     .row{
 23 |         flex-direction: row;
 24 |     }
 25 | 
 26 |     .row-item{
 27 |         height:150;
 28 |         border-bottom-width:1;
 29 |         border-bottom-color:#E0E0E0;
 30 |     }
 31 | 
 32 |     .img_view{
 33 |         width:150;
 34 |         height:150;
 35 |     }
 36 | 
 37 |     .img{
 38 |         width:130;
 39 |         height:130;
 40 |         margin-left:10;
 41 |         margin-right:10;
 42 |         margin-top:10;
 43 |         border-radius:4;
 44 |     }
 45 | 
 46 |     .title{
 47 |         font-size:30;
 48 |         lines:1;
 49 |         text-overflow: ellipsis;
 50 |         margin-right:10;
 51 |         margin-top:10;
 52 |     }
 53 | 
 54 |     .time{
 55 |         font-size:27;
 56 |         lines:1;
 57 |         text-overflow: ellipsis;
 58 |         color:#4C4C4C;
 59 |         margin-top:10;
 60 |     }
 61 | </style>
 62 | <script>
 63 |     //require('./../components-add/wxc-navpage.we');
 64 |     //<tabbar></tabbar>
 65 |     //require('./../components-add/tabbar.we');
 66 |     
 67 |     module.exports = {
 68 |         data: {
 69 |             list: [],
 70 |             title: '',
 71 |             titleAdd:'',
 72 |             dir: 'examples',
 73 |             baseURL: ''
 74 |         },
 75 | 
 76 |         created: function(){
 77 |             var url = this.$getConfig().bundleUrl;
 78 |             this.title = decodeURIComponent(this._getUrlParam(url, 'title'));
 79 | 
 80 |             var type = this._getUrlParam(url, 'type');
 81 |             this._getData(type);
 82 | 
 83 |             this.$on('naviBar.leftItem.click',function(e){
 84 |                 //pop back
 85 |                 var params = {
 86 |                     'animated' : 'true',
 87 |                 }
 88 |                 var navigator = require('@weex-module/navigator');
 89 |                 navigator.pop(params, function(e) {});
 90 |             });
 91 | 
 92 |             var bundleUrl = url;
 93 |             bundleUrl = new String(bundleUrl);
 94 | 
 95 |             var nativeBase;
 96 |             var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
 97 | 
 98 |             var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
 99 |             if (isAndroidAssets) {
100 |               nativeBase = 'file://assets/';
101 |             }
102 |             else if (isiOSAssets) {
103 |               nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
104 |             }
105 |             else {
106 |              //http://127.0.0.1:12580/examples/build/reading.js
107 |               var host = 'localhost:12580';
108 |               var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
109 |               if (matches && matches.length >= 2) {
110 |                 host = matches[1];
111 |               }
112 |               //nativeBase = 'http://' + host + '/weex_tmp/h5_render/';
113 |               nativeBase = 'http://' + host + '/' + this.dir + '/build/';
114 |             }
115 |             var h5Base = './index.html?page=./' + this.dir + '/build/';
116 |             //Native端
117 |             var base = nativeBase;
118 |             //H5端
119 |             if (typeof window === 'object') {
120 |               base = h5Base;
121 |             }
122 |             this.baseURL = base;
123 |         },
124 | 
125 |         methods: {
126 |             _getData: function(type){
127 |                 var that = this;
128 |                 var stream = require('@weex-module/stream');
129 |                 var url = 'http://123.57.39.116:3000/data/read?type=' + type;
130 |                 stream.fetch({
131 |                   method: 'GET',
132 |                   url: url,
133 |                   type:'json'
134 |                 }, function(response) {
135 |                     if(response.status == 200){
136 |                       var data = response.data;
137 |                       try{
138 |                         data = JSON.parse(data);
139 |                       }catch(e){}
140 |                       if(data.status){
141 |                         var obj = data.data;
142 |                         that.list = obj;
143 |                       }else{
144 |                        //TODO:
145 |                       }
146 |                     }else{
147 |                         //TODO:错误处理
148 |                     }
149 |                 },function(err){
150 |                     //console.log(err);
151 |                     //TODO:错误处理
152 |                 });
153 | 
154 |             },
155 |             _getUrlParam: function(url, key){
156 |                 var reg = new RegExp('[?|&]' + key + '=([^&]+)');
157 |                 var match = url.match(reg);
158 |                 return match && match[1];
159 |             },
160 | 
161 |             gotoPage: function(e){
162 |                 var obj = e.target.attr;
163 |                 var url = obj.url;
164 |                 var title = obj.title;
165 |                 //var path = './index.html?page='+ './dist/yywebview.js&weixin_title=' + title + '&weixin_url=' + url;
166 |                 var navigator = require('@weex-module/navigator');
167 |                 var params = {
168 |                     'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
169 |                     'animated' : 'true',
170 |                 }
171 | 
172 |                 navigator.push(params, function(e) {});
173 |             }
174 |         }
175 |     };
176 | </script>


--------------------------------------------------------------------------------