如何开发出第一个小程序页面

1. 了解小程序文件类型

样式：wxss -》css
骨架：wxml -》html
业务：js -》js
配置：json

2. 了解小程序组织结构

• 全局文件：（默认且不可修改）
  全局配置文件：app.json
  全局样式文件：app.wxss
  全局业务文件：app.js
• 由多个page页面组成
  一个page页面包括：wxss，wxml，js， json
• project.config.json环境配置文件（没有实际意义，是微信开发者工具根据你当前开发环境自动生成的文件）
• utils也可删除，意义不大

image.png

3. 新建第一个小程序页面

• 新建官方示例文件
• 删除多余的文件
  pages-》index + logs
  utils
  app.js
  app.json
  app.wxss
• 修改app.js
• 新建文件

// app.js初始化代码
App(

)

// app.json初始化代码
{

}

- 在pages文件夹中新建static文件夹，然后右键新建Page（新建前保证app.js和app.json已经初始化，否则新建不了）
 新建第一个Page-》classic

新建完Page后，小程序会自动在app.json中插入数据

Page新建完后，必须在app.json中进行注册。(如果用开发者工具进行开发，新建Page后会自动注册)

{
  "pages": [
    "pages/classic/classic"
  ]
}

image.png

4. app.json配置

• 通过微信开发者工具打开小程序开发文档
  小程序开发文档-》指南-》起步-》小程序代码构成-》 json配置-》全局配置
  app.json配置有11项
  常用包括：pages，window，tabBar，networkTimeout，debug
• window是个配置大项用于设置小程序的状态栏、导航条、标题、窗口背景色。
  导航条如果不设置默认为黑色
  如果不想要顶部的导航栏，达到侵入效果，可以用navigationStyle = customer来实现。

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "项目名称",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

image.png

5. app.json配置 background窗口

• 如果不开启全局的下拉刷新，background窗口只有在真机调试时上拉页面或者下拉页面才能看到，在开发者工具上看不到。
• 配置windows下全局的下拉刷新enablePullDownRefresh = true。

backgroundColor 窗口背景色
backgroundTextStyle 下拉loading的样式
backgroundColorTop 顶部背景的样式
backgroundColorBottom 底部背景的样式
enablePullDownRefresh 全局的下拉刷新

image.png

6. wxml与组件

• wxml是个骨架文件
  官方新建自动生成的内容为

<!--pages/classic/classic.wxml-->
<text>pages/classic/classic.wxml</text>

但是真正项目中生成的页面要复杂一点。

• 一个wxml文件是一个或多个组件的集合。
  写wxml文件其实就是在用组件填充这个wxml

• 在小程序开发文档中查看组件介绍（小程序的组件和html的标签基本没有太大差别）

• 通过微信开发者工具打开小程序开发文档
  小程序开发文档-》组件
  最基础的组件是视图容器
  用的最多的是视图容器里的view组件

image.png

• 使用组件时注意两点
  一是有些组件是成对出现的 比如（view），有些组件可以成对，也可以不成对 比如（imag在后面加/表示组件结束）
  二是可以在组件名字后面给组件加一系列属性。

7. 预览
   点击开发者工具上的预览按钮，微信扫描二维码预览效果