当前位置： 首页 > news >正文

微信小程序开发从零基础到项目发布的全流程实战教程（四）

news 2025/10/14 10:04:39

小程序开发实战课程笔记

第一章：项目初始化与纯净环境搭建

在正式进入开发前，我们需要先创建一个干净的小程序项目环境，以便后续教学不受模板或默认配置干扰。

1.1 创建新项目

操作步骤：
  1. 打开 微信开发者工具。
  2. 点击左上角「+」号或「新建项目」按钮。
  3. 配置项目信息：
    • 项目名称：demo002
    • 项目目录：选择本地存储路径
    • AppID：填写自己的小程序 AppID（可使用测试号）
    • 项目类型：选择“小程序”
    • 不使用云服务
    • 不使用模板

✅ 提示：务必勾选“不使用模板”，否则会自动引入 pages/index 和 pages/logs 等默认页面，增加不必要的复杂度。

示例截图描述：
  • 左侧是代码编辑区；
  • 中间是模拟器预览窗口；
  • 右侧是调试控制台和工具面板；
  • 可通过「外观」设置将模拟器移动至左侧或右侧，提升开发体验。

1.2 清理默认文件与依赖

为了构建一个“纯净”的开发环境，我们需要删除所有非必要的文件和配置项。

删除的文件/目录包括：
文件路径说明
/components/组件目录（暂不需要）
/miniprogram_npm/npm 包缓存目录
/unpackage/HBuilderX 相关编译产物（若存在）
/project.config.json 中的部分字段如 "libVersion"、"cloudfunctionRoot" 等
修改 app.json

原始 app.json 内容可能如下：

{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","usingComponents": {}
}

我们需要做以下修改：

  1. 删除 "pages" 数组中的所有页面（保留空数组用于后续添加）。
  2. 删除 "sitemapLocation" 字段（因为我们不使用 sitemap 功能）。
  3. 删除 "usingComponents"（无自定义组件时可删）。
  4. 若存在 "style": "v2" 或 "renderer": "skyline"，建议移除以避免兼容性问题。

✅ 修改后的 app.json：

{"pages": [],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#ffffff","navigationBarTitleText": "小程序示例","navigationBarTextStyle": "black"}
}

⚠️ 注意：JSON 文件末尾不能有多余逗号（trailing comma），否则会导致编译报错。

1.3 切换渲染模式为 webview

微信小程序支持多种渲染引擎，主要包括：

  • webview 模式：传统 WebView 渲染，兼容性强，调试方便。
  • Skyline 模式：新一代高性能渲染引擎，性能更好但仍在灰度测试阶段。

由于 Skyline 模式目前尚不稳定且部分 API 不兼容，我们建议初学者切换回 webview 模式。

如何切换？

打开 project.config.json 文件，查找并删除以下字段：

"renderer": "skyline",
"rendererMode": "webview"

或者确保没有启用 skyline 模式即可。

🔍 补充说明：如果你发现页面顶部出现黑条、字体异常、布局错乱等问题，很可能是误开启了 Skyline 模式所致。

1.4 移除 ESLint 和其他插件

某些项目模板会默认集成 ESLint、Prettier 等代码检查工具。对于新手而言，这些工具容易造成干扰。

处理方式：
  • 删除根目录下的 .eslintrc.js、.prettierrc 等配置文件；
  • 在微信开发者工具中关闭「ESLint 自动修复」功能（设置 → 编辑器 → 脚本校验）；

这样可以避免因格式错误导致的编译中断。

1.5 创建第一个页面

接下来我们手动创建一个最简单的页面来验证环境是否正常。

步骤：
  1. 在 miniprogram/pages/ 下新建文件夹 home；
  2. 在 home 文件夹内创建四个文件：
    • home.wxml
    • home.wxss
    • home.js
    • home.json
home.wxml
<view class="container"><text>这是我的首页</text>
</view>
home.wxss
.container {display: flex;justify-content: center;align-items: center;height: 100vh;font-size: 18px;color: #333;
}
home.js
Page({data: {},onLoad() {console.log("首页加载完成");}
});
home.json
{}
更新 app.json

将 home 页面加入路由栈：

{"pages": ["pages/home/home"]
}

保存后，开发者工具应能正确渲染出文字“这是我的首页”。

第二章：尺寸单位与样式系统详解

微信小程序的样式系统基于 CSS，并在此基础上扩展了一些特有的单位和特性。掌握这些基础知识对后续布局至关重要。

2.1 尺寸单位对比

单位含义是否响应式使用场景
px像素单位❌ 否固定大小元素
rpxresponsive pixel（响应式像素）✅ 是推荐用于移动端适配
rem根元素字体大小倍数✅ 是（需配置）较少使用
%百分比✅ 是宽度、高度占比
rpx 的工作原理

微信小程序规定：

屏幕宽度 = 750rpx

这意味着：

  • iPhone 6/7/8 屏幕宽度为 375px → 对应 750rpx
  • 所以 1rpx ≈ 0.5px
  • 其他设备按比例缩放
示例换算表：
设备物理宽度(px)rpx 总宽1rpx ≈ ? px
iPhone SE (第一代)320px750rpx~0.427px
iPhone 8375px750rpx0.5px
iPhone 14 Pro Max430px750rpx~0.572px
实际应用建议：
  • 文字大小推荐使用 rpx，如 font-size: 32rpx;
  • 边距、边框、圆角等统一用 rpx
  • 图片宽度可用 width: 100%; 或 width: 750rpx; 实现铺满
/* 推荐写法 */
.title {font-size: 36rpx;margin: 20rpx;padding: 30rpx;border-radius: 16rpx;
}

2.2 样式导入与优先级

小程序支持通过 @import 导入外部样式文件。

示例：全局样式管理
  1. 创建 /styles/base.wxss：
/* base.wxss */
.text-primary {color: #07c160;
}.flex-center {display: flex;justify-content: center;align-items: center;
}
  1. 在 home.wxss 中引用：
@import '../../styles/base.wxss';.container {background-color: #f5f5f5;
}
样式优先级规则（由高到低）：
  1. 内联样式（style=""）
  2. 页面 WXSS 文件
  3. 组件 WXSS 文件
  4. App 全局 WXSS 文件
  5. 默认样式（小程序内置）

⚠️ 注意：WXSS 不支持 ID 选择器（如 #id），仅支持 class、标签、属性选择器。

2.3 常见样式问题排查

问题现象可能原因解决方案
样式未生效选择器拼写错误、层级不对检查类名、使用 .class 而非 #id
字体模糊使用了 px 而非 rpx改为 rpx 单位
布局错位Flex 未正确设置检查 display: flex 及主轴方向
图片拉伸未设置 mode 属性设置 <image mode="aspectFit">

第三章：核心组件使用详解

小程序提供了丰富的内置组件，用于构建 UI 界面。本节重点介绍常用组件及其实际应用场景。

3.1 Button 组件

<button> 是最常用的交互控件之一。

基本语法：
<button type="primary">主要按钮</button>
<button type="default">普通按钮</button>
<button type="warn">警告按钮</button>
属性说明：
属性类型说明
typeStringprimary / default / warn
sizeStringdefault / mini
plainBoolean是否镂空
disabledBoolean是否禁用
loadingBoolean显示加载动画
bindtapEventHandle点击事件
示例：带图标的按钮
<button type="primary" plain bindtap="onShare" loading="{{isLoading}}"><text class="icon-share"></text> 分享给好友
</button>

Page({data: {isLoading: false},onShare() {this.setData({ isLoading: true });wx.showModal({title: '提示',content: '正在分享...',showCancel: false,complete: () => {this.setData({ isLoading: false });}});}
});

💡 技巧：可通过 ::after 伪元素添加图标，或结合 Iconfont 使用矢量图标。

3.2 Swiper 轮播图组件

<swiper> 组件常用于实现首页轮播广告图。

基本结构：
<swiper autoplay="{{true}}" interval="3000" duration="500" circular="{{true}}"indicator-dots="{{true}}"indicator-color="#ccc"indicator-active-color="#fff"><block wx:for="{{banners}}" wx:key="id"><swiper-item><image src="{{item.url}}" mode="aspectFill" style="width:100%;height:300rpx;" /></swiper-item></block></swiper>
关键属性解析：
属性说明
autoplay是否自动播放
interval自动切换时间间隔（毫秒）
duration滑动动画时长
circular是否可循环滑动
indicator-dots是否显示面板指示点
indicator-color指示点颜色
indicator-active-color当前激活指示点颜色
JS 数据准备：
Page({data: {banners: [{ id: 1, url: 'https://example.com/banner1.jpg' },{ id: 2, url: 'https://example.com/banner2.jpg' },{ id: 3, url: 'https://example.com/banner3.jpg' }]}
});
自定义指示器样式（高级用法）

