微信小程序开发第一天之界面认识

目的最近接了一个微信小程序的比赛，现在记录一下创作历程

初始微信开发者工具

页面及文件：

Pages：界面（必备文件）

     Index：首页

          Index.js：交互操作

          Index.json：配置操作

          Index.wxml：等同于html

          Index.wxss：等同于css文件

      Logs：启动日志

Utils： 公共文件（不必备）（.js、.wxss）

.js  页面逻辑文件、入口文件、交互操作存放处

.json ：页面配置文件

.wxss ：页面结构 设置颜色、宽高

App.js: 小程序的逻辑

Project.config.json: 项目配置文件

App.js、app.json、app.wxss：全局文件，修改后作用于全局

[注意：上述文件可以作用于全局，但是优先级不高于直接操作文件夹内的.wxss文件]

举个栗子：

在app.wxss文件中输入.container{color:red;}界面颜色会变红，但是如果此时再在pages文件夹里的index.wxss文件中加入.container{color:green;}界面会变绿

.box{ width: 100px; height: 100px;background:yellow;}

 效果展示：

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  color: red;
} 

效果展示 ：

新建文件夹:

注意事项：创建文件夹之后文件夹下面一定要包含.js .json .wxss .wxml四个文件且内含文件名要和新建文件名保持一致。

快捷方式：直接在app.json文件中的pages下写入

pages": [
    "pages/news/news",
    "pages/logs/logs",
    "pages/index/index"
    
    
  ]