二.微信小程序代码的构成

骑猪看日落 2023-07-03 06:02 24阅读 0赞

# 小程序代码构成 #

### 文章目录 ###

*  小程序代码构成
 *   *  一. .json后缀的JSON配置文件
     *   *  JSON配置
         *   *  1.所有的页面 pages
             *   *  1.1页面index
                 *  1.2页面logs
             *  2.小程序全局配置 \`app.json\`
             *   *  配置中每一项的含义:
                 *  window的属性:
                 *  tabBar的属性
             *  2.工具配置 project.config.json
             *  3.页面配置 page.json
             *  4.JSON语法
     *  二. \`.wxml\`后缀的\`WXML\`模板文件
     *  三. \`.wxss\`后缀的\`WXSS\`样式文件
     *  四. \`.js\`后缀的\`JS\`脚本逻辑文件

## 一. .json后缀的JSON配置文件 ##

### JSON配置 ###

`JSON`是一种数据格式, 并不是编程语言, 在小程序中, `JSON`扮演的静态配置的角色。一个小程序应用程序中会包括最基本的两种配置文件。一种是全局的`app.json`和页面自己的`page.json`。

**注意：配置文件中不能出现注释。**

#### 1.所有的页面 pages ####

所有的页面都放在pages这个文件夹中。

##### 1.1页面index #####

pages文件夹中的子文件夹index为首页代码。

##### 1.2页面logs #####

pages文件夹中的子文件夹logs为日志。

#### 2.小程序全局配置 `app.json` ####

`app.json`是当前小程序的全局配置, 包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。项目里边的`app.json`配置内容如下:

//公共设置
    { 
      "pages":[
         //谁在前面先显示谁
        "pages/index/index",
        "pages/logs/logs"
        "pages/index2/index2",//新增一个index2的页面
      ],
      "window":{ 
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      },
      "tabBar": { 
        "list": [{ 
          "pagePath": "pages/index/index",
          "text": "首页"
        }, { 
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
      "networkTimeout": { 
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }

##### 配置中每一项的含义: #####

1.  `pages`字段–用于描述当前小程序所有页面路径, 这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.
2.  `window`字段–定义小程序所有页面的顶部背景颜色, 文字颜色定义等。
3.  `tabBar`: 底部`tab`栏的表现。类型为Object。
4.  `networkTiemout`：网络超时时间。类型为Object。
5.  `debug`：是否开启 debug 模式, 默认关闭.
6.  `functionalPages`: 是否启用插件功能页, 默认关闭
7.  `navigateToMiniProgramAppIdList`: 需要跳转的小程序列表.

##### window的属性: #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000</td> 
   <td>导航栏背景颜色</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>string</td> 
   <td>white</td> 
   <td>导航栏标题颜色,仅支持<code>black</code>/<code>white</code></td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>string</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>string</td> 
   <td>default</td> 
   <td>导航栏样式, 仅支持以下值: <code>default</code>默认样式<code>custom</code>自定义导航栏,只保留右上角胶囊按钮.</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#fff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>string</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式, 仅支持 <code>dark</code>/<code>light</code></td> 
  </tr> 
  <tr> 
   <td>backgroundColorTop</td> 
   <td>string</td> 
   <td>#fff</td> 
   <td>顶部窗口的背景色,仅IOS支持</td> 
  </tr> 
  <tr> 
   <td>backgroundColorBottom</td> 
   <td>string</td> 
   <td>#fff</td> 
   <td>底部窗口的背景颜色,仅IOS支持</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>是否开启全局的下拉刷新.</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时据页面底部距离,单位为px.</td> 
  </tr> 
  <tr> 
   <td>pageOrientation</td> 
   <td>string</td> 
   <td>portrait</td> 
   <td>屏幕旋转设置</td> 
  </tr> 
 </tbody> 
</table>

##### tabBar的属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab上的文字颜色,仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab上的文字选中时的颜色, 仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>是</td> 
   <td></td> 
   <td>tab的背景色,仅支持十六进制颜色</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>string</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabbar上边框的颜色,仅支持<code>black</code>/<code>white</code></td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td>tab的列表,最少两个, 最多五个tab</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>string</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>tabBar的位置, 仅支持<code>bottom</code>/<code>top</code></td> 
  </tr> 
  <tr> 
   <td>custom</td> 
   <td>boolean</td> 
   <td>否</td> 
   <td>false</td> 
   <td>自定义tabBar</td> 
  </tr> 
 </tbody> 
</table>

其中list接受一个数组,**只能配置最少2个, 最多5个tab**. tab按数组的顺序排序, 每一项都是一个对象, 其属性值如下:

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>string</td> 
   <td>是</td> 
   <td>页面路径,必须在pages中先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>string</td> 
   <td>是</td> 
   <td>tab上按钮文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>图片路径, icon大小限制为40kb, 建议尺寸为81px*81px,不支持网络图片.<strong>当<code>position</code>为<code>top</code>时, 不显示icon</strong></td> 
  </tr> 
  <tr> 
   <td>selectedlconPath</td> 
   <td>string</td> 
   <td>否</td> 
   <td>选中时的图片路径, icon大小限制为40kb,建议</td> 
  </tr> 
 </tbody> 
</table>

#### 2.工具配置 project.config.json ####

小程序开发者工具在每个项目的根目录都会生成一个`project.config.json`, 你在工具上做的任何配置都会写入到这个文件, 其中会包括编辑器的颜色、代码上传时自动压缩等一系列选项. 对应着详情里边的内容。

#### 3.页面配置 page.json ####

这里的`page.json`其实用来表示pages/logs目录下的`logs.json`这类和小程序页面相关的配置. 可以让开发者独立定义每个页面上的一些属性

#### 4.JSON语法 ####

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

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

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

## 二. `.wxml`后缀的`WXML`模板文件 ##

`WXML`充当的就是类似`HTML`的角色. 和`HTML`非常相似, 都是由标签、属性等构成. 但是也有很多不一样的地方:

1.  标签名字不同
    
    写HTML的时候, 经常用到的标签是`div`, `p`, `span`, 开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件. 微信开发者工具将这些组件包装起来, 大大提高了开发效率.
2.  多了一些`wx:if`这样的属性以及\{ \{\}\}这样的表达式
    
    通常我们会通过`JS`操作`DOM`, 以引起界面的一些变化相应用户的行为. 但是当项目比较大时, 代码的会非常的庞大. 因此我们有了MVVM的开发模式(例如React, Vue), 提倡把渲染和逻辑分离. 然后再通过一种模板语法来描述状态和界面结构的关系即可.

## 三. `.wxss`后缀的`WXSS`样式文件 ##

`wxss`具有`css`大部分的特性, 小程序在`wxss`也做了一些扩充和修改.

1.  新增了尺寸单位(`rpx`).
2.  提供了全局的样式和局部样式. 可以写一个`app.wxss`作为全局样式, 会作用于当前小程序的所有页面, 局部页面样式`page.wxss`仅对当前页面生效.
3.  `wxss`仅支持部分`css`选择器

## 四. `.js`后缀的`JS`脚本逻辑文件 ##

我们通过编写`JS`脚本文件来处理用户的操作

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

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