小程序的基本介绍 | 青训营笔记

这是我参加"第四届青训营"笔记创作活动的第9天

近些年，小程序非常的火爆，小程序和网页存在着很多的区别， 网页运行在浏览器中，而小程序运行在微信环境中，由于运行环境不同，所以小程序中，无法调用DOM和BOM的API，但是，小程序中可以调用微信环境提供的各种API，例如：地理定位、扫码、支付。

项目结构

小程序各个文件的作用：

小程序页面的组成部分

小程序官方建议把所有小程序的页面，都存放在pages目录中，以单独的文件夹存在，如：

其中，每个页面由4个基本文件组成，它们分别是：

1. .js文件（页面的脚本文件，存放页面的数据，事件处理函数等）
2. .json文件（当前页面的配置文件，配置窗口的外观、表现等）
3. .wxml文件（页面的模板结构文件）
4. .wxss文件（当前页面的样式表文件）

JSON配置文件

1.app.json

调整app.json-->pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

它是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。

demo项目里边的app.json配置内容如下：

2.project.config.json

它是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

• setting中保存了编译相关的配置
• projectname中保存的是项目名称
• appid中保存的是小程序的账号ID

3.sitemap.json

微信现已开放小程序内搜索，效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

页面的.json配置文件

小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。

WXML模板

1.什么是WXML

WXML ( WeiXin Markup Language )是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

2.WXML和HTML的区别

1. 标签名称不同

• HTML（div，span，img，a）
• WXML（view，text，image，navigator）（两者一 一对应）

2. 属性节点不同

• <a href='#'>超链接</a>
• <navigator url = "/pages/home/home"></navigator>

3. 提供了类似于Vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

WXSS样式

1.什么是wxss

WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的css。

2.WXSS和CSS的区别

1. 新增了rpx尺寸单位

• css中需要手动进行像素单位换算，例如rem
• wxss在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

2. wxss提供了全局样式和局部样式

• 项目根目录中的app.wxss会作用于所有小程序页面
• 局部页面的.wxss样式仅对当前页面生效

3. wxss仅支持部分css选择器

• .class和#id
• element
• 并集选择器、后代选择器
• ::after和::before等伪类选择器

JS逻辑交互

1.小程序中的JS文件分为三大类

1. app.js

• 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序

2. 页面的.js文件

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

3. 普通的.js文件

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