微信小程序从入门到入土之入门篇

一 页面创建
1.全局3个文件 分别是app.js,app.js,app.wxss(名称不可更改)
2.创建pages目录文件 （作用是放各个页面）
3.创建页面（给页面起名字，并且创建4个文件）
.js: 页面逻辑实现
.json 负责标题栏和一些状态栏
.wxml 管理页面有什么
.wxss 负责页面的样式
4.目录结构

5.把内容单元封装在 之间
图片<image src='图片路径'></image>
文字<text></text>
按钮<button></button>

.6 给按钮绑定事件
.<button
 open-type="getUserInfo"
 bindgetuserinfo="getMyInfo">
 点击获取头像和昵称
 </button>

open-type=“getUserInfo” 激活获取微信用户信息功能
bindgetuserinfo=“getMyInfo” 表示获得的数据传递给自定义函数getMyInfo
7.学过vue会发现
修改data里面的数据 要使用setData

代码块展示
index.js

  data: {
    nickname: 'Hello world',
    src: '../../images/head.jpg'  //设置默认的nickname 和 图片路径
  },
  getMyInfo(e){
    console.log(e.detail.userInfo)
    let info=e.detail.userInfo
    this.setData({
      nickname: info.nickName,
      src: info.avatarUrl
    })
  }

index.wxml

<view class="container">
<image src='{{src}}'></image>
<text>{{nickname}}</text>  //大括号绑定data中的数据
<button
 open-type="getUserInfo"
 bindgetuserinfo="getMyInfo"
 >点击获取头像和昵称
 </button>
 <!-- open-type="getUserInfo" 激活获取微信用户信息功能
 bindgetuserinfo="getMyInfo" 表示获得的数据传递给自定义函数getMyInfo -->
</view>

index.wxss

.container{
    height: 100vh;  /* 写100%无效 */
    display: flex;
    flex-direction: column;
    align-content: center;  /* 水品方向居中 */
    justify-content: space-around;
    text-align: center
}

image{
   border: 5px solid gray;
   border-radius: 50%;
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto
}
text{
  color: red;
  font-size: 50rpx;
}

点击按钮后的图片

至此第一个入门小程序就完成啦