# sawtooth-uni-app-sample **Repository Path**: hlcui/sawtooth-uni-app-sample ## Basic Information - **Project Name**: sawtooth-uni-app-sample - **Description**: 支持小程序、H5、app三端商城架构 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2021-08-28 - **Last Updated**: 2025-05-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # sawtooth-uni-app-sample #### 介绍 支持小程序、H5、app、微信公众号四端商城架构 #### 软件架构 软件架构说明 #### 待集成 1. 图片上传组件封装、下拉上拉刷新组价封装、轮播图封装、搜索组件、列表组件、分类组件、地区组件、日期组件 2. 商城首页装修组件封装 3. 集成mockjs 4. 分享 5. 消息推送 UniPush 6. 统一支付 7. ...... #### 集成文档 1. uView：[https://www.uviewui.com/](https://www.uviewui.com/) 2. colorui：[https://github.com/weilanwl/ColorUI](https://github.com/weilanwl/ColorUI) 3. uni-ui：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55) 4. uni-simple-router 页面路由：[https://hhyang.cn/v2/](https://hhyang.cn/v2/) 5. Painter 生成海报：[http://liangei.gitee.io/limeui-docs/components/painter/](http://liangei.gitee.io/limeui-docs/components/painter/) 6. API集中管理 [https://www.uviewui.com/js/apiManage.html](https://www.uviewui.com/js/apiManage.html) 7. 多语言切换 [https://www.uviewui.com/guide/i18n.html](https://www.uviewui.com/guide/i18n.html) 8. 扩展自定义图标库 [https://www.uviewui.com/guide/customIcon.html](https://www.uviewui.com/guide/customIcon.html) 9. 全局变量的实现方式 [https://www.uviewui.com/guide/globalVariable.html](https://www.uviewui.com/guide/globalVariable.html) 10. 跨端兼容 [https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9](https://uniapp.dcloud.io/platform?id=%e8%b7%a8%e7%ab%af%e5%85%bc%e5%ae%b9) 11. 升级中心 uni-upgrade-center [https://uniapp.dcloud.io/uniCloud/upgrade-center](https://uniapp.dcloud.io/uniCloud/upgrade-center) 12. z-paging 上拉下拉刷新组件 [https://z-paging.com/](https://z-paging.com/) 13. loadsh JavaScript 实用工具库[https://www.lodashjs.com/](https://www.lodashjs.com/) 14. dayjs JavaScript 日期操作工具库[https://dayjs.fenxianglu.cn/](https://dayjs.fenxianglu.cn/) #### 使用说明 1. 升级配置参考文档 [https://blog.csdn.net/qq_42027681/article/details/115827047](https://blog.csdn.net/qq_42027681/article/details/115827047) 2. uni-app导航栏和状态栏配置[https://www.jianshu.com/p/7344c4066e82](https://www.jianshu.com/p/7344c4066e82) 3. easycom组件规范[https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83) #### uni-app踩坑合集 1. uni-app小程序端不支持动态组件 2. #### 目录说明 ``` ├─api // 项目公共API接口 ├─colorui // colorui插件依赖 ├─common // 项目相关公共js方法 │ ├─css // 公共CSS样式 │ ├─locales // 国际化标签js │ ├─classify.data.js // 模拟数据 │ ├─dataTime.js // 自定义日期过滤器 │ ├─filter.js // 常用过滤器封装js │ ├─http.api.js // api接口调用封装类，自动将所有api挂载到vm.$u.api中 │ ├─http.interceptor.js // 数据请求封装 │ └─vue-i18n.min.js // 国际化支持js ├─components // 项目中使用到的功能封装，需满足easycom组件规范 │ ├─code-elf-guide // 广告页 │ ├─js-orderby // 排序组件 │ ├─js-page // 页面封装类，主要控制页面背景色和最小高度 │ ├─l-painter // 生成海报组件 │ ├─redpacket // 红包组件 │ ├─z-paging // 上拉下拉刷新组件 │ ├─z-paging-empty-view // 上拉下拉刷新缺省组件 │ ├─z-paging-swiper // 滑动切换选项卡 │ └─z-paging-swiper-item // 滑动切换选项卡 ├─config // 页面入口文件夹 │ └─config.js // 项目公共配置js ├─decorates // 首页装修组件 ├─packageA // 分包A入口文件夹 │ └─pages │ └─index ├─packageB // 分包B入口文件夹 │ └─pages │ └─index ├─pages // 页面入口文件夹 │ ├─cart // 购物车 │ ├─classify // 分类 │ ├─detail // 商品明细(待完成) │ ├─filter // 过滤器展示DEMO │ ├─guide // 引导页 │ ├─home // 商城装修页 │ ├─index // 主页4个TabBar页面 │ ├─launch // 启动页 │ ├─login // 登录相关 │ │ ├─forget // 忘记密码 │ │ ├─register // 注册 │ │ ├─login // APP和H5登录页 │ │ └─mp-login // 小程序登录页 │ ├─mine // 我的相关 │ │ ├─demo // 引用组件DEMO │ │ ├─setting // 设置页面（待完成） │ │ ├─user // 个人信息 │ │ └─mine // 我的页面 │ ├─painter // 生成海报页 │ ├─search // 搜索页 │ ├─shop // 商城页面 │ └─wxDemo // 微信H5功能DEMP（待完成） ├─static // 静态资源 ├─store // store配置 ├─unpackage // 打包发布目录 ├─utils // 工具类目录 │ ├─auth.js // 微信授权封装 │ ├─common.js // 公共发放js，统一放进对象挂载到vm.$u.func │ ├─jwx.js // 微信SDK封装引用方法 │ └─wx-jssdk.js // 微信SDK ├─uview-ui // uview-ui插件依赖 ├─App.vue // vue项目入口文件 ├─main.js // 公共js ├─manifest.json // uniapp项目配置文件 ├─pages.json // 页面路由配置页 ├─README.md // 说明文档 ├─README.en.md // 英文说明文档 ├─router.js // 路由配置js ├─uni.scss // uniapp内置的常用样式变量 └─vue.config.js // VUE配置JS ``` #### 如何使用uni-app端 #### 一、导入uniapp项目 1. 首先下载HBuilderX(最新版)并安装，地址：https://www.dcloud.io/hbuilderx.html 2. 打开HBuilderX -> 顶部菜单栏 -> 文件 -> 导入 -> 从本地目录导入 -> 选择uniapp端项目目录 3. 找到config/config.js文件，找到里面的baseUrl项，填入已搭建的后端url地址 4. 如果运行小程序，打开manifest.json文件，选择微信小程序配置，填写小程序的appi``` #### 二、本地调试 1. 打开HBuilderX -> 顶部菜单栏 -> 运行 -> 运行到浏览器 2. 打开HBuilderX -> 顶部菜单栏 -> 运行 -> 运行到手机或模拟器 3. 打开HBuilderX -> 顶部菜单栏 -> 运行 -> 运行到小程序模拟器 #### 三、打包发行（H5） 1. 打开HBuilderX -> 顶部菜单栏 -> 发行 -> 网站H5-手机版 2. 打包后的文件路径：/unpackage/dist/build/h5 3. 将打包完成的所有文件 复制到商城后端/pulic目录下，全部替换 #### 四、打包发行（微信小程序） 1. 下载微信开发者工具并安装，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2. 打开HBuilderX -> 顶部菜单栏 -> 发行 -> 小程序-微信 3. 打包后的文件路径：/unpackage/dist/build/mp-weixin 5. 打开微信开发者工具 导入 打包完成的项目 6. 检查没有运行错误，在右上方上传小程序 ##### 五、打包发行（APP） 1. 安卓本地打包指南：[https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android](https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android) 2. IOS本地打包指南：[https://nativesupport.dcloud.net.cn/AppDocs/usesdk/ios](https://nativesupport.dcloud.net.cn/AppDocs/usesdk/ios)