小程序的组成结构

老大 — Mon, 29 Dec 2025 08:55:33 +0000

基本组成结构

（1）pages（目录）：用来存放所有小程序的页面。

（2）utils（目录）：用来存放工具性质的模板

（3）app.js:小程序项目的入口文件

（4）app.json:小程序项目的全局配置文件。

（5）app.wxss:小程序项目的全局样式文件

（6） project.config.json项目的配置文件

这是一个练习项目宿舍管理小程序，我们可以清晰地看到在文件夹miniprogram下存在的几个文件夹。第一个文件夹images主要是存放一些小程序中所需的图片；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqBTqrBc-1664789463320)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7b41ad29e527442586288e704e3f7bba~tplv-k3u1fbpfcp-watermark.image?)]

pages就是存放小程序的每个页面，因为每个小程序肯定不会只有一个页面，所以pages下也存在多个页面。例如home是主页面，night是学生晚归管理界面等等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ilBVlWH2-1664789463321)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b486a9199dff409dba11ede7c65b5d6f~tplv-k3u1fbpfcp-watermark.image?)]

JSON配置

JSON是一种数据格式，在实际开发工作中，JSON总是以配置文件的形式存在。在小程序中它也是以配置文件的形式存在，通过对不同的.json配置文件进行设置，可以对小程序进行不同级别的设置。

(1)小程序配置app.json

app.json是当前小程序的全局配置，包括了小程序的所有页面路径，窗口外观，界面表现等等。新建一个空白的小程序，app.json默认的配置代码：

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

其中pages是用来记录所有页面的路径，window记录全局页面的背景和文字颜色；style定义了组件的样式版本；sitemapLocation用来指明sitemap.json的位置

（2）工具配置project.config.json

小程序的每个项目根目录下都会生成一个工具配置文件，主要目的就是方便开发者根据自己的兴趣爱好进行一些个性化配置，比如界面颜色、编译配置等方面。你在开发者工具中进行的任何配置都是会写入到这个文件的。

（3）页面配置page.json

小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。

WXML 模板

其实小程序的开发和网页开发很类似，学过前端的小伙伴都知道网页是通过html+css+js进行开发的。而在小程序中wxml充当的就是网页中html的角色。

<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非常相似但也存在很多不一样的地方，

标签名字不一样，小程序的标签是view、button、text
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
提供了类似于vue中的模板语法

WXSS样式

WXSS是一套样式语言，用于描述WXML的组件样式，相当于网页开发中的css，WXSS具有CSS的大部分特性，但也做了一些扩充和修改。

新增了尺寸单位
提供了全局的样式和局部样式。其中app.wxss就是进行全局的样式设置。而page.wxss是进行单个页面的样式设置。
WXSS 仅支持部分 CSS 选择器

JS逻辑交互

一个小程序或者是界面只有静态的样式完全是不能满足人们的需求的，必须有人机交互，这一功能就是通过JS来实现的。小程序的JS文件主要分为三类：app.js是整个小程序的入口；页面的.js文件，是单独页面的入口；普通的.js文件，就是普通的功能模块文件。例如：点击一个按钮的时候，希望界面上显示“Hello”

Page({
  clickMe: function() {
    this.setData({ msg: "Hello" })
  }
})

除此之外还可以通过JS调用小程序中的各种API，利用这些API可以使用微信提供的丰富功能。比如：微信登录、获取用户信息、微信支付等等。