目录结构分析

pages

用来存放页面资源的文件夹

index

index中存放页面

index.js

逻辑层

index.wxml

类似于html文件，由微信规定的标签组成页面的基础结构。

index.wxss

类似于css文件，对页面的样式进行设置。

index.json

该页面的配置文件。

logs

启动日志页面，可以通过更改app.json中的页面顺序来访问该页面，将logs移动至index前面:

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

访问:

utils

存放公共资源，如css,js文件,例如可以存放处理时间戳，截取长字符串功能的js文件(该文件夹不是必备)。

app.js

全局入口文件，是逻辑层。

app.js

全局配置文件

• 当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
  

  app.wxss

  全局样式文件，实际上就是类似于css样式文件。
  

  project.config.json

•  项目配置文件，做一些个性化配置，例如界面颜色、编译配置等等。

• 实际上就是上一篇提到的详情工作栏中的本地设置栏中的配置，如果改变那里的设置，这里对应的代码也会改变。
  

  sitemap 

• sitemap 配置小程序及其页面是否允许被微信索引

• 类似于传统网站的网站地图
  

  注意

  页面样式的权重优先于全局样式，如果页面样式和全局样式对某一个对象设置的不同，最后样式按照页面样式呈现。
  

  创建页面实践

  在创建新的页面之前，先分析index中的默认页面的wxml:

  <!--index.wxml-->
  <view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  </view>

  在第5行头像下添加一行: 

  <view>你好，世界</view>

  观察:
  
  

打印出了对应的文字。

下面删除wxml,wxss文件内的所有内容，让页面变成空白页面，之后写入其他内容。
wxml:

<view class="box">尝试</view>

wxss:

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

测试:


这就是小程序页面的工作原理。

右键pages文件夹，选择新建文件夹，之后右键刚刚新建的文件夹，选择新建page，一个新的页面就创建成功。


但是这样不是规范的方法。

规范创建新页面方法:
打开app.json,在pages参数中添加路径保存即可。

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

之后打开新创建的页面，只需要将对应的路径移到第一位点击编译即可。