微信小程序开发入门实战（二）小程序代码构成与基础知识

墨蓝 2022-12-02 00:53 212阅读 0赞

我们通过开发者工具快速创建了一个 QuickStart 项目。当你打开这个项目你会发现不同类型的文件:

*  json 后缀的 JSON 配置文件
 *  wxml 后缀的 WXML 模板文件
 *  wxss 后缀的 WXSS 样式文件
 *  js 后缀的 JS脚本逻辑文件

你可以看到：小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成。

接下来我们分别看看这4种文件的作用。

### 小程序代码构成 ###

**JSON 配置**

在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。  
小程序配置 app.json

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

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

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

1.  pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 window字段 ——
2.  定义小程序所有页面的顶部背景颜色，文字颜色定义等。其他配置项细节可以参考文档： 小程序的配置 app.json 。

**我们可以通过一个例子弄懂它。**

修改第 9 行为 “navigationBarTitleText”: “MiniProgram” ，如图：

![修改 navigationBarTitleText][navigationBarTitleText]  
保存代码，开发者工具自动刷新后，注意到模拟器顶部 bar 的文本字段由 Wechat 变为MiniProgram。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center]  
**工具配置 project.config.json**

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

**页面配置 page.json**

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

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

**WXML 模板**

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。

<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>

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

1.  标签名字有点不一样，他们是小程序的标签组件，小程序的 WXML 用的标签是 view, button, text  
    等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
2.  多了一些 wx:if 这样的属性以及 \{ \{ \}\} 这样的表达式，小程序采用了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。

如果你需要把一个 Hello World 的字符串显示在界面上。WXML 是这么写 :

JS 只需要管理状态即可:

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

### WXSS 样式 ###

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

1.  新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位 rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2.  提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss  
    作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3.  此外 WXSS 仅支持部分 CSS选择器

**JS 逻辑交互**

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

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

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

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。

在了解完这些基本的代码构成后，下面再了解一些基础知识。

### 目录结构 ###

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

<table> 
 <thead> 
  <tr> 
   <th>文件</th> 
   <th>必需</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>app.js</td> 
   <td>是</td> 
   <td>小程序逻辑</td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td>是</td> 
   <td>小程序公共配置</td> 
  </tr> 
  <tr> 
   <td>app.wxss</td> 
   <td>否</td> 
   <td>小程序公共样式表</td> 
  </tr> 
 </tbody> 
</table>

一个小程序页面由四个文件组成，分别是：

<table> 
 <thead> 
  <tr> 
   <th>文件类型</th> 
   <th>必需</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>js</td> 
   <td>是</td> 
   <td>页面逻辑</td> 
  </tr> 
  <tr> 
   <td>wxml</td> 
   <td>是</td> 
   <td>页面结构</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>否</td> 
   <td>页面配置</td> 
  </tr> 
  <tr> 
   <td>wxss</td> 
   <td>否</td> 
   <td>页面样式表</td> 
  </tr> 
 </tbody> 
</table>

> **注意**：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、\*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1.  wxs
2.  png
3.  jpg
4.  jpeg
5.  gif
6.  svg
7.  json
8.  cer
9.  mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk

### 小程序配置 ###

**全局配置**

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

**以下是一个包含了部分常用配置选项的 app.json ：**

{
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/index",
          "text": "日志"
        }]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }

完整配置项说明请参考小程序全局配置

**页面配置**

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

完整配置项说明请参考小程序页面配置

例如：

{ 
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }

### 视图层 ###

**WXML**

上面我们简单介绍了一下WXML，接下来我们用简单的例子来看看 WXML 具有什么能力：

**数据绑定**

<view> {
       {message}} </view>
    // page.js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

**列表渲染**

<view wx:for="{ {array}}"> {
       {item}} </view>
    // page.js
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

**条件渲染**

<view wx:if="{ {view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{ {view == 'APP'}}"> APP </view>
    <view wx:else="{ {view == 'MINA'}}"> MINA </view>
    // page.js
    Page({
      data: {
        view: 'MINA'
      }
    })

**模板**

<template name="staffName">
      <view>
        FirstName: {
       {firstName}}, LastName: {
       {lastName}}
      </view>
    </template>
    
    <template is="staffName" data="{ {...staffA}}"></template>
    <template is="staffName" data="{ {...staffB}}"></template>
    <template is="staffName" data="{ {...staffC}}"></template>
    // page.js
    Page({
      data: {
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'},
        staffC: {firstName: 'Gideon', lastName: 'Lin'}
      }
    })

**具体的能力以及使用方式在以下章节查看：**

数据绑定、列表渲染、条件渲染、模板、引用

**WXSS**

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

1.  尺寸单位
2.  样式导入

**尺寸单位**

1.  rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6  
    上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px =  
    1物理像素。

<table> 
 <thead> 
  <tr> 
   <th>设备</th> 
   <th>rpx换算px (屏幕宽度/750)</th> 
   <th>px换算rpx (750/屏幕宽度)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone5</td> 
   <td>1rpx = 0.42px</td> 
   <td>1px = 2.34rpx</td> 
  </tr> 
  <tr> 
   <td>iPhone6</td> 
   <td>1rpx = 0.5px</td> 
   <td>1px = 2rpx</td> 
  </tr> 
  <tr> 
   <td>iPhone6 Plus</td> 
   <td>1rpx = 0.552px</td> 
   <td>1px = 1.81rpx</td> 
  </tr> 
 </tbody> 
</table>

**建议：** 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

**注意**： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。  
样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
    .small-p { 
      padding:5px;
    }

/** app.wxss **/
    @import "common.wxss";
    .middle-p { 
      padding:15px;
    }

**内联样式**

框架组件上支持使用 style、class 属性来控制组件的样式。

> style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style  
> 中，以免影响渲染速度。

> class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

**选择器**

目前支持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td>.intro</td> 
   <td>选择所有拥有 class=“intro” 的组件</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>#firstname</td> 
   <td>选择拥有 id=“firstname” 的组件</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>view</td> 
   <td>选择所有 view 组件</td> 
  </tr> 
  <tr> 
   <td>element, element</td> 
   <td>view, checkbox</td> 
   <td>选择所有文档的 view 组件和所有的 checkbox 组件</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>view::after</td> 
   <td>在 view 组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>view::before</td> 
   <td>在 view 组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

**全局样式与局部样式**

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

至此，小程序代码构成与基础知识就完成了。

作者：言墨儿  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[navigationBarTitleText]: /images/20221123/1daefa358d644d92873be3ab59b1bda5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/87b25fe2753b4a9f99cf0908e7f5ca6a.png