小程序开发：基础目录结构与配置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15980721/article/details/78976578

本文详细介绍了小程序的开发中涉及的基础目录结构，包括配置文件的设置，以及wxss层和js逻辑层的重要内容。适合初学者了解小程序开发的入门知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习时间：第一天 2018年1月4日

一、基本目录结构

对于一个基本的小程序必备的入口文件为app.js、app.json、app.wxss；project.config.json（用于工程配置初始化，在程序运行之前配置好。）

二、配置文件app.json文件

{
  "pages": [
    "pages/welcome/welcome"  //按顺序的列出目标view层
  ],
  "window": {
    "navigationBarBackgroundColor": "#e1e1e1"   //修改状态栏背景颜色
  }
}

三、View 层

类似于HTML的基本框架

<view class="container">

  <image class='avatar_img' src='/images/avatar/1.png'></image>
  <text class='user_text'>你的用户名</text>
  <view class='btn' bindtap='xxxxx'>
    <text>开启小程序之旅</text>
  </view>
</view>

四、wxss层

page{
  background: #e1e1e1;
}
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar_img{
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}
.user_text{
  padding: 20px 0px;
}
.btn{
  padding: 3px 10px;
  border:1px solid #666;
  border-radius: 5px;
  color: #666;
}

与css 完全一致，这里使用rpx为单位，有利于网页完美的显示。

  display: flex;
  flex-direction: column;
  align-items: center;

目前第一次使用弹性盒子模型

五、js逻辑层

Page({

  /**
   * 页面的初始数据
   */
  data: {
    xxxxx: function (event) {
      console.log("xxx")
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

以上为基本框架