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

冷不防 2021-12-09 06:17 435阅读 0赞

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

*  .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 中的对应配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]

## 二、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/][https_developers.weixin.qq.com_miniprogram_dev_framework]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211208/53deab35246242a1b9592488a8d42ed6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211208/f1eeb99ab07e4df1a8f3cc3fdb156e46.png
[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/