微信小程序 - 目录结构分析

微信小程序目录结构，主要有以下四种文件组成：

• .json - 配置文件
• .wxml - 模板文件
• .wxss - 样式文件
• .js - 逻辑文件

一、JSON 配置文件

• app.json - 小程序配置文件，用于配置 pages（页面路径）、window（窗口/导航栏）、tabBar（底部导航栏）等

注：json文件中，如需注释，可以使用 key:value 形式表示

{
  “pages-desc”: "pages 用于配置页面路径，配置完成后保存自动生成对应页面文件夹"	
  "pages": [ 
    "pages/index/index",
    "pages/logs/logs",
    "pages/detail/detail",
    "pages/comment/comment",
    "pages/person/person"
  ],
  “window-desc”: "window 用于配置窗口/导航栏 标题、字体颜色、背景色、下拉刷新等"
  "window": {
    "navigationBarBackgroundColor": "#108ee9",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#666",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  },
  “tabBar-desc”: "tabBar 用于配置底部导航栏 文本、字体颜色、背景色、图标、选中样式、跳转页面等"
  "tabBar": {
    "backgroundColor": "",
    "borderStyle": "black",
    "color": "#000",
    "selectedColor": "#108ee9",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icons/index.png",
        "selectedIconPath": "images/icons/index-selected.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "电影详情",
        "iconPath": "images/icons/movie.png",
        "selectedIconPath": "images/icons/movie-selected.png"
      },
      {
        "pagePath": "pages/comment/comment",
        "text": "评论",
        "iconPath": "images/icons/comment.png",
        "selectedIconPath": "images/icons/comment-selected.png"
      },
      {
        "pagePath": "pages/person/person",
        "text": "我的",
        "iconPath": "images/icons/person.png",
        "selectedIconPath": "images/icons/person-selected.png"
      }
    ]
  },
  “permission-desc”: "premission 用于设置小程序接口权限相关"
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "sitemapLocation": "sitemap.json"
}

• page.json - 页面配置文件，用于个性化设置，调整 window 中的配置项，配置后将覆盖 app.json 中的对应配置

二、WXML 模板文件

相当于HTML文件，与HTML语法非常相似，不同的是，需要使用微信定义的语法书写（类似vue、react）

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

• app.wxml - 默认不显示，小程序的模板文件，可在 调试器 - Wxml 中 看到 标签
• page.wxml - 各页面的模板文件

注意事项：

• 数据绑定：使用 {{}} 进行数据绑定

<!-- 例: -->
<view data-time="{{ dataTime }}">
  <text>时间：{{ time }}</text>
</view>

• 逻辑运算：在 {{}} 中进行简单逻辑运算

<!-- 例: -->
<view>
  <text>{{ a > 10? "a大于10": "a小于等于10" }}</text>
</view>

• 条件判断： wx:if=""、wx:elif=""、wx:elise

• 列表渲染： wx:for="{{ data }}"

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

<!-- 例: -->
<view wx:for="{{ data }}" wx:for-index="i" wx:for-item="data">
  {{ i }}: {{ data.msg }}
</view>

• template模板

name 为模板名称，使用时，只需用 is 声明使用的模板名称即可

<!-- 例: -->
<!-- 定义模板 -->
<template name="message">
  <view>
    <text>姓名：{{ name }}</text>
  </view>
</template>

<!-- 使用模板 -->
<template is="message" data="{{ name: "Brady" }}"></template>

• 引用

import 用于引用文件，使用对应文件中的 模板
include 用于引用、使用整个文件代码（不包含 template 和 wxs）

• wxs

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意：
1.WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2.WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
3.WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
4.WXS 函数不能作为组件的事件回调。
5.由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异

<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

三、WXSS 样式文件

相当于CSS文件，与CSS语法类似，只有部分CSS选择器无法使用

全称是 WeiXin Style Sheets，是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

• app.wxss - 小程序样式文件，全局配置
• page.wxss - 各页面的样式文件

注意事项：

• 尺寸单位

使用 rpx 作为尺寸单位，以 IPhone6 为标准，换算方式为：1px = 2rpx

四、JS 逻辑文件

所有业务逻辑均在 js 文件中完成

• app.js - 小程序的逻辑文件，全局配置

App({
  // 小程序启动后，触发
  onLaunch (options) {
  }, 
  onShow (options) {
  },
  onHide () {
  },
  onError (msg) {
  },
  globalData: '全局属性'
)}

• page.js - 页面的逻辑文件

//获取应用实例
const app = getApp()

Page({
  // 数据	
  data: {
  },
  // 页面渲染后，执行
  onLoad () {
  },
  onReady () {
  },
  onShow () {
  },
  onHide () {
  },
  onUnload () {
  },
  onPullDownRefresh () {
  },
  onReachBottom () {
  },
  onShareAppMessage () {
  },
  onPageScroll () {
  },
  onResize () {
  }
})

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/