小程序的构成

目录

1 小程序目录结构

2 小程序代码构成

3 JSON 配置

3.1 小程序配置 app.json

3.2 工具配置 project.config.json

3.3 页面配置 page.json

3.4 JSON 语法

4 WXML 模板

4.1 与HTML标签的比较

4.2 逻辑处理

5 WXSS 样式

6 JS 逻辑交互

---

1 小程序目录结构

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

 

2 小程序代码构成

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

 

3 JSON 配置

JSON是小程序的配置文件，在新建的项目中主要包括以下JSON文件

• app.json 
•  project.config.json
• pages/index/index.json

 

3.1 小程序配置 app.json

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

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

配置项参考文档 小程序的配置 app.json 。

 

3.2 工具配置 project.config.json

开发工具的配置文件，例如界面颜色、编译配置等等

其他配置项细节可以参考文档 开发者工具的配置 。

 

3.3 页面配置 page.json

页面配置，可以让开发者独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 页面配置 。

 

3.4 JSON 语法

JSON文件所有内容在写在大括号中 {}，通过key-value的方式来表达数据，JSON的Key必须包裹在一个双引号中。

JSON的值只能是以下几种数据格式：

1. 数字：包含浮点数和整数
2. 字符串：需要包裹在双引号中
3. Bool值：true 或者 false
4. 数组：需要包裹在方括号中 []
5. 对象：需要包裹在大括号中 {}
6. Null

注： JSON 文件中无法使用注释，试图添加注释将会引发报错。

 

4 WXML 模板

和 HTML 非常相似，WXML 由标签、属性等等构成，比如：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

 

4.1 与HTML标签的比较

往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

参考 小程序的能力

 

4.2 逻辑处理

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({msg: 'Hello World'})

通过 {{ }} 的语法把一个变量绑定到界面上，通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

更详细的文档可以参考 WXML

5 WXSS 样式

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

1. 新增了尺寸单位 rpx 

2. 提供了全局的样式和局部样式。比如在应用根目录写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3. 此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

6 JS 逻辑交互

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

在 button 上声明一个属性: bindtap，点击 button 按钮的时候，可以把 msg 显示成 "Hello World"。

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

更详细的事件可以参考文档 WXML - 事件 。

 

参考：小程序开发文档