小程序学习笔记（二）小程序代码组成

最新推荐文章于 2024-06-30 03:09:44 发布

迟风池枫

最新推荐文章于 2024-06-30 03:09:44 发布

阅读量711

点赞数

分类专栏：小程序开发文章标签：小程序代码组成学习笔记

本文链接：https://blog.csdn.net/wyfcode/article/details/84565693

版权

小程序开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件、逻辑代码 JavaScript文件组成。

以上四个文件就决定了小程序中的一个页面，或者说小程序的每一个页面都由以上四个文件构成，

上图是一个基本的小程序项目构成，在pages文件夹下的每一个文件夹都是一个页面，页面的组织通过小程序的全局配置文件app.json设置，

app.js是小程序的app实例，掌控着小程序的整个生命周期，里面可以写全局相关的代码

app.json是小程序的全局配置文件，配置页面集合、tabbar、标题背景等全局设置

app.wxss是小程序的全局样式表，决定了全局页面的默认样式，在pages下的页面中的wxss样式会取代默认样式

project.config.json是小程序开发工具的项目组织文件，自动生成

images文件夹存放icon图标等资源文件

下面依次介绍这四个文件所扮演的角色

1.json文件

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的是静态配置的角色。在小程序运行之前就决定了小程序一些表现，需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。

JSON通过key-value的方式来表达数据，key必须用双引号""，JSON的值只能是以下几种数据格式：

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

还需要注意的是 JSON 文件中无法使用注释，不要在JSON中添加注释，否则将会引发报错。

2.WXML 文件

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。小程序的WXML类似于web开发中的HTML，同样采用标签决定着页面的结构。值得注意的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。如果是属性值必须被包裹在双引号中，大小写敏感。除此外还可以在 {{ }} 内进行简单的逻辑运算，字符串的拼接，数组等。

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块。

WXML在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

所有wxml 标签都支持的属性称之为共同属性，如下表所示

3.WXSS 文件

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。也就是rpx代表的是实际物理像素单位，会随着屏幕宽度自适应按比例换算。

关于样式，小程序官方提供了WeUI.wxss基础样式库，原生样式的组件

4.JS文件

小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。理解 JavaScript 是 ECMAScript 一种实现后，可以帮助开发者理解小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

（1）小程序的执行环境

小程序目前可以运行在三大平台：

iOS平台，包括iOS9、iOS10、iOS11
Android平台
小程序IDE

这种区别主要是体现在三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准，目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的，例如：