微信小程序开发零基础入门：从项目结构到核心文件全解析-程序员充电站

微信小程序开发零基础入门：从项目结构到核心文件全解析

【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples

微信小程序开发已成为移动应用开发的重要技能，本文将带你快速掌握微信小程序目录结构和小程序配置文件的核心知识。通过实际项目案例，你将从零开始理解小程序的工作原理，轻松上手开发第一个属于自己的小程序。

5分钟看懂项目架构

小程序项目就像一个精心整理的书架，每个文件和目录都有其特定的位置和功能。以下是标准的项目结构：

wechat-miniprogram-examples/ ├── app.js # 小程序大脑 ├── app.json # 小程序身份证 ├── app.wxss # 小程序化妆间 ├── pages/ # 小程序展示厅 │ ├── index/ # 首页展厅 │ └── detail/ # 详情页展厅 ├── components/ # 小程序积木零件 ├── utils/ # 小程序工具箱 └── project.config.json # 小程序工程图纸

这个结构清晰地展示了小程序的各个组成部分，就像一个完整的"数字商店"，每个文件都扮演着重要角色。

手把手配置核心文件

app.json - 小程序的身份证

app.json就像小程序的身份证，记录了小程序的基本信息和页面配置。以下是一个实用的配置示例：

{ "pages": [ "pages/index/index", "pages/detail/detail" ], "window": { "navigationBarTitleText": "我的小程序", "navigationBarBackgroundColor": "#4CAF50", "navigationBarTextStyle": "white" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/detail/detail", "text": "详情" } ] } }

⚠️新手避坑点：页面路径必须以/开头，且确保实际文件路径与配置一致，否则会出现页面加载失败。

app.js - 小程序的大脑

app.js是小程序的大脑，负责全局逻辑。以下是一个简单而实用的示例：

App({ onLaunch() { // 小程序启动时执行 console.log('欢迎使用我的小程序！'); this.checkUpdate(); }, checkUpdate() { // 检查小程序更新 const updateManager = wx.getUpdateManager(); updateManager.onUpdateReady(() => { wx.showModal({ title: '更新提示', content: '新版本已准备好，是否重启应用？', success(res) { if (res.confirm) { updateManager.applyUpdate(); } } }); }); }, globalData: { userInfo: null, apiBaseUrl: 'https://api.example.com' } });

💡技巧：将常用的API地址、用户信息等全局数据放在globalData中，方便各页面访问。

app.wxss - 小程序的化妆间

app.wxss是小程序的全局样式文件，控制整个小程序的外观：

/* 全局样式 */ page { background-color: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* 通用按钮样式 */ .btn-primary { background-color: #4CAF50; color: white; padding: 12rpx 24rpx; border-radius: 8rpx; font-size: 32rpx; } /* 文本样式 */ .text-center { text-align: center; }

📌重点：使用rpx单位可以实现不同屏幕的自适应，1rpx约等于屏幕宽度的1/750。

实战指南：开发你的第一个页面

现在，让我们动手创建一个简单的首页。在pages/index目录下，创建以下文件：

index.wxml(页面结构):

<view class="container"> <view class="search-box"> <input placeholder="输入书名搜索" /> <button class="search-btn">搜索</button> </view> <view class="welcome"> <image src="/images/book.png" class="book-icon" /> <text class="title">豆瓣图书</text> <text class="subtitle">书中自有黄金屋</text> </view> </view>

index.wxss(页面样式):

.container { padding: 20rpx; } .search-box { display: flex; margin-bottom: 40rpx; } .search-box input { flex: 1; border: 1rpx solid #ddd; padding: 15rpx; border-radius: 8rpx 0 0 8rpx; } .search-btn { background-color: #4CAF50; color: white; padding: 0 30rpx; border-radius: 0 8rpx 8rpx 0; } .welcome { display: flex; flex-direction: column; align-items: center; margin-top: 100rpx; } .book-icon { width: 200rpx; height: 200rpx; margin-bottom: 30rpx; } .title { font-size: 40rpx; font-weight: bold; margin-bottom: 10rpx; } .subtitle { color: #666; font-size: 28rpx; }

index.js(页面逻辑):

Page({ data: { // 页面数据 }, onLoad() { // 页面加载时执行 console.log('首页加载完成'); }, // 搜索按钮点击事件 onSearch() { wx.showToast({ title: '搜索功能开发中', icon: 'none' }); } });

⚠️新手避坑点：图片路径要使用绝对路径（以/开头）或正确的相对路径，否则图片无法显示。