若需要更美观的指示器，可隐藏原生 dots 并自行绘制：

<swiper bindchange="onSwiperChange" ... ><!-- 轮播内容 -->
</swiper><!-- 自定义指示器 -->
<view class="indicator"><block wx:for="{{banners.length}}" wx:key="index"><view class="dot {{index === activeIndex ? 'active' : ''}}"></view></block>
</view>

onSwiperChange(e) {this.setData({activeIndex: e.detail.current});
}

.indicator {display: flex;justify-content: center;margin-top: -30rpx;z-index: 999;
}.dot {width: 16rpx;height: 16rpx;background: rgba(255,255,255,0.5);border-radius: 50%;margin: 0 10rpx;
}.dot.active {background: #fff;transform: scale(1.2);
}

3.3 View、Text、Image 等基础组件

组件用途
<view>相当于 div，块级容器
<text>文本节点，支持长按复制
<image>图片展示，支持懒加载
<icon>小图标（success, info, warn, waiting）
image 组件注意事项：
  • 必须指定宽高，否则不显示；
  • mode 属性决定裁剪方式，常用值：
    • scaleToFill: 拉伸填充
    • aspectFit: 保持纵横比缩放
    • aspectFill: 保持纵横比裁剪
    • widthFix: 宽度固定，高度自适应
<image src="/images/logo.png" mode="widthFix" style="width:200rpx;" />

第四章：Flex 布局详解（必学！）

Flex 布局是小程序中最主流的布局方式，几乎所有的页面都依赖它来实现响应式排列。

4.1 Flex 基础概念

Flex 是 Flexible Box 的简称，即弹性盒子模型。它允许子元素在父容器中动态分配空间。

主要术语：
  • 主轴（main axis）：元素排列的方向
  • 交叉轴（cross axis）：垂直于主轴的方向
  • flex container（弹性容器）
  • flex item（弹性项目）

4.2 容器属性（父元素设置）

