微信小程序开发学习笔记
脚手架文件说明
Project.config.json -->项目设置
sitemap.json -->站点地图(用于SEO)
App.js --> 注册小程序
app.json --> 全局配置,里面是个对象,
app .wxss -->全局样式(公共样式)
手写index静态文件
把除了project.config.json ,sitemap.json都删了
删掉后报错
创建app.json文件,并写入一个对象和一个pages数组
创建app.js文件,自动补全App function
创建全局样式文件app.wxss
新建脚手架结构 pages->index 并新建page->index
设置全局window颜色 app.json+window数组
重写index.wxml文件
<view class="indexContainer">
<image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
<text class="userName">我的女神</text>
<view class="goStudy">
<text>hello word</text>
</view>
</view>
重写index.wxss
/* pages/index/index.wxss */
.indexContainer{
/* 流体布局 */
display: flex;
/* 行模式 */
flex-direction: column;
/* 居中对齐 */
align-items: center;
background-color: #fef;
height: 100%;
}
.avatarUrl{
/* 用rpx为单位,自动适配机型 */
height: 200rpx;
width: 200rpx;
/* 圆角 */
border-radius: 50%;
margin: 100rpx 0;
}
.userName{
font-size: 32rpx;
margin: 100rpx 0;
}
.goStudy{
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
border: 1rpx solid #333;
border-radius: 10rpx;
}
全局样式app .wxss
/* 全局的公共样式 */
page{
height: 100%;
}