微信小程序代码构成及每一个代码文件的作用（附图）

一、微信小程序有四种类型文件：

1. JSON配置文件（.json后缀）

2. WXML模板文件（.wxml后缀）

3. WXSS样式文件 （.wxss后缀）

4. JS脚本逻辑文件 （.js后缀）

二、JSON配置：

1.JSON配置：JSON是一种数据格式，用来静态配置。

app.json  小程序配置

project.config.json  工具配置 

page.json 页面配置

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

JSON的值几种数据格式：

1.数字，包含浮点数和整数

2.字符串，需要包裹在双引号中

3.bool值，true或者false

4.数组，需要包裹在方括号中【】

5.对象，需要包裹在大括号中{}

三、WXML 模板

1.打开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>

通过{{ }}的语法吧一个变量绑定到界面上，我们称为数据绑定。

 <text class="user-motto">{{motto}}</text>

还需要if/else,for等控制能力，在小程序里边，这些控制能力都用wx: 开头的属性来表达。

例如：
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>

<block wx:else>

四.WXSS样式

app.wxss 全局样式
page.wxss 页面样式 （局部样式）

五.JS逻辑交互

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

六、微信小程序每个文件的作用（图）

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

以上便是本人学习微信小程序代码结构的笔记，分享给志同道合的IT朋友。