微信小程序 案例 学习 1

//index.js
//获取应用实例
var app = getApp()
Page({
data: {
welcome: '欢迎来到微信小程序',
userimage:'获取域名',
chouseImages:'上传图片',
userInfo: {},
tempFilePaths:''
},
//事件处理函数
bindViewTap: function() {

wx.navigateTo({
url: '../logs/logs'
})
},
bindUserImage:function(){
wx.navigateTo({
url:'../users/images'
})
},
chooseimage:function(){
var _this = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
_this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
console.log(userInfo);
})
}
})

index.wxml

<!--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">{{welcome}}</text>
</view>

<view bindtap="bindUserImage" class="userimage">
<text class="user-image">{{userimage}}</text>
</view>

<button class="userimage" bindtap="chooseimage">{{chouseImages}}</button>
<image src="{{tempFilePaths}}"  />

</view>

/**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: 100px;
}
.userimage{
margin-top: 20px;
color: #aaa;
}
.userimage img{
width: 10px;
height: 10px;
}