MyLesson 微信小程序前台开发实战（一）

• 在 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 是轻量可靠的移动端组件库，官方提供了微信小程序版本。

1. 安装依赖

   npm install @vant/[email protected] --save
   

2. 配置 NPM 在 project.config.json 中开启 NPM 支持：

   {
     "setting": {
       "packNpmManually": true,
       "packNpmRelationList": [
         {
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./"
         }
       ]
     }
   }
   

3. 构建 点击开发者工具右上角 工具 -> 构建 npm，之后即可引入组件。

E02. 封装通用组件

1. 封装通用工具 util

在 utils/util.js 中集中管理常用方法，如空值判断、日期格式化、随机数生成及 Toast 提示等。

/**
 * 判断非空值
 */
function isNotNull(value) {
  return value !== null && value !== undefined;
}

/**
 * 日期字符串处理：1999-01-02T12:12:12 -> 1999 年 01 月 02 日 12:12
 */
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 地址、状态码、表单验证规则等。

// 环境 IP 地址
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 目录。

1. 创建组件 在项目根目录创建 custom-tab-bar/index 组件，包含 .wxml, .js, .json, .scss。

2. 配置 TabBar 在 app.json 中启用自定义 tabBar：

   {
     "tabBar": {
       "custom": true,
       "list": [
         {"pagePath": "pages/index/index"},
         {"pagePath": "pages/course/course"},
         {"pagePath": "pages/user/user"},
         {"pagePath": "pages/cart/cart"}
       ]
     }
   }
   

3. 同步状态 在每个页面的 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});
    // 更新 steps 数据...
  });
}

注：本文档已清理所有外部引流链接及平台特定标识，保留核心技术实现细节。