资源来自网络,拿走不谢!
简单搞了一下,吼吼~:
js:业务处理
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 27 28 29 | //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {name:'汗青', desc:前端的春天来了!\n 前端要烂大街了!!, avatarUrl:http://img2.3lian.com/2014/gif/10/9/25.jpg} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) that.update() }) } }) |
wxml:创建布局
1 2 3 4 5 6 7 8 9 10 11 12 | <view class=container> <view bindtap=bindViewTap class=userinfo> <image class=userinfo-avatar src={{userInfo.avatarUrl}} background-size=cover>image> <text class=userinfo-name>{{userInfo.name}}text> <text class=userinfo-desc>{{userInfo.desc}}text> view> <view class=usermotto> <text class=user-motto>{{motto}}text> view> view> |
wxss:设置样式
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 27 28 29 | /**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-name { color: #aaa; font-size: 30rpx; margin: 30rpx; } .userinfo-desc { color: #f00; font-size: 50rpx; line-height: 70rpx; } .usermotto { margin-top: 200px; } |