牛客网第三期编程作业是体验下微信小程序的编写, 由于本菜鸟对前端这块理解并不深入,整起来比较费劲, 突然想到一个idea, 顺手简单实现一下, 基本效果如下:
有点恶搞的成分, 哈哈~~
这个问题在于, 没有在utils.js 中将需要的函数进行导出
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '来让我们看看百度的源码吧',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../source_get/source_get'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo: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">{{motto}}</text> </view> </view>
index.wxss
/**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;
}
source_get.js
<!--index.wxml-->