微信小程序开发简易教程
微信小程序文件结构详解
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": "*"}]
}
文件命名规范
- 文件夹和文件名使用小写字母
- 多个单词使用连字符(-) 或下划线(_)连接
- 页面文件夹与文件名保持一致
- 组件文件夹使用有意义的名称
开发注意事项
-
生命周期管理
- 合理使用页面和应用的生命周期函数
- 在适当的生命周期处理数据加载和清理
-
数据管理
- 使用 setData 更新数据
- 避免频繁调用 setData
- 合理使用全局数据
-
性能优化
- 及时销毁不需要的定时器和事件监听
- 合理使用组件和页面的懒加载
- 优化图片资源
-
代码规范
- 遵循统一的代码风格
- 适当添加注释
- 做好错误处理