You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

137 lines
7.2 KiB

3 months ago
  1. # 移动端 文件列表
  2. ~~~
  3. .
  4. ├── App.vue 文件主入口
  5. ├── api 后台api调用地址
  6. │   ├── activity.js 营销活动api
  7. │   ├── api.js 公共接口api
  8. │   ├── order.js 订单数据api
  9. │   ├── public.js 公共接口api
  10. │   ├── store.js 商品数据api
  11. │   └── user.js 用户信息api
  12. ├── components 组件
  13. │   ├── Loading 加载中
  14. │   ├── addressWindow 地址选择
  15. │   ├── cartList 购物车弹框
  16. │   ├── countDown 倒计时
  17. │   ├── couponListWindow 优惠券列表弹框
  18. │   ├── couponWindow 优惠券弹框 (弃用)
  19. │   ├── d_goodList 分类页模板3商品列表
  20. │   ├── easy-upload 上传图片
  21. │   ├── f_goodList 分类页模板4商品列表
  22. │   ├── goodList 主页和商品搜索页商品列表
  23. │   ├── jyf-parser 商品详情富文本解析器
  24. │   ├── login_mobile 登录
  25. │   ├── mpvue-calendar 日历
  26. │   ├── orderGoods 订单商品
  27. │   ├── payment 支付弹出层
  28. │   ├── productConSwiper 商品详情banner
  29. │   ├── productWindow 商品详情sku弹出层
  30. │   ├── promotionGood 首页宫格商品推荐列表
  31. │   ├── recommend 热门推荐商品
  32. │   ├── shareInfo 资讯详情分享
  33. │   ├── shareRedPackets 商品详情分销气泡
  34. │   ├── skeleton 骨架屏
  35. │   ├── swipers 轮播图
  36. │   ├── userEvaluation 商品评价
  37. │   ├── vconsole.min.js 调试打印工具
  38. │   └── wPicker 选择器
  39. ├── config 配置
  40. │   ├── app.js 请求地址和请求头配置
  41. │   ├── cache.js 缓存信息
  42. │   └── socket.js 套接字
  43. ├── js_sdk JS-SDK
  44. │   └── Sansnn-uQRCode 二维码生成
  45. ├── libs 执行子文件
  46. │   ├── apps.js 授权登录获取token
  47. │   ├── chat.js 聊天通信配置
  48. │   ├── iframe.js 判断是否是isIframe页面
  49. │   ├── login.js 登录
  50. │   ├── order.js 活动商品跳转和预下单
  51. │   ├── routine.js 微信小程序获取信息
  52. │   └── wechat.js 微信公众号获取信息
  53. ├── main.js 项目入口文件
  54. ├── manifest.json 应用配置文件
  55. ├── mixins 混入
  56. │   └── SendVerifyCode.js 验证码
  57. ├── package-lock.json 描述模块的版本信息,模块来源及依赖
  58. ├── pages 页面目录
  59. │   ├── activity 营销活动
  60. │   ├── auth 作者
  61. │   ├── goods_cate 商品分类页
  62. │   ├── goods_details 商品详情页
  63. │   ├── goods_list 商品列表页
  64. │   ├── goods_search 商品搜索页
  65. │   ├── index 首页
  66. │   ├── news_details 资讯详情
  67. │   ├── news_list 资讯列表
  68. │   ├── order_addcart 购物车
  69. │   ├── order_details 订单详情
  70. │   ├── order_pay_status 支付状态页
  71. │   ├── user 个人中心
  72. │   └── users 用户目录
  73. ├── pages.json 页面文件的路径、窗口表现配置文件
  74. ├── plugin 插件
  75. │   ├── animate 动画库
  76. │   ├── chat 聊天插件
  77. │   ├── clipboard 复制插件
  78. │   ├── dayjs 处理时间和日期的库
  79. │   ├── image-tools 图像转换工具
  80. │   └── jweixin-module 公众号H5的JS-SDK
  81. ├── static 静态文件
  82. │   ├── css css样式目录
  83. │   ├── html PC端打开时的html文件
  84. │   ├── iconfont iconfont
  85. │   ├── images 图片资源
  86. │   ├── img 图片资源
  87. │   └── tabBar 底部导航图片
  88. ├── store vuex
  89. │   ├── getters.js store的计算属性
  90. │   ├── index.js store入口文件
  91. │   └── modules store的模块
  92. ├── uni.scss uniapp自带的的scss文件
  93. ├── unpackage 打包后的目录
  94. ├── utils 公共的js模块
  95. │   ├── SubscribeMessage.js 消息通知
  96. │   ├── base64src.js base64
  97. │   ├── cache.js 设置,读取,检测缓存
  98. │   ├── index.js 公共配置文件
  99. │   ├── permission.js 权限
  100. │   ├── request.js api请求方法
  101. │   ├── util.js 工具函数
  102. │   └── validate.js 输入验证,函数防抖
  103. └── vue.config.js 主配置
  104. ~~~
  105. ## 移动端运行 (H5 和 微信小程序)
  106. 下载安装 [Hbuilder](https://www.dcloud.io/)
  107. 导入移动端项目 开源地址中对应的 app 目录
  108. ![](https://gitee.com/xghc/picture/raw/master/img/20211101092846.png)
  109. 移动端访问 api 设置,下图设置包涵App的配置
  110. ![](https://gitee.com/xghc/picture/raw/master/img/20211101093058.png)
  111. 在文件中修改对应java服务的api地址即可
  112. > 注意: 配置文件放在移动端的包外面 是为了方便在调试过程中频繁修改地址域名,根据自己需求可以在 /app/config/app.js 修改
  113. ### **运行H5**
  114. ![](https://gitee.com/xghc/picture/raw/master/img/h5_chrome.jpg)
  115. 第一次使用可能Hbuider要求登录等等,跟着操作即可
  116. H5运行成功
  117. ![](https://gitee.com/xghc/picture/raw/master/img/20211101093546.png)
  118. ### **运行微信小程序**
  119. 需要在清单文件 manifest.json 配置文件中维护已有开发权限的微信小程序appid,这里的appid和webPC管理端配置的微信小程序appid一致
  120. ![](https://gitee.com/xghc/picture/raw/master/img/screenshot_1627954225089.png)
  121. 运行微信小程序到微信小程序开发工具
  122. ![](https://gitee.com/xghc/picture/raw/master/img/screenshot_1627954441599.png)
  123. 运行微信小程序成功
  124. ![](https://gitee.com/xghc/picture/raw/master/img/screenshot_1627954579617.png)
  125. 如果不能自动打开微信开发者工具,记得开启如下端口,如果还不能自动打开,尝试重启软件,或者设备。这里走运行是为了有热更新等方便调试,如果要发布上传代码,点击发行,否则会出现超包提示
  126. ![](https://gitee.com/xghc/picture/raw/master/img/screenshot_1627954636514.png)
  127. # **视频教程列表**
  128. *****
  129. <iframe src="//player.bilibili.com/player.html?aid=417665101&bvid=BV17V411J7kY&cid=326210603&page=1" scrolling="no" border="0" frameborder="no" height=400 width=600 framespacing="0" allowfullscreen="true"> </iframe>