Files

6.3 KiB
Raw Permalink Blame History

数码喷墨墨水微信小程序项目

项目介绍

本项目是为数码喷墨墨水客户定制开发的微信小程序,用于展示和销售数码喷墨墨水产品,提供在线购物、订单管理、用户中心等功能。

项目结构

├── app.js              # 小程序入口文件
├── app.json            # 小程序全局配置
├── app.wxss            # 小程序全局样式
├── common/             # 公共文件目录
│   ├── main.js         # 主入口文件
│   ├── main.wxss       # 主样式文件
│   ├── runtime.js      # 运行时文件
│   └── vendor.js       # 第三方依赖文件
├── components/         # 自定义组件目录
│   ├── common-payment/ # 公共支付组件
│   ├── diy-components/ # DIY组件
│   ├── hover-nav/      # 悬浮导航组件
│   ├── loading-cover/  # 加载遮罩组件
│   ├── mescroll/       # 滚动加载组件
│   ├── ns-adv/         # 广告组件
│   ├── ns-contact/     # 联系组件
│   ├── ns-copyright/   # 版权组件
│   ├── ns-empty/       # 空状态组件
│   ├── ns-form/        # 表单组件
│   ├── ns-goods-action/# 商品操作组件
│   ├── ns-goods-sku/   # 商品SKU组件
│   ├── ns-loading/     # 加载组件
│   ├── ns-login/       # 登录组件
│   ├── ns-navbar/      # 导航栏组件
│   ├── ns-new-gift/    # 新手礼品组件
│   ├── ns-newform/     # 新表单组件
│   ├── ns-payment/     # 支付组件
│   ├── ns-select-time/ # 时间选择组件
│   ├── ns-switch/      # 开关组件
│   ├── payment/        # 支付相关组件
│   ├── pick-regions/   # 地区选择组件
│   ├── register-reward/# 注册奖励组件
│   └── toTop/          # 返回顶部组件
├── pages/              # 页面目录
│   ├── contact/        # 联系我们页面
│   ├── goods/          # 商品相关页面
│   ├── index/          # 首页
│   ├── member/         # 会员中心
│   └── order/          # 订单相关页面
├── pages_promotion/    # 促销活动页面
├── pages_tool/         # 工具页面
├── project.config.json # 微信开发者工具配置
├── site.js             # 站点配置文件
├── static/             # 静态资源目录
│   └── img/            # 图片资源
└── uni_modules/        #  uni_modules模块

技术栈

  • 开发框架:微信小程序原生开发
  • 组件库:自定义组件 + uni_modules
  • 数据请求微信小程序原生API
  • 状态管理:小程序全局状态

安装和运行

环境要求

  • 微信开发者工具
  • Node.js (可选,用于依赖管理)

安装步骤

  1. 克隆或下载项目到本地
  2. 打开微信开发者工具
  3. 导入项目目录
  4. 配置appid如果需要
  5. 点击编译运行

项目配置

站点配置

site.js文件中配置站点信息:

module.exports={
  baseUrl: "https://xcx.aigc-quickapp.com", // 后台接口地址
  uniacid: 2285 // 站点ID
};

全局配置

app.json文件中配置小程序的全局设置包括页面路径、窗口样式、tabBar等。

主要功能模块

首页

  • 轮播图展示
  • 商品分类导航
  • 热门商品推荐
  • 促销活动展示

商品模块

  • 商品列表展示
  • 商品详情查看
  • 商品SKU选择
  • 商品搜索功能

购物车

  • 商品添加/删除
  • 商品数量调整
  • 购物车结算

订单模块

  • 订单生成
  • 订单列表
  • 订单详情
  • 订单支付
  • 订单售后

会员中心

  • 用户信息管理
  • 收货地址管理
  • 优惠券管理
  • 积分管理
  • 充值功能

联系我们

  • 联系方式展示
  • 在线客服

开发注意事项

  1. 所有接口请求需通过baseUrl配置的后台地址
  2. 组件使用需遵循微信小程序组件规范
  3. 页面跳转需使用微信小程序导航API
  4. 数据缓存需使用微信小程序存储API
  5. 开发过程中需注意小程序的尺寸限制和性能优化

部署说明

  1. 在微信开发者工具中点击"上传"
  2. 填写版本号和更新日志
  3. 登录微信公众平台
  4. 进入版本管理
  5. 提交审核
  6. 审核通过后发布上线

项目发布

使用 release.js 脚本发布

  1. 确保已安装 Node.js 环境
  2. 在项目根目录执行以下命令:
    # 默认清理dist目录除zip文件外并压缩所有文件
    node release.js
    
    # 保留dist目录下的所有内容
    node release.js --keep-dist
    node release.js -k
    
    # 查看帮助信息
    node release.js --help
    node release.js -h
    

命令行选项说明

选项 简写 说明
--keep-dist -k 保留dist目录下的所有内容不进行清理
--help -h 显示帮助信息

生成文件说明

  • 输出目录:项目根目录下的 dist/ 文件夹
  • 主要文件
    • 压缩后的小程序源代码文件
    • 按日期命名的 ZIP 压缩包(格式:数码喷墨墨水-定制化-YYYY-MM-DD-mp-weixin.zip

文件压缩功能

release.js脚本支持对以下文件类型进行压缩优化

  • WXML:移除注释和空白字符
  • JS:移除注释和空白字符,保留中文编码
  • CSS移除注释、空白字符及CSS属性前后空格
  • JSON:移除空白字符,保留中文编码

交付给发布人员的文件格式

  • 交付文件:dist/ 目录下生成的 ZIP 压缩包
  • 文件命名:数码喷墨墨水-定制化-YYYY-MM-DD-mp-weixin.zipYYYY-MM-DD 为当前日期)
  • 交付内容包含完整的小程序源代码已进行WXML、JS、CSS、JSON文件的压缩优化

发布人员可直接使用此 ZIP 压缩包进行小程序上线发布操作。

维护和更新

  • 定期检查后台接口变化
  • 及时更新小程序版本
  • 修复用户反馈的问题
  • 优化用户体验

联系方式

如有问题或建议,请联系技术支持: