第二章总结（微信小程序的基本组成结构）

好唔好意

已于 2024-03-07 10:04:22 修改

阅读量374

点赞数 11

文章标签：微信小程序小程序

于 2024-03-05 16:29:24 首次发布

本文链接：https://blog.csdn.net/m0_74879280/article/details/136482426

版权

微信小程序作为轻量级的应用开发平台，其核心优势在于便捷的开发流程和高效的运行效率。本文将详细介绍微信小程序的基本组成结构，并通过具体的代码示例进行解析。

微信小程序的基本组成结构

微信小程序主要由以下几个部分构成：

1. **app.json**：这是小程序的全局配置文件，用于设置页面路径、窗口表现、网络超时等基础信息。例如：

//json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navi`gationBarTitleText": "小程序DEMO",
    "navigationBarTextStyle": "black"
  }
}

2. **app.js**：小程序的入口文件，主要负责注册小程序以及定义全局数据和函数。例如：

//javascript
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

3. **pages**目录：该目录下存放各个页面的逻辑层文件（js）、视图层文件（wxml）和样式层文件（wxss）。每个页面至少包含三个文件：

//javascript
   Page({
     data: {
       text: 'Hello World'
     },
     onLoad: function () {
       console.log('Page onLoad')
     }
   })

- **pageName.wxml**：类似HTML的结构文件，描述页面的布局结构。

//html
   <view>
     <text>{{text}}</text>
   </view>

- **pageName.wxss**：样式表文件，用于定义页面的样式规则，类似于CSS。

  //css
   page {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
   }
   text {
     font-size: 30px;
   }

4. **project.config.json**：项目配置文件，包括项目的appid、开发工具的自定义设置等。

5. **utils**或其他辅助目录：存放工具函数、公共模块等。

以上述index页面为例，当小程序启动后，它首先读取app.json中的pages配置，加载并初始化index页面。在index.js中，我们设置了页面的初始数据，并绑定了onLoad生命周期函数。页面的渲染则根据index.wxml和index.wxss完成，最终用户在手机上看到的是“Hello World”这个文本信息。

总结来说，微信小程序的核心架构清晰明了，每个组成部分各司其职，共同构成了一个完整的应用生态体系。理解并掌握这些基本结构，是进行小程序开发的第一步。

配置文件

app.json：小程序的全局配置文件，用于配置小程序的全局属性，包括页面路径、窗口样式、网络超时设置等。在 app.json 中可以配置页面路径、页面窗口的样式设置、导航栏样式、底部 tabBar 等信息。

page.json：页面级配置文件，用于配置页面特有的属性，如页面自定义导航栏样式、下拉刷新配置等。在 page.json 中可以配置页面独立的窗口样式、导航栏样式、和其他页面相关的配置信息。

project.config.json：项目配置文件，用于配置项目的开发者工具、appid、项目类型等。在 project.config.json 中可以配置项目的开发者信息、调试设置、编译配置等。

sitemap.json：小程序的搜索引擎信息配置文件，用于配置小程序的页面信息、页面的访问权限等。在 sitemap.json 中可以配置小程序页面的访问权限、页面路径、页面标签等信息。

project.swan.json（百度小程序）：百度小程序项目配置文件，用于配置百度小程序的开发者信息、appid、项目配置等。

这些配置文件在小程序开发中扮演着重要的角色，开发者需要根据需求和项目要求对这些配置文件进行合理的设置和调整。不同的小程序平台可能会有一些差异，开发者需要根据具体的平台要求进行设置。

window配置项及其描述

tabBar配置项及其描述

tabBar中list选项

networkTimeout配置项


{
  "pages": [
    "pages/news/news",
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序window功能演示",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "color": "#66666",
    "selectedColor": "#ff0000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "images/ai.png",
      "selectedIconPath": "images/ps.png",
      "text": "首页"
      
    },
    {
      "pagePath": "pages/news/news",
      "iconPath": "images/dyh.png",
      "selectedIconPath": "images/wz.jpg",
      "text": "新闻"
    }
  ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

逻辑层文件

在小程序开发中，逻辑文件通常指的是逻辑层的文件，主要包括以下几种类型：

JS 文件：逻辑层主要使用 JavaScript 编写，通常是以.js为后缀的文件，用于处理页面的业务逻辑、事件处理、数据处理等。在逻辑文件中可以定义页面的数据、方法、事件监听等，实现页面的交互逻辑。

逻辑页面文件：逻辑页面文件（类似于页面级组件）是一种特殊的逻辑文件类型，在其中既包含了 WXML 页面结构，也包含了对应的逻辑处理。逻辑页面文件可以更方便地一起管理页面的结构和逻辑，减少文件数量和提高代码可读性。

utils 文件：通常用来存放一些通用的工具函数或公共方法，例如封装的网络请求函数、日期格式化函数等。将这些公用的逻辑放在一个单独的文件夹中有助于代码的组织和重用。

config 文件：用于存放配置信息的文件，例如接口地址、常量定义等。这些配置信息可以在整个小程序中被引用和共享。

service 文件：用于处理小程序的业务逻辑和数据交互，例如调用后端API接口、处理数据等。这些服务文件帮助将业务逻辑和数据处理分离出来，提高代码的可维护性和可测试性。

其他自定义的逻辑文件：根据具体的业务需求和开发规范，开发者可能还会创建一些自定义的逻辑文件，用于实现特定功能或模块的业务逻辑。

逻辑文件在小程序开发中扮演着重要的角色，负责处理页面的业务逻辑和数据处理，使页面能够响应用户的操作并展现正确的数据内容。合理组织和管理逻辑文件有助于提高代码的可读性、可维护性和扩展性。


age({
  data:{
    name:'lwk',
    age:30,
    birthday:[{year:1998},{montn:11},{date:18}],
    object:{hobby:'computer'},
    students:[
      {nickname:'zyf',height:'110',weight:'189'},
      {nickname:'gwzy',height:'168',weight:'90'}
    ]
  }
})
<view>姓名:{{name}}</view>
22<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{ffbirthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
//app.js
App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
  console.log("小程序启动");
},
onHide(){
  console.log("小程序隐藏");
}
})

页面结构文件

在小程序开发中，页面结构文件主要指的是 WXML 文件，用于定义页面的结构和布局。WXML 是一种类似于 HTML 的标记语言，用于描述小程序页面的结构，包括各种组件、元素的排列和样式。

页面结构文件主要包含以下内容：

组件元素：WXML 中可以包含各种小程序组件，例如 view、text、image、button 等，以及自定义的组件。这些组件可以嵌套使用，构建出页面的复杂结构。

组件属性：组件元素可以设置各种属性，用于控制组件的样式、行为和数据展示。例如，可以设置组件的样式、事件处理函数、数据绑定等。

数据绑定：WXML 中支持数据绑定，可以在页面中将数据与页面元素进行绑定，实现数据的动态展示。通过{{}}语法，可以将页面中的数据和变量与页面元素进行关联。

事件绑定：WXML 中可以绑定各种事件处理函数，例如点击事件、滑动事件等。通过在页面元素上指定事件处理函数，可以实现用户交互操作的响应。

条件渲染和列表渲染：WXML 支持条件渲染和列表渲染，可以根据条件控制页面元素的显示和隐藏，也可以通过循环渲染列表中的数据。

模板引用：可以通过<template>标签定义模板，然后在页面中引用模板，实现页面代码的复用。

页面结构文件与逻辑文件（如 JavaScript 文件）相互配合，实现页面的交互逻辑和数据处理。逻辑文件通过操作数据，更新页面数据，页面结构文件负责将数据展示在页面上，通过组件元素构建页面的视图。合理使用页面结构文件可以实现页面布局的灵活控制和代码结构的清晰分离，提高小程序开发效率和代码维护性。



</view>
<view>爱好:{{object.hobby}}</view>
<view>算数运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==40 ?'happy':'no happy'}}</view>
 
<view wx:if="age>40">1</view>
<view wx:elif="age==40">0</view>
<view wx:else>-1</view>
 
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>

页面样式文件

在小程序开发中，页面样式文件主要指的是 WXSS 文件，用于定义小程序页面的样式和布局。WXSS 类似于 CSS，但针对小程序进行了一些定制和优化，可以更好地适配小程序的特性和环境。

页面样式文件主要包含以下内容：

样式规则：在 WXSS 文件中可以定义各种样式规则，例如元素的颜色、大小、字体、布局等。可以通过类名、标签名、ID选择器等方式定义样式规则。

单位：WXSS 支持 rpx 单位，相对于屏幕宽度进行适配，使得页面在不同屏幕尺寸上能够更好地展示。

样式变量：可以在 WXSS 文件中使用样式变量，方便管理和调整页面的样式。通过定义变量，可以在整个样式文件中重复使用，提高样式的复用性和维护性。

样式导入：可以在 WXSS 文件中导入其他样式文件，实现样式的模块化管理。

伪类选择器：支持一些伪类选择器，例如 :hover、:active 等，用于定义元素在不同状态下的样式。

样式继承：WXSS 支持样式的继承，可以通过定义通用样式类，然后在多个元素中引用，提高样式的复用性和代码的简洁性。

小程序的页面结构文件（WXML）、样式文件（WXSS）和逻辑文件（JavaScript）共同配合，实现页面的布局、样式和交互逻辑。页面样式文件负责定义页面元素的样式和布局，使得页面在不同设备上都能够以一致的方式展示，并通过样式的设计提升用户体验。合理的使用页面样式文件可以使得页面样式易于管理、更新和维护，提高页面的美观度和用户友好性。