走进小程序【三】小程序代码构成

前言

哈喽小伙伴们，上一期带大家简单搭建了小程序的环境并且通过微信开发者工具创建了我们的第一个小程序项目，相信大家阅读之后也对微信小程序有了一定的认识。今天咱们继续小程序的第三篇，本文通过一个 钢琴小案例 来给大家讲讲 小程序的基本代码构成 都有那些；话不多说，咱们直接开整！

小程序代码构成

​在上一章中，我们通过开发者工具快速创建了一个小程序项目。你可以留意到这个项目里边生成了不同类型的文件:

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

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

JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途

小程序配置 app.json

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

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

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

• pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
• window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义；用于设置小程序的状态栏、导航条、标题、窗口背景色。

补存：pages 字段里的 第一项 默认为 小程序的启动页面

属性	类型	默认值	描述
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTitleText	string	-	导航栏标题文字内容
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white

其他配置项细节可以参考文档 小程序的配置 app.json 。

工具配置 project.config.json

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

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

页面配置 page.json

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

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

JSON 语法

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

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

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

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

WXML 模板

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

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开
pages/index/index.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>

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

• 标签名字有点不一样

  往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。

  从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

  在网页的一般开发流程中，我们通常会通过 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

WXSS 样式

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

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

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

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

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

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" })
  }
})

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

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

钢琴小程序

先行体验

index.json 配置文件

{
    "pageOrientation": "landscape", // 设置横屏显示，复制代码后删掉该注释
    "usingComponents": {},
    "navigationBarTitleText": "触手可弹" // index.wxml页面标题，复制代码后删掉该注释
}

index.wxml 页面结构

<view class="top">
  <!-- 小程序内置轮播图组件 -->
  <swiper circular="{{true}}" indicator-dots="true" indicator-active-color="rgba(255,255,255,1)">
    <!-- swiper-item 轮播图组件里的每一项 -->
    <swiper-item>
      <view class="title"> 两只老虎 </view>
      <view>1231 1231 345 345</view>
      <view>565431 565431 151 151</view>
    </swiper-item>
    <swiper-item>
      <view class="title"> 找朋友 </view>
      <view>1112 355 5653 232</view>
      <view>311 532 1235231</view>
    </swiper-item>
    <swiper-item>
      <view class="title"> 世上只有妈妈好 </view>
      <view>6535166 3565152</view>
      <view>2355631 53265</view>
    </swiper-item>
  </swiper>
</view>
<view class="bottom">
  <view class="key" wx:for="{{keys}}" wx:key="index" bindtap="playmusic" data-voice="{{item.voice}}" data-scale="{{item.scale}}" hover-class="active">
    <view>
     {{item.scale}}
    </view>
    <view class="voice" style="background:{{item.bg}}">
      {{item.voice}}
    </view>
  </view>
</view>

列表渲染

• wx:for

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

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

• wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

• data-属性名
  自定义属性，以 data-属性名 的方式定义，为的是在事件里可以拿到我们想要的东西

  // index.wxml
  <view class="key" wx:for="{{keys}}" wx:key="index" bindtap="playmusic" data-voice="{{item.voice}}"  hover-class="active"></view>

 // index.js
   playmusic(event){
    let music = event.currentTarget.dataset.voice;
  }
})

index.wxss 样式表

/* page为根元素，类似html, body */
page{
  background-color: #333333;
}
.top{
  width: 100%;
  height: 50vh;
  text-align: center;
  color: #ffffff;

}
.title{
    margin: 20rpx 0;
}
.active {
  opacity: 0.8;
  background-color: rgb(182, 175, 167);
}
.bottom{
  width: 98%;
  height: 50vh;
  margin: 0 auto;
  display: flex;
}
.bottom .key{
  flex-grow: 1;
  width: 4.666%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 0 0 5rpx 5rpx;
  border: 1rpx solid #333333;
  box-sizing: border-box;
  text-align: center;
}
.voice{
  color: #ffffff;
  width: 90%;
  margin: 0 auto;
}

index.js

/**
 * 3个音部  7个音阶  21个键
 * 每个键上包含一个音阶，音部
 */
let keys=[
  {scale:1,voice:'A3',bg:'#409EFF'},
  {scale:2,voice:'B3',bg:'#409EFF'},
  {scale:3,voice:'C3',bg:'#409EFF'},
  {scale:4,voice:'D3',bg:'#409EFF'},
  {scale:5,voice:'E3',bg:'#409EFF'},
  {scale:6,voice:'F3',bg:'#409EFF'},
  {scale:7,voice:'G3',bg:'#409EFF'},
  {scale:1,voice:'A4',bg:'#5CB87A'},
  {scale:2,voice:'B4',bg:'#5CB87A'},
  {scale:3,voice:'C4',bg:'#5CB87A'},
  {scale:4,voice:'D4',bg:'#5CB87A'},
  {scale:5,voice:'E4',bg:'#5CB87A'},
  {scale:6,voice:'F4',bg:'#5CB87A'},
  {scale:7,voice:'G4',bg:'#5CB87A'},
  {scale:1,voice:'A5',bg:'#E6A23C'},
  {scale:2,voice:'B5',bg:'#E6A23C'},
  {scale:3,voice:'C5',bg:'#E6A23C'},
  {scale:4,voice:'D5',bg:'#E6A23C'},
  {scale:5,voice:'E5',bg:'#E6A23C'},
  {scale:6,voice:'F5',bg:'#E6A23C'},
  {scale:7,voice:'G5',bg:'#E6A23C'},
];
Page({
  data:{
    keys:keys
  },
  playmusic(event){
    let music = event.currentTarget.dataset.voice;
    let audio = wx.createInnerAudioContext(); // 创建音频上下文
    audio.src="/music/"+music+'.mp3'; // 通过点击事件设置所播放音频的 src
    audio.play(); // 播放该音频
  }
})

根目录下创建music文件夹

该文件夹存放需要用到的音频文件，需要的私信我就好，后续我会上传该资源，大家也可以自行去下载。

结语

这篇文章讲了一下小程序代码的主要构成并且实现了一个弹琴小程序，希望大家也可以多多练习。后续几期会教大家如何发布我们的小程序并且深入去讲解小程序其他的一些重要知识点等等；各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！