目标:
用到的组件:
(1)图片 <image src='图片路径'></image>
(2) 文字 <text>"内容"</text>
(3)按钮 <button >"按钮上的字"</button>
步骤:
1、打开微信开发者工具
2、新建后退出,找到文件夹,删除项目,再打开:
扫描二维码关注公众号,回复: 9242710 查看本文章提示报错,我们自己手动建文件:
(1)、全局三个文件,分别是app.js app.json【内放一个{}】 app.wxss(名称不可更改)
(2)、创建Pages目录文件(作用是用来放各个页面的)
(3)、创建页面{给页面起名字,并且创建4个文件}
js:页面逻辑实现
json: 负责标题栏和一些状态栏
wxml: 管理页面有什么
wxss: 页面排布
3、代码:
// 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 //更新图片 }) }, 。。。。。。。。。。 })
<!--pages/index/index.wxml--> <view class="container"> <image src="{{src}}"></image> <text>{{data}}</text> <button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获得头像和昵称</button> <!--open-type="getUserInfo":激活获取微信用户信息功能 bindgetuserinfo="getMyInfo":获取的数据传给自定义函数getMyInfo--> </view>
/*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:全局设置
{ "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor": "#663399", "navigationBarTextStyle": "black", "navigationBarTitleText": "获取头像和昵称", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } }