跳到主要内容MyLesson 微信小程序前台开发实战(一) | 极客日志JavaScriptWeChatAI大前端
MyLesson 微信小程序前台开发实战(一)
综述由AI生成MyLesson 微信小程序前台开发实战(一)涵盖基础环境搭建、通用工具封装及核心页面实现。内容包含 SCSS 配置、VantWeapp 组件库集成、自定义底部导航栏开发,以及首页、登录注册、课程列表与详情等模块的代码逻辑。重点展示了如何利用 Vant 组件构建 UI,处理用户认证流程,并实现课程数据的分页加载与智能客服交互功能。
栈溢出2 浏览 MyLesson 微信小程序前台开发实战(一)
项目概述
ml-miniapp 是 MyLesson 项目的用户交互载体,作为面向终端用户的核心入口,它基于微信小程序技术生态开发。依托微信平台的高渗透率与轻量化特性,目标用户无需下载独立 App,仅通过微信即可快速访问,极大降低了使用门槛。
项目文件结构
|_ ml-miniapp
|_ custom-tab-bar/*.* # 自定义底部导航栏目录
|_ miniprogram_npm # 小程序专用依赖目录
|_ node_modules # 原始依赖存储目录
|_ pages # 页面开发目录
|_ utils
|_ api.js # 请求工具文件
|_ const.js # 常量工具文件
|_ util.js # 通用工具文件
|_ app.js # 项目入口文件
|_ app.json # 全局配置文件
|_ app.scss # 全局样式文件
|_ package.json # 项目依赖配置
|_ project.config.json # 小程序基础配置
|_ sitemap.json # 搜索收录规则
S01. 基础环境搭建
在开发过程中,个人推荐使用【微信小程序开发工具】作为模拟器,配合 IDEA 进行代码编辑。
微信小程序页面组成
每个页面由四个同名文件组成,例如创建 Apple 页面:
| 文件 | 描述 |
|---|
| Apple.json | 配置当前页面的窗口表现、组件等 |
| Apple.wxml | 页面结构模板,类似 HTML 语法 |
| Apple.wxss | 页面样式定义,基本兼容 CSS |
| Apple.js | 逻辑处理文件,负责生命周期、数据及交互 |
环境配置步骤
-
安装开发者工具
下载并安装微信开发者工具,启动后扫码登录账号。
-
创建项目
新建小程序项目时,建议选项如下:
- 项目名称:ml-miniapp
- 目录:选择空目录,避免中文和特殊符号
- AppID:点击'测试号'直接生成
- 后端服务:不使用云服务
- 模板选择:JS-基础模板
-
模拟器设置
- 机型选择 iPhone 15 Pro Max (100%),显示比例自适应。
- 修改内存限制为 2048M(设置 -> 通用设置 -> 通用)。
- 调试基础库选择当时百分比最高的版本。
- 勾选'不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书',方便开发阶段联调本地接口。
-
IDEA 配置
- 将小程序项目作为顶层项目打开。
- 调整 UTF-8 编码。
- 安装 Wechat mini program support 插件。
- 优化初始代码:删除 index.wxml/wxss 内容,清空 logs 目录,简化 app.js 和 app.json 配置。
E01. 安装基础组件
1. 样式预处理 SCSS
默认 JS 基础模板不支持 SCSS,需手动添加支持并将 .wxss 改为 .scss。
- 在
project.config.json 的 settings 块中添加 "useCompilerPlugins": ["sass"]。
- 将
app.wxss 重命名为 app.scss,并定义全局变量:
$bg-gray: #252a34;
$black: #000000;
$yellow: #f9ed69;
$orange: #f08a5d;
$white: #eaeaea;
$gray: #757171;
$subBlack: #232121;
page {
background-color: $bg-gray;
color: $white;
font-size: 35rpx;
text-align: center;
font-family: 思源黑体,微软雅黑,Consolas, sans-serif;
}
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
2. 前端框架 VantWeapp
Vant 是轻量可靠的移动端组件库,官方提供了微信小程序版本。
- 安装依赖
npm install @vant/[email protected] --save
- 配置 NPM
在
project.config.json 中开启 NPM 支持:
{
"setting": {
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
- 构建
点击开发者工具右上角
工具 -> 构建 npm,之后即可引入组件。
E02. 封装通用组件
1. 封装通用工具 util
在 utils/util.js 中集中管理常用方法,如空值判断、日期格式化、随机数生成及 Toast 提示等。
function isNotNull(value) {
return value !== null && value !== undefined;
}
function datetimeFormat(dateStr) {
if (isNull(dateStr)) return '';
let date = new Date(dateStr);
let toDouble = e => e < 10 ? '0' + e : e;
let yy = toDouble(date.getFullYear());
let mm = toDouble(date.getMonth() + 1);
let dd = toDouble(date.getDate());
let hh = toDouble(date.getHours());
let mi = toDouble(date.getMinutes());
return `${yy}年${mm}月${dd}日 ${hh}:${mi}`;
}
module.exports = { isNotNull, isNull, hasNull, isNotEmpty, isEmpty, hasEmpty, dateFormat, datetimeFormat, randomStr, randomColor, confirm, tab, page, success, error, tip, modal, isLogin };
2. 封装常量工具 const
在 utils/const.js 中集中管理 API 地址、状态码、表单验证规则等。
const HOST = 'localhost';
const GATEWAY_HOST = `http://${HOST}:24101`;
const STATUS = {
SUCCESS: 1000
};
const RULE = {
USERNAME: [{ pattern: /^[a-zA-Z0-9]{4,20}$/, message: '账号必须由 4 到 20 个英文字母或数字组成' }],
PASSWORD: [{ pattern: /^[a-zA-Z0-9]{4,20}$/, message: '密码必须由 4 到 20 个英文字母或数字组成' }],
PHONE: [{ pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '手机号码格式不正确' }]
};
module.exports = { GATEWAY_HOST, STATUS, RULE, MINIO_AVATAR, PROJECT_TITLE, PROVINCE_OPTIONS };
3. 封装请求工具 api
在 utils/api.js 中封装 HTTP 请求,统一处理 Token 携带、响应拦截及错误提示。
import util from './util.js';
import constant from './const.js';
function sendRequest(config) {
let module = config['module'];
let url = config['url'];
if (util.hasNull(module, url)) return;
let method = config['method'] || 'GET';
let params = config['params'];
let header = config['header'] || {'Content-Type': 'application/json', 'token': wx.getStorageSync('token') || null};
url = constant.GATEWAY_HOST + '/' + module + '/api/v1/' + url;
return new Promise((resolve, reject) => {
wx.request({
url: url,
method: method,
data: params,
header: header,
success(res) {
if (res['code'] === constant.STATUS.SUCCESS) {
resolve(util.isNotNull(res.data) ? res.data : true);
} else {
util.error(res['message']);
console.error(res['coderMessage']);
}
},
fail(err) {
reject('请求异常:' + err);
}
});
});
}
module.exports = { get, post, put, del };
E03. 开发底部导航栏
微信小程序支持自定义底部导航栏,需自行创建 custom-tab-bar 目录。
-
创建组件
在项目根目录创建 custom-tab-bar/index 组件,包含 .wxml, .js, .json, .scss。
-
配置 TabBar
在 app.json 中启用自定义 tabBar:
{
"tabBar": {
"custom": true,
"list": [
{"pagePath": "pages/index/index"},
{"pagePath": "pages/course/course"},
{"pagePath": "pages/user/user"},
{"pagePath": "pages/cart/cart"}
]
}
}
-
同步状态
在每个页面的 onLoad 中调用 this.getTabBar().setData({"activeTab": index}) 以高亮对应标签。
S02. 导航栏 - 首页
本模块包含项目首页展示、用户登录(账号/手机)和用户注册。
E01. 项目首页
首页用于展示通知、横幅、公告新闻和秒杀活动,无需登录即可查看。
- 通知栏:滚动播放第 1 条通知。
- 轮播图:展示前 5 条横幅。
- 公告列表:折叠展示前 5 条新闻。
- 整点秒杀:展示今日秒杀活动详情。
<van-sticky class="notice-bar">
<van-notice-bar text="{{currentNotice}}" left-icon="volume-o"/>
</van-sticky>
<view class="banner">
<swiper wx:if="{{banners}}" autoplay="3000">
<swiper-item wx:for="{{banners}}" wx:key="id">
<van-image src="{{MINIO_BANNER}}/{{item['url']}}" width="100%" height="150px" fit="fill"/>
</swiper-item>
</swiper>
</view>
E02. 用户登录
1. 账号登录
采集账号和密码,提交后台验证。成功后保存 Token 和用户信息,跳转回首页。
loginByAccount:function(){
let username = this.data.username;
let password = this.data.password;
if (util.hasEmpty(username, password)) { util.tip('账号或密码不能为空'); return; }
api.post('user','/loginByAccount',{username, password}).then(res=>{
wx.setStorageSync('token', res['token']);
wx.setStorageSync('user', res['user']);
util.success('登录成功');
setTimeout(()=> util.tab('/pages/index/index'), 500);
}).catch(err=> console.error(err));
}
2. 手机登录
输入手机号获取验证码,提交验证码完成登录。测试环境下验证码自动填充。
E03. 用户注册
注册新账号需填写真实姓名、手机号、身份证号等信息。注册成功后跳转至登录页。
S03. 导航栏 - 课程
E01. 课程列表
支持分页加载和关键词搜索。默认显示 12 条,触底加载更多。
page:function(){
let that = this;
let keyword = this.data.keyword;
let pageNum = this.data.pageInfo['pageNum'];
let pageSize = this.data.pageInfo['pageSize'];
let params = {pageNum, pageSize, keyword: keyword.trim()};
api.get('course','/search', params).then(res=>{
that.setData({
'courses': pageNum ===1? res['records']: that.data.courses.concat(res['records']),
'pageInfo.pageNum': res['pageNum'],
'pageInfo.totalPage': res['totalPage']
});
});
}
E02. 课程详情
展示视频预览、课程信息、摘要图片、章节目录及购买操作。
- 视频组件:播放第一章第一集。
- 操作栏:客服、购物车、加入购物车、立即购买。
1. 智能客服
点击客服图标进入聊天页面,支持 SSE 流式接收 AI 回复。
sendMessage:function(){
let that = this;
wx.request({
url: this.data.sseServerUrl + '?msg='+this.data.message,
enableChunked:true
}).onChunkReceived((res)=>{
let str = new TextDecoder('utf-8').decode(res.data,{stream:true});
});
}
注:本文档已清理所有外部引流链接及平台特定标识,保留核心技术实现细节。
相关免费在线工具
- RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
- Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
- 随机西班牙地址生成器
随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online