项目一：显示头像和昵称

目标：

用到的组件：

　　（1）图片 <image src='图片路径'></image>

（2）文字 <text>"内容"</text>

（3）按钮 <button >"按钮上的字"</button>

步骤：

　　1、打开微信开发者工具

　　2、新建后退出，找到文件夹，删除项目，再打开：

提示报错，我们自己手动建文件：　

（1）、全局三个文件，分别是app.js app.json【内放一个｛｝】 app.wxss(名称不可更改）
（2）、创建Pages目录文件（作用是用来放各个页面的）
（3）、创建页面{给页面起名字，并且创建4个文件}
　　　　js：页面逻辑实现
　　　　json: 负责标题栏和一些状态栏
　　　 wxml: 管理页面有什么
　　　 wxss: 页面排布

　　3、代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    src:"/images/weixin.jpg",
    data: "Hello world"
  },
  getMyInfo:function(e){
    console.log(e.detail.userInfo)
    let info = e.detail.userInfo;
    this.setData({
      name: info.nickName,// 更新昵称
      src: info.avatarUrl //更新图片
    })
  },
。。。。。。。。。。
})

?
1
2
3
4
5
6
7

<view class="container">
  <image src="{{src}}"></image>
  <text>{{data}}</text>
  <button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获得头像和昵称</button>
  
</view>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*pages/index/index.wxss */
.container{
  height: 100vh; /* 高100视窗，写100%无效 */
  display: flex;
  flex-direction: column;
  align-items:center; /* 水平方向居中 */
  justify-content: space-around /* 垂直方向分散布局 */
}
.container image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%； /*4个角变为圆角形状 */
}
.container text{
  font-size: 50rpx;
  color: red;
}

　app.json：全局设置　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#663399",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "获取头像和昵称",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  }
}