修正尺寸

config/index.js

@@ -2,6 +2,10 @@ const config = {
   projectName: 'demo',
   date: '2018-9-18',
   designWidth: 750,
+  deviceRatio:{
+    '750': 1/2,
+    '375': 1
+  },
   sourceRoot: 'src',
   outputRoot: 'dist',
   plugins: {

src/actions/counter.js

@@ -79,7 +79,7 @@ export function asyncAdd() {
 //     'content-type': 'application/json'
 //   }
 // }))
-export const list = createApiAction(LIST, params => api.get('article/list', params))
+export const list = createApiAction(LIST, params => api.get('news/list', params))
 
 export default bindActionCreators({
   list,

src/app.js

@@ -14,7 +14,8 @@ class App extends Component {
 
   config = {
     pages: [
-      'pages/index/index'
+      'pages/index/index',
+      'pages/me/index',
     ],
     window: {
       backgroundTextStyle: 'light',
@@ -30,15 +31,15 @@ class App extends Component {
       list: [
         {
           pagePath: "pages/index/index",
-          selectedIconPath: "/common/image/tab/classic@highlight.png",
-          iconPath: "/common/image/tab/classic.png",
+          selectedIconPath: "./common/image/tab/discover@highlight.png",
+          iconPath: "./common/image/tab/discover.png",
           text: "发现"
         },
         {
           pagePath: "pages/me/index",
-          selectedIconPath: "/common/image/tab/my@highlight.png",
-          iconPath: "/common/image/tab/my.png",
-          text: "喜欢"
+          selectedIconPath: "./common/image/tab/my@highlight.png",
+          iconPath: "./common/image/tab/my.png",
+          text: "我"
         }
       ]
     }

src/pages/index/index.js

@@ -45,7 +45,7 @@ class Index extends Component {
     super(props)
     console.log('props', props);
     // this.state = { date: new Date() }
-    // props.list()
+    props.list()
   }
   componentWillReceiveProps(nextProps) {
     console.log(this.props, nextProps)
@@ -61,19 +61,34 @@ class Index extends Component {
   render() {
     return (
       <View className='index'>
-        <Button className='add_btn' onClick={this.props.add}>+</Button>
-        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
-        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
-        <Button className='dec_btn' onClick={this.props.list}>list</Button>
-        <View><Text>{this.props.counter.num}</Text></View>
-        <View><Text>Hello, World</Text></View>
+        <View className='news'>
+          <View className='item'>
+            <View className='desc'>
+              <View className='title'></View>
+              <View className='info'></View>
+            </View>
+            <View className='rightImage'>
+
+            </View>
+          </View>
           <View>
             {
               this.props.list.map((item, index) => {
-              return <View key={index}>{item.title}</View>
+                return <View className='item' key={index}>
+                  <View className='info'>
+                    <View className='title'>{item.title}</View>
+                    <View className='footer'>
+                      <View className='user'>{item.username}</View>
+                      <View className='comment'>{item.username}</View>
+                    </View>
+                  </View>
+                  <View className='rightImage'><Image calssName='img' src={item.image_url} /></View>
+                </View>
               })
             }
           </View>
+        </View>
+
       </View >
     )
   }

src/pages/index/index.styl

+  .news
+    font-size 15px
+  .item
+    height 80px
+    margin-top 10px
+    background #fff
+    padding 10px
+    border-top 1px solid #ededed
+  .info
+    float left
+    width 60%
+    font-size 12px
+    .title
+      height 60px
+      font-size 16px
+      color: rgb(63, 65, 70)
+    .footer
+      margin-bottom 10px
+      color: rgb(155, 158, 163);
+      .user
+        float left
+        margin-right 5px
+      .comment
+        float left
+        margin-right 5px
+      .time
+        float left
+        margin-right 5px
+  .rightImage
+    width 33%
+    margin-left 15px
+    height 70px
+    float: right;
+    position: relative;
+    margin-left 15px
+    pointer-events: none;
+    transform: scale(1);
+    overflow: hidden;
+    border-radius: 3px;
+    .img
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-width: unset;
+      max-height: unset;
+      margin-left: 0px;
+      margin-top: 0px;
+      border: 0px none;
+      vertical-align: top;
+      visibility: visible;
+      transition: opacity 200ms ease-out 0s;
+      opacity: 1;
+      backface-visibility: hidden;
+      background-color: rgb(255, 255, 255);

src/pages/me/index.js

+import Taro, { Component } from '@tarojs/taro'
+import { View, Button, Text } from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+
+import { add, minus, asyncAdd } from '../../actions/counter'
+
+import './index.styl'
+
+
+@connect(({ counter }) => ({
+  counter
+}), (dispatch) => ({
+  add () {
+    dispatch(add())
+  },
+  dec () {
+    dispatch(minus())
+  },
+  asyncAdd () {
+    dispatch(asyncAdd())
+  }
+}))
+class Me extends Component {
+
+    config = {
+    navigationBarTitleText: '我的页面'
+  }
+
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+        <Button className='add_btn' onClick={this.props.add}>+</Button>
+        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
+        <Button className='dec_btn' onClick={this.props.asyncAdd}>me</Button>
+        <View><Text>{this.props.counter.num}</Text></View>
+        <View><Text>Hello, World</Text></View>
+      </View>
+    )
+  }
+}
+
+export default Me

src/reducers/counter.js

@@ -21,7 +21,7 @@ export default function counter (state = INITIAL_STATE, action) {
     case LIST:
        return {
          ...state,
-         list: action.payload.data.article
+         list: action.payload.data.news
        }
      default:
        return state