.container {display: flex;/* 主轴方向 */flex-direction: row | row-reverse | column | column-reverse;/* 换行 */flex-wrap: nowrap | wrap | wrap-reverse;/* 主轴对齐 */justify-content: flex-start | flex-end | center | space-between | space-around;/* 交叉轴对齐 */align-items: stretch | flex-start | flex-end | center | baseline;/* 多行对齐（多轴） */align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
实战案例：九宫格布局
<view class="grid-container"><view class="grid-item" wx:for="{{9}}" wx:key="index">Item {{index + 1}}</view>
</view>

.grid-container {display: flex;flex-wrap: wrap;padding: 20rpx;
}.grid-item {width: calc((750rpx - 60rpx) / 3); /* 三列，每列减去间距 */height: 200rpx;background: #07c160;color: white;text-align: center;line-height: 200rpx;margin: 0 10rpx 20rpx;border-radius: 12rpx;
}

✅ 效果：每行三个格子，共三行，形成经典的“手风琴”式布局。

4.3 项目属性（子元素设置）

属性作用
flex-grow放大比例（默认0）
flex-shrink缩小比例（默认1）
flex-basis初始大小
align-self单独调整某个项目的对齐方式
示例：左右布局（左侧固定，右侧自适应）
<view class="flex-layout"><view class="left">左侧菜单</view><view class="right">主要内容区域</view>
</view>

.flex-layout {display: flex;height: 100vh;
}.left {width: 200rpx;background: #f0f0f0;
}.right {flex: 1; /* 占据剩余空间 */background: #fff;padding: 20rpx;
}

第五章：首页综合案例开发

我们现在来动手做一个完整的首页布局，整合前面所学的知识点。

5.1 页面结构设计

首页包含以下几个模块：

  1. 轮播图（Swiper）
  2. 提示栏（Notice Bar）
  3. 功能入口网格（Grid）
  4. 新闻通知区（Flex 布局）
  5. 底部 TabBar（后期接入）

5.2 轮播图 + 提示栏

<!-- 轮播图 -->
<swiper autoplay interval="3000" duration="500" circular indicator-dots><swiper-item><image src="/imgs/banner1.jpg" mode="aspectFill" style="width:100%;height:300rpx;" /></swiper-item><swiper-item><image src="/imgs/banner2.jpg" mode="aspectFill" style="width:100%;height:300rpx;" /></swiper-item>
</swiper><!-- 提示栏 -->
<view class="notice-bar"><icon type="info" size="16" color="#ff7900" /><text>系统维护通知：今晚23:00至凌晨2:00暂停服务。</text>
</view>

.notice-bar {display: flex;align-items: center;background: #fdf6ec;color: #e6a23c;font-size: 28rpx;padding: 16rpx 20rpx;margin: 20rpx;border-radius: 8rpx;
}

5.3 功能入口网格（手风琴布局）

<view class="grid-section"><view class="grid-title">常用功能</view><view class="grid-wrapper"><block wx:for="{{gridItems}}" wx:key="id"><view class="grid-cell" bindtap="onGridClick" data-id="{{item.id}}"><image src="{{item.icon}}" mode="widthFix" /><text>{{item.name}}</text></view></block></view>
</view>

data: {gridItems: [{ id: 1, name: '扫码', icon: '/icons/scan.png' },{ id: 2, name: '付款', icon: '/icons/pay.png' },{ id: 3, name: '收款', icon: '/icons/receive.png' },{ id: 4, name: '卡包', icon: '/icons/card.png' },{ id: 5, name: '出行', icon: '/icons/travel.png' },{ id: 6, name: '健康码', icon: '/icons/health.png' },{ id: 7, name: '发票', icon: '/icons/invoice.png' },{ id: 8, name: '翻译', icon: '/icons/translate.png' }]
},
onGridClick(e) {const id = e.currentTarget.dataset.id;wx.showToast({ title: `点击了第${id}个功能` });
}

.grid-section {padding: 0 20rpx;
}.grid-title {font-size: 32rpx;font-weight: bold;margin: 30rpx 0 20rpx;
}.grid-wrapper {display: flex;flex-wrap: wrap;
}.grid-cell {width: calc((750rpx - 60rpx) / 4);display: flex;flex-direction: column;align-items: center;margin-bottom: 40rpx;
}.grid-cell image {width: 80rpx;margin-bottom: 10rpx;
}.grid-cell text {font-size: 26rpx;color: #333;
}

5.4 通知区域（Flex 布局）

<view class="news-section"><view class="section-header"><text class="title">最新通知</text><text class="more">查看更多 ></text></view><view class="news-list"><view class="news-item" wx:for="{{newsList}}" wx:key="index"><text class="dot"></text><text class="content">{{item.title}}</text><text class="time">{{item.time}}</text></view></view>
</view>

.news-section {padding: 0 20rpx;margin-top: 30rpx;
}.section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;
}.section-header .title {font-size: 32rpx;font-weight: bold;
}.section-header .more {font-size: 28rpx;color: #999;
}.news-item {display: flex;align-items: center;margin-bottom: 16rpx;font-size: 28rpx;color: #555;
}.news-item .dot {width: 12rpx;height: 12rpx;background: #07c160;border-radius: 50%;margin-right: 16rpx;
}.news-item .time {margin-left: auto;font-size: 24rpx;color: #aaa;
}

第六章：引入图标库（Iconfont）

小程序本身提供的图标有限，我们通常使用阿里巴巴的 Iconfont 来引入更多矢量图标。

6.1 使用流程

  1. 访问 iconfont.cn
  2. 搜索所需图标（如“扫一扫”、“支付”）
  3. 添加至项目并下载为字体文件
  4. 解压后上传至小程序 /fonts/ 目录
  5. 引入字体文件

6.2 引入字体

/* app.wxss 或页面 wxss */
@font-face {font-family: 'iconfont';src: url('/fonts/iconfont.ttf') format('truetype');
}.iconfont {font-family: 'iconfont' !important;font-size: 16px;font-style: normal;
}

6.3 使用图标

<text class="iconfont">&#xe601;</text>

获取 Unicode 编码可在 iconfont 下载包中的 demo_unicode.html 查看。

第七章：事件绑定与数据通信

7.1 常见事件类型

事件触发条件
bindtap手指触摸后抬起
bindinput输入框内容变化
bindchange状态改变（如 checkbox）
bindscroll滚动触发

