小程序页面介绍

新建小程序页面

在 app.json 文件中的 pages 数组添加新的页面路径，小程序开发者工具·会自动帮我们创建对于的页面文件

演示代码

如图所示现在 pages 文件夹只有 index 文件夹

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

添加完需要的页面保存可以看到 pages 文件夹会自动生成一个 hgk 文件夹

修改项目的首页

在 app.json 文件中的 pages 里面把需要放在首页的页面的路径放到第一位，小程序会把第一位的页面当作项目的首页进行渲染

演示代码：

 "pages":[      "pages/hgk/hgk"，    "pages/index/index"      ],

什么是 wxml

xxml（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于 html

wxml 和 html 的区别

标签名称不同

html 常用标签有（div，span，img，a...）

wxml 常用标签有（view，text，image，navigator...）

属性节点不同

html：<a href="#"></a>

wxml：<navigator url="/pages/index/index">aa</navigator>

提供了类似于 vue 中的模板语法

• 数据绑定

• 列表渲染

• 条件渲染

什么是 wxss

wxss（WeiXin Style Sheets）是一套样式语言，用于描述 wxml 的组件样式，类似于 css

wxss 和 css 的区别

新增了 rpx 尺寸单位

• css 中的需要手动进行像素单位换算，例如 rem

• wxss 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部样式

• 在项目根目录中的 app.wxss 会对所有小程序页面生效

• 局部页面的 wxss 样式仅对当前页面生效

wxss 仅支持部分 css 选择器

• 类选择器和 id 选择器

• 元素选择器

• 并集选择器、后代选择器

• ::after 和::before 等伪类选择器

小程序中的 js 文件

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 js 文件来处理用户的操作，例如：响应用户的点击、获取用户的位置等等

小程序的 js 文件分类

小程序中的 js 文件分为三大类，分别是：

• app.js：是整个小程序项目的入口文件，通过调用 App（）函数来启动整个小程序

• 页面的 js 文件：是页面的入口文件，通过调用 page（）函数来创建并运行页面

• 普通的 js 文件：是普通的功能模块文件用来封装公共的函数或者属性供页面使用