微信小程序开发知乎日报列表实例讲解

1
2
3
4
5
6
7
8
9
10

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

1
2
3
4
5

@import "common.wxss";

.pd {
    padding-left: 5px;
}

1
2
3
4
5
6
7
8
9
10
11
12

// util.js
function formatTime(date) {
  // ....
}

function formatDate(date, split) {
  // ...
}
module.exports = {
  formatTime: formatTime,
  formatDate: formatDate
}

1

var utils = require('../../utils/util.js')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

1
2
3
4
5
6
7
8
9
10

Page({
    data: {
        text: '这是一个页面'
    },
    onLoad: function() {
        this.setData({
            text: 'this is page'
        })
    }
})

1

<view wx:if="{{condition}}"> True </view>

1
2
3

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

1
2
3

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

1
2
3
4
5
6
7

Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

1
2
3

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

1

<view  bindtap="bindViewTap" class="userinfo"><text>tap</text></view>

1
2
3
4
5

Page({
    bindViewTap: function(e) {
        console.log(e.taget)
    }
})

1

<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>

1
2
3
4
5
6

Page({
    bindViewTap: function(e) {
        // 会自动转成驼峰式命名
        console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    }
})

1
2
3

<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">
    <view><text>tap</text></view>
</view>

1
2
3
4
5

Page({
    bindViewTap: function(e) {
        console.log(e.taget.dataset.testMsg) // undefined
    }
})