微信小程序开发学习笔记

微信小程序开发学习笔记

脚手架文件说明

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%;
}