小程序代码结构

优质

小牛编辑

127浏览

2023-12-01

1. JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

1.1 小程序配置 app.json

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

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

我们简单说一下这个配置各个项的含义:

pages字段

用于描述当前小程序所有页面路径，这是为了宿主客户端知道当前你的小程序页面定义在哪个目录。

window字段

定义小程序所有页面的顶部背景颜色，文字颜色定义等。

1.2 页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

1.3 JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

提示

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

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

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

2. FXML 模板

FXML 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

<!--fxml-->
<view> hello {{name}} </view>
// page.js
Page({
  data: {
    name: 'cortana'
  }
})

3. FTSS 样式

FTSS 具有 CSS 大部分的特性，小程序在 FTSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。FTSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.FTSS 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.FTSS 仅对当前页面生效。

此外 FTSS 仅支持部分 CSS 选择器，更详细的文档可以参考 FTSS 。

4. JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})