微信小程序开发简易教程

微信小程序文件结构详解

1. 项目配置文件

project.config.json

项目的配置文件
包含项目名称、appid、编译选项等配置
示例：

json 复制代码

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "你的小程序appid",
  "projectname": "示例小程序",
  "debugOptions": {
    "hidedInDevtools": []
  }
}

app.json

小程序全局配置文件
配置页面路径、窗口样式、底部导航栏等
示例：

json 复制代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "示例小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2. 全局入口文件

app.js

小程序的入口文件
包含小程序的生命周期函数
定义全局数据和方法
示例：

javascript 复制代码

App({
  // 小程序初始化完成时触发，全局只触发一次
  onLaunch: function () {
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        this.globalData.userInfo = res.userInfo
      }
    })
  },
  
  // 小程序显示时触发
  onShow: function () {
    console.log('小程序显示')
  },
  
  // 小程序隐藏时触发
  onHide: function () {
    console.log('小程序隐藏')
  },
  
  // 全局数据
  globalData: {
    userInfo: null,
    version: '1.0.0'
  }
})

app.wxss

全局样式文件
定义所有页面都能使用的样式
示例：

css 复制代码

/* 全局样式 */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

/* 常用文本样式 */
.text-primary {
  color: #07c160;
}

.text-center {
  text-align: center;
}

3. 页面文件夹 (pages)

每个页面通常包含4个文件：

页面 JS 文件 (例如 index.js)

页面的逻辑文件
处理页面的生命周期
定义页面数据和方法
示例：

javascript 复制代码

Page({
  // 页面的初始数据
  data: {
    message: 'Hello World',
    list: []
  },

  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    this.getData()
  },

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

  // 自定义方法
  getData: function() {
    wx.request({
      url: 'api/data',
      success: (res) => {
        this.setData({
          list: res.data
        })
      }
    })
  }
})

页面 WXML 文件 (例如 index.wxml)

页面的结构文件（类似HTML）
使用微信小程序的组件和语法
示例：

html 复制代码

<view class="container">
  <!-- 数据绑定 -->
  <text>{{message}}</text>
  
  <!-- 条件渲染 -->
  <view wx:if="{{list.length > 0}}">
    <!-- 列表渲染 -->
    <view wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </view>
  </view>
  
  <!-- 事件绑定 -->
  <button bindtap="getData">刷新数据</button>
</view>

页面 WXSS 文件 (例如 index.wxss)

页面的样式文件（类似CSS）
仅对当前页面生效
示例：

css 复制代码

/* 页面容器 */
.container {
  padding: 20rpx;
}

/* 列表样式 */
.list-item {
  margin: 20rpx 0;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

/* 按钮样式 */
button {
  margin-top: 40rpx;
  background-color: #07c160;
  color: white;
}

页面配置文件 (例如 index.json)

页面的配置文件
可覆盖app.json中的配置
示例：

json 复制代码

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "custom-component": "/components/custom/custom"
  },
  "enablePullDownRefresh": true
}

4. 组件文件夹 (components)

组件文件结构

与页面文件结构类似
包含 js/wxml/wxss/json 四个文件
示例组件 JS：

javascript 复制代码

Component({
  // 组件的属性列表
  properties: {
    title: {
      type: String,
      value: ''
    }
  },

  // 组件的初始数据
  data: {
    count: 0
  },

  // 组件的方法列表
  methods: {
    handleClick() {
      this.setData({
        count: this.data.count + 1
      })
      // 触发自定义事件
      this.triggerEvent('customevent', {
        count: this.data.count
      })
    }
  }
})

5. 其他重要文件

utils/util.js

工具函数文件
存放公共方法
示例：

javascript 复制代码

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('/')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime,
  formatNumber
}

sitemap.json

小程序搜索相关配置
配置页面是否允许被微信索引
示例：

json 复制代码

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
    "action": "allow",
    "page": "*"
  }]
}

文件命名规范

文件夹和文件名使用小写字母
多个单词使用连字符(-) 或下划线(_)连接
页面文件夹与文件名保持一致
组件文件夹使用有意义的名称

开发注意事项

生命周期管理
- 合理使用页面和应用的生命周期函数
- 在适当的生命周期处理数据加载和清理
数据管理
- 使用 setData 更新数据
- 避免频繁调用 setData
- 合理使用全局数据
性能优化
- 及时销毁不需要的定时器和事件监听
- 合理使用组件和页面的懒加载
- 优化图片资源
代码规范
- 遵循统一的代码风格
- 适当添加注释
- 做好错误处理