7.2 数据双向绑定（MVVM）

虽然小程序不是 Vue，但也实现了类似的数据驱动机制。

<input bindinput="onInput" value="{{username}}" />
<text>你好，{{username}}！</text>

Page({data: { username: '' },onInput(e) {this.setData({ username: e.detail.value });}
});

第八章：页面跳转与路由管理

8.1 跳转方式

方法说明
wx.navigateTo打开新页面（可返回）
wx.redirectTo替换当前页面
wx.switchTab跳转 tabBar 页面
wx.reLaunch关闭所有页面，打开目标页

8.2 示例：跳转详情页

goDetail() {wx.navigateTo({url: '/pages/detail/detail?id=123&name=商品A'});
}

在目标页面获取参数：

Page({onLoad(options) {console.log(options.id); // 123console.log(options.name); // 商品A}
});

第九章：WXML 语法与数据渲染

WXML 类似于 Vue 的模板语法，支持数据绑定、列表渲染、条件渲染。

9.1 列表渲染 wx:for

<view wx:for="{{list}}" wx:key="id">{{index + 1}}. {{item.name}}
</view>

9.2 条件渲染 wx:if

<view wx:if="{{showTips}}">显示提示</view>
<view wx:elif="{{loading}}">加载中...</view>
<view wx:else>无数据</view>

第十章：发送网络请求

调用后台接口获取数据是小程序的核心能力。

10.1 发起 GET 请求

wx.request({url: 'https://api.example.com/data',method: 'GET',success(res) {console.log(res.data);this.setData({ list: res.data });},fail(err) {wx.showToast({ title: '请求失败', icon: 'none' });}
});

10.2 封装请求工具

// utils/request.js
function request(url, options = {}) {return new Promise((resolve, reject) => {wx.request({url,...options,success: resolve,fail: reject});});
}module.exports = { request };

结语

覆盖了微信小程序开发的基础与核心技能。通过本篇文档的学习，你应该已经掌握了：

  • 项目初始化与环境清理
  • rpx 与样式系统
  • Flex 布局实战
  • 常用组件使用
  • 页面结构搭建
  • 图标引入
  • 事件处理
  • 页面跳转
  • WXML 模板语法
  • 网络请求

下一步建议：

  • 动手复现本案例
  • 尝试接入真实后端 API
  • 学习云开发或 Taro 框架进阶
http://www.dtcms.com/a/460949.html

相关文章：

  • wordpress 全站静态二次开发小程序
  • linux命令--后端项目部署
  • 网页版云手机 梦幻西游手游
  • HTML5 与 HTTPS，页面能力、必要性、常见问题与实战排查
  • 网站检索功能怎么做建设宣传网站的必要性
  • 做网站维护需要懂什么网站建设洽谈问题
  • 17、Linux 文件压缩与解压
  • IDEA编译时报错OOM的解决方案
  • .NET驾驭Word之力：基于规则自动生成及排版Word文档
  • 本地web测试服务器快速域名映射工具
  • 自己搭建远程桌面服务器——私有化部署RustDesk
  • 机器人强化学习原理讲解二：关于机器人重置
  • 目标检测YOLO实战应用案例100讲-相机 ISP（三）
  • 网站无障碍建设标准we建站
  • Linux系统为普通用户设置sudo权限
  • 网络流量分析工具
  • 网站基站的建设网站建设学习哪家专业
  • 【渗透测试】ARP是什么？有什么作用？
  • JavaEE 初阶第二十八期：HTTP协议深度揭秘(二)
  • 【Linux命令从入门到精通系列指南】source 命令详解：在当前 Shell 中执行脚本的终极指南
  • 深入理解 OKHttp：设计模式、核心机制与架构优势
  • 电压互感器在电网中接线方式决定了一次消谐器如何安装
  • HAMi 2.7.0 发布：全面拓展异构芯片支持，优化GPU资源调度与智能管理
  • Linux中延迟相关函数的实现
  • 企业制作网站一般多少钱如何选择网站关键词
  • 记录一下Unity的BUG，Trial Version
  • 【bug日记】python找不到包
  • 23大数据 数据挖掘复习1
  • 微信小程序反编译教程
  • 使用AWS IAM和Python自动化权限策略分析与导出