1. 前言

牛客网第三期编程作业是体验下微信小程序的编写， 由于本菜鸟对前端这块理解并不深入，整起来比较费劲， 突然想到一个idea， 顺手简单实现一下， 基本效果如下： 

有点恶搞的成分， 哈哈~~

2. 注意点

这个问题在于， 没有在utils.js 中将需要的函数进行导出

3. 基本实现

3.1 项目框架

3.2 index

index.js

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page({
5. data: {
6. motto: '来让我们看看百度的源码吧',
7. userInfo: {}
8. },
9. //事件处理函数
10. bindViewTap: function() {
11. wx.navigateTo({
12. url: '../source_get/source_get'
13. })
14. },
15. onLoad: function () {
16. console.log('onLoad')
17. var that = this
18. //调用应用实例的方法获取全局数据
19. app.getUserInfo(function(userInfo){
20. //更新数据
21. that.setData({
22. userInfo:userInfo
23. })
24. })
25. }
26. })

index.wxml

1. <!--index.wxml-->
2. <view class="container">
3. <view bindtap="bindViewTap" class="userinfo">
4. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
5. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
6. </view>
7. <view class="usermotto">
8. <text class="user-motto">{{motto}}</text>
9. </view>
10. </view>

index.wxss

1. <!--index.wxml-->
2. /**index.wxss**/
3. .userinfo {
4. display: flex;
5. flex-direction: column;
6. align-items: center;
7. }
8.  
9. .userinfo-avatar {
10. width: 128rpx;
11. height: 128rpx;
12. margin: 20rpx;
13. border-radius: 50%;
14. }
15.  
16. .userinfo-nickname {
17. color: #aaa;
18. }
19.  
20. .usermotto {
21. margin-top: 200px;
22. }

3.3 source_get

source_get.js

1. <!--index.wxml-->
<li class="L1" appreciate"="" style="word-wrap: break-word; margin: 0px; padding: 0px; border: 0px; line-height: 20px;">赞赏