微信小程序开发简易教程

微信小程序文件结构详解

1. 项目配置文件

project.config.json

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

{"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

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

{"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

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

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

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

/* 全局样式 */
.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)

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

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）
• 使用微信小程序的组件和语法
• 示例：

<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）
• 仅对当前页面生效
• 示例：

/* 页面容器 */
.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中的配置
• 示例：

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

4. 组件文件夹 (components)

组件文件结构

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

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

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

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const 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

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

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

文件命名规范

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

开发注意事项

1. 生命周期管理

   • 合理使用页面和应用的生命周期函数
   • 在适当的生命周期处理数据加载和清理

2. 数据管理

   • 使用 setData 更新数据
   • 避免频繁调用 setData
   • 合理使用全局数据

3. 性能优化

   • 及时销毁不需要的定时器和事件监听
   • 合理使用组件和页面的懒加载
   • 优化图片资源

4. 代码规范

   • 遵循统一的代码风格
   • 适当添加注释
   • 做好错误处理