一 页面创建
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;
}
点击按钮后的图片
至此第一个入门小程序就完成啦