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

一 页面创建
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;
}

点击按钮后的图片在这里插入图片描述
在这里插入图片描述
至此第一个入门小程序就完成啦

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值