1，UniApp前端代码简介

1.1 前端框架

使用SVN工具下拉项目标准版文档：

SVN地址：:https://data-beta/svn/20210421MagicShop.Net/

GIT地址：https://gitcode.com/MagicShop/MagicShop.Net.git

前端为uniapp框架开发，包含了vue版本及nuve版本代码。

├─activity
│  ├─groupBuying
│  │  ├─groupBuyingDetails 
│  │  │      groupBuyingDetails.vue //团购详情
│  │  └─list
│  │          list.vue //团购列表
│  ├─pinTuan
│  │  ├─list
│  │  │      list.vue //拼团列表
│  │  └─pinTuanDetails
│  │          pinTuanDetails.vue //拼团详情
│  │          
│  ├─seckill
│  │  ├─list
│  │  │      list.vue //秒杀列表
│  │  └─seckillDetails
│  │          seckillDetails.vue //秒杀详情
│  └─solitaire
│      ├─list
│      │      list.vue //接龙列表
│      └─solitaireDetails
│              solitaireDetails.vue //接龙详情
├─article
│  ├─details
│  │      details.vue //文章详情
│  └─list
│          list.vue //文章列表
├─category
│  ├─index
│  │      index.vue //商品分类首页
│  └─list
│          list.vue //商品分类列表页
├─coupon
│      coupon.vue //优惠券
├─form
│  └─details
│          details.vue //自定义表单
├─goods
│  ├─goodComments
│  │      goodComments.vue  // 商品评价 
│  └─goodDetails
│          goodDetails.vue //商品详情
├─index
│  ├─cart
│  │      cart.vue //购物车
│  ├─custom
│  │      custom.vue //自定义首页
│  ├─default
│  │      default.vue // 首页
│  └─member
│          member.vue //个人中心
├─login
│  └─loginBySMS
│          loginBySMS.vue //手机+短信登录
├─map
│      map.vue //地图功能示例
├─member
│  ├─address
│  │  ├─index
│  │  │      index.vue //我的地址添加/编辑
│  │  └─list
│  │          list.vue //我的地址列表
│  ├─afterSales
│  │  ├─detail
│  │  │      detail.vue //我的售后详情
│  │  ├─list
│  │  │      list.vue //我的售后列表
│  │  └─submit
│  │          submit.vue //发起售后
│  ├─agent
│  │  ├─agreement
│  │  │      agreement.vue //代理申请说明
│  │  ├─apply
│  │  │      apply.vue //代理申请表单
│  │  ├─applyState
│  │  │      applyState.vue //代理申请状态
│  │  ├─commissionDetails
│  │  │      commissionDetails.vue //佣金明细
│  │  ├─index
│  │  │      index.vue //代理检测跳转页
│  │  ├─myStore
│  │  │      myStore.vue //我的商铺
│  │  ├─order
│  │  │      order.vue //我的代理订单
│  │  ├─panel
│  │  │      panel.vue //代理管理面板
│  │  ├─rankings
│  │  │      rankings.vue //代理排名
│  │  ├─shareLog
│  │  │      shareLog.vue //代理分享记录
│  │  ├─storeSetting
│  │  │      storeSetting.vue //代理设置
│  │  └─team
│  │          team.vue //代理团队
│  ├─balance
│  │  ├─addBankCard
│  │  │      addBankCard.vue //添加/编辑银行卡
│  │  ├─bankcard
│  │  │      bankcard.vue //银行卡列表
│  │  ├─cashlist
│  │  │      cashlist.vue //我的资金流动列表
│  │  ├─details
│  │  │      details.vue //我的资金流动明细
│  │  ├─index
│  │  │      index.vue //我的资金首页
│  │  ├─recharge
│  │  │      recharge.vue //用户在线充值
│  │  └─withdrawCash
│  │          withdrawCash.vue //余额提现
│  ├─collection
│  │      index.vue //我的收藏商品
│  ├─coupon
│  │      index.vue //我的优惠券
│  ├─distribution
│  │  ├─agreement
│  │  │      agreement.vue  //分销申请说明
│  │  ├─apply
│  │  │      apply.vue  //分销申请
│  │  ├─applyState
│  │  │      applyState.vue //分销申请状态
│  │  ├─commissionDetails
│  │  │      commissionDetails.vue //佣金明细
│  │  ├─index
│  │  │      index.vue //我的分销商首页
│  │  ├─myStore
│  │  │      myStore.vue //我的分销店铺
│  │  ├─order
│  │  │      order.vue //我的分销订单
│  │  ├─panel
│  │  │      panel.vue //分销总面板
│  │  ├─rankings
│  │  │      rankings.vue //分销商排行
│  │  ├─shareLog
│  │  │      shareLog.vue //我的分销推广记录
│  │  ├─storeSetting
│  │  │      storeSetting.vue //分销商店铺设置
│  │  └─team
│  │          team.vue //我的分销团队
│  ├─history
│  │      index.vue //我的足迹
│  ├─integral
│  │      index.vue //我的积分
│  ├─invite
│  │      index.vue //我的推广海报
│  │      list.vue //我的推广人员列表
│  ├─invoice
│  │      index.vue //我的发票
│  ├─merchant //商家中心
│  │  ├─detail
│  │  │      detail.vue //订单详情
│  │  ├─index
│  │  │      index.vue //商家中心首页
│  │  ├─search
│  │  │      index.vue //订单查询
│  │  ├─serviceVerification
│  │  │      index.vue //服务码核销
│  │  │      list.vue //服务码核销列表
│  │  ├─storeList
│  │  │      storeList.vue //门店列表
│  │  └─takeDelivery
│  │          index.vue //提货单核销
│  │          list.vue //提货单列表
│  ├─order
│  │  ├─detail
│  │  │      detail.vue //订单详情
│  │  ├─evaluate
│  │  │      evaluate.vue //订单评价
│  │  ├─expressDelivery
│  │  │      expressDelivery.vue //订单物流信息
│  │  ├─index
│  │  │      index.vue //订单列表
│  │  └─invitationGroup
│  │          invitationGroup.vue //邀请拼单（拼团用）
│  ├─serviceOrder
│  │  ├─details
│  │  │      details.vue //服务订单详情
│  │  └─index
│  │          index.vue //服务订单列表
│  └─setting
│      ├─index
│      │      index.vue //设置
│      ├─subscription
│      │      index.vue //小程序订阅（此功能已经取消）
│      └─userInfo
│              index.vue //修改用户个人信息
│              password.vue //修改用户个人密码
├─payment //支付
│  ├─pay
│  │      pay.vue //支付发起页面
│  ├─result
│  │      result.vue //支付结果页面
│  └─waiting
│          waiting.vue //支付跳转检测页面
├─placeOrder //下单
│  ├─index
│  │      index.vue  //提交订单页面
│  ├─invoice
│  │      invoice.vue //发票设置
│  └─storeList
│          storeList.vue //门店选择
├─reward
│      reward.vue //打赏功能 （暂未用）
├─search
│      search.vue //商品查询
├─serviceGoods
│  ├─details
│  │      details.vue //服务订单详情
│  └─index
│          index.vue //服务订单列表
├─share
│  ├─jump
│  │      jump.vue //二维码扫码后跳转处理页面
│  │      
│  └─sharePoster
│          sharePoster.vue //海报分享页面
└─storeMap
        storeMap.vue //门店列表

1.2 部署供前端开发的API接口项目

Git/SVN下部署最新的MagicShop源代码，并部署【webapi接口端】获取到访问地址。

管理端：https://pro.magicshop.top

API接口端：https://api.magicshop.top （Swagger可视化API接口开发）

上传静态文件，因为小程序有分包大小限制，容量有效，太多的图片素材无法只能在项目中并存，占用空间超出分包大小，故存放互联网。大家可以用云存储，或直接提供官方提供的cdn地址：

https://items.xdjpro.com

1. 如果使用官方地址则不需要上传此附件包。

2. 如果使用自己的静态资源地址，则需要将【MagicShop.Net.Uni-App】项目【resource】目录下【static】文件夹整包上传都互联网存储并获取地址。

1.3 HbuilderX编译工具

###

1.3.1 下载hbuilderX及安装插件

首先前往https://www.dcloud.io/hbuilderx.html下载最新Hbuilderx的App开发版。

下载后解压运行。然后安装插件

确保常用插件都已经安装，如果没有的，点击【安装新插件】

如果程序编译的时候提示还有插件未安装，但是面板里面没有，就点击【前往插件市场安装】

1.3.2 下载安装微信开发者工具

到微信小程序开发平台下载最新版本的微信开发者工具并按照相关步骤安装：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.3.3 配置项目信息

我们打开HBuilderX 工具，点击左上角的【文件】【打开目录】，定位到代码【MagicShop.Net.Uni-App】项目下【MagicShop】目录；

左侧双击打开【MagicShop】目录中的【manifest.json】文件，点击【基础设置】，修改对应打包后app的名称和介绍

点击【App模块配置】，设置微信小程序申请的appid，并勾选相应的选项

打开目录下【common/setting/constVarsHelper.js】路径的文件。

【apiFilesUrl】项目静态资源请求地址，原则上可以直接使用官方地址；

项目静态资源目录位于此处。可使用官网的地址，也可以自己将附件保存到一个地址。

1. 修改第6行，第8行，设置【WebApi接口端】请求地址，附件资源请求地址。

2. 打开【MagicShop】目录下【uni.scss】文件

修改第97行，设置css内访问附件请求的变量地址，原则上可以直接使用官方地址：https://items.xdjpro.com。

1.4 发布微信小程序

1.4.1 配置调用端口

HBuilderX工具调用微信开发者工具，是走的api调用。所以我们需要开启端口。

打开【微信开发者工具】【通用设置】，在弹出的页面中，选择【安全】，将【服务端口】的选项开启即可；

1.4.2 编译发布过程

点击HBuilderX 工具栏上的【运行】【运行到小程序模拟器】【微信开发者工具-MagicShop】进行本地预览。

····

如果出现有异常的情况，请尝试降低一个版本的基础库

调试模式下小程序内容是未经过打包压缩的，所以只适合开发和调试，不能直接上传，因为大小也有限制。

预览正常后，我们关闭微信开发者工具，再点击HBuilderX 工具栏上的【发行】【小程序-微信(仅适用于uni-app)】生成编译压缩后后的微信小程序版本

在弹出的面板中，我们需要输入小程序的名称，以及小程序appid，如果已经配置，则默认这两项会自动获取到

生成成功后会自动打开微信开发者工具并再次进入开发界面，这次我们可以点击【微信开发者工具】【上传】按钮将代码提交微信审核。

1.4.3 提交测试版和审核上架

提交成功后，前往微信公众号平台【https://mp.weixin.qq.com/】提交审核即可。

如果提交审核的时候要留你录入设置订单中心页path请填写：/pages/member/order/index/index

1.4.4 注意事项

【微信开发者工具】设置下基础版本库，确保最低基础版本库为使用比例比较高的版本就可以了，防止微信小程序发布新版本更新后，启动代码中添加的【自动更新检测并下载小程序新版功能】失效问题。

为了防止编辑uni-app后git总是提示有新文件变更的情况。可打开源代码项目下.gitignore文件，最底部追加一下忽略文件目录。也可以手动在git变动中直接右键文件忽略。

【node_modules/】【.project】【unpackage/】【.DS_Store】

请注意配置文件内微信id和小程序id等配置文件信息和自己的对应，防止出现编译后HbuilerX编译后，无法调用微信小程序开发者工具自动创建项目并打开。

1.5 微信小程序代码分包

微信小程序或其他小程序，小程序在加载后就会默认获取编译后的代码到手机本地，如果程序的包太大，就会处于一直缓慢的下载中。所以微信等开发商将程序代码分为主要和子包，

主包最大支持2M，子包支持最大2M，但是子包支持多个。好像最大是40M，也就是19个子包。如果我们主包经过压缩后占用空间还是太大的情况下，我们需要将一定的业务逻辑代码进行迁移到子包。

我们使用的uniapp的编码。所以我们只演示uniapp的操作。首先我们打开uniapp代码的pages.json文件。

然后我们找到subpackages节点

这是一个数组，我们直接增加子包即可。

这样就实现了分包了。

然后我们要进行预加载。也就是什么时候可以加载子包。

我们找到preloadRule代码行

然后我们测试下

我们发现开发调试环境下，分包就成功了。

正式版只需要点击发布微信小程序即可。

1.6 APP打包与发布

第一次打包，先设置标识与平台匹配

生成标识后，到Dcloud生成云端证书：https://dev.dcloud.net.cn/

如果需要，请再配置平台信息

如果需要，请配置一键登录信息

打包前配置应用名称，可以使用中文，如果使用项目名称，需要使用大驼峰规则命名。

打包时包名称标准：com.MagicShop.App

com.项目名称.App

等待打包完成，在unpackage中找到打包文件，即可安装测试。

2，微信小程序开发配置

当需要将MagicShop部署到微信小程序端的时候，我们需要项目与微信小程序进行对接，那么我们就需要获取到相应的内容及设置接口的授权。微信小程序必须满足几个个条件，不然很多功能无法实现。

1. 微信小程序必须是非个人号，企业号最适合。

2. 已经进行实名认证。

3. 已经开通微信支付及绑定。

我们将从以下几点来指导大家如何进行小程序参数获取及配置：

1. 获取微信小程序参数

2. 服务器接口授权配置

3. 消息推送

4. 微信小程序客服功能

5. 订阅消息

6. 微信支付参数获取

2.1 获取微信小程序参数

系统对接，实现微信小程序的功能，需要用到微信小程序的一些交互核验授权数据，主要为appid，appsecret，只有使用这密钥，才能实现程序与微信小程序服务之间的正常交互。

对接到商城系统，需要获取如下几个数据。

1. AppID(小程序ID)

2. AppSecret(小程序密钥)

2.2 服务器域名配置

微信与自定义开发的程序进行数据的交互中，安全很重要，【服务器域名】的设置，就是来确保当前微信小程序允许哪些域名下的数据能进行交互。

服务器接口授权配置

首先我们登录微信小程序管理平台，点击左侧的【开发】【开发管理】，然后推动界面到【服务器域名】

downloadFile合法域名里面还要添加：

https://thirdws.qlogo.cn

https://at.alicdn.com

request合法域名还需要添加：

https://apis.map.qq.com

https://at.alicdn.com

添加完成之后，如果是在微信开发者工具内，我们可以通过刷新获取最新的域名配置。

如果需要将微信小程序的一些事件，操作，反馈，响应等传递到后端交互，则需要配置【服务器域名】，微信小程序客服也是通过此交互实现。

2.3 消息推送

首先我们登录微信小程序管理平台，点击左侧的【开发】【开发管理】，然后推动界面到【消息推送】

代码对应

注意事项：

1、先将接口配置文件appsettings.json配置好，并上传到服务器站点内。

2、修改配置文件后，一定要重启iis或者程序池。不然配置文件不生效。

3、最后去微信小程序管理平台设置对接信息。

2.4 微信小程序客服功能

要使用在线客服功能，请先完成【消息推送】的配置。

首先我们登录微信小程序管理平台，点击左侧的【功能】【客服】，然后点击开通，并添加客服人员的微信。

2.5 订阅消息

订阅消息的功能，是用于给客户发送微信的消息提醒。微信小程序的消息模板与微信公众号不同，微信公众号为非主动订阅，可以在用户交互的72小时内主动发送。而微信小程序采取的是用户订阅模式，需要业务场景主动发起要求客户订阅，客户订阅后，可以发送一次消息推送，仅一次，也就是订阅一次，消费一次。

首先我们进入微信小程序管理平台，点击左侧的【功能】【订阅消息】

默认情况下，消息模板是未开通状态，需要主动申请开通，开通之后如以下界面。

我们点击选用来查询需要的模板。

现在，我们打开管理后台。根据需求选择合适的消息模板。

进入MagicShop后台管理端，找到左侧的【商城设置】【消息配置】【小程序订阅消息】

我们看到不同的消息类型，已经预制了不同规格的表格需要填写。比如【下单通知】，我们看到有6个表格，除了第一个是我们申请消息模板后的序列号，其他的为内容字段。

我们在微信小程序消息模板库中，查找有类似字段的模板。

提交之后，会进入审核状态，原则上，提交基本上就能马上审核通过，然后在我的模板中，就能看到，我们点击详情。

录入后点击提交数据。既完成了消息模板的配置。

2.6 微信支付配置

微信支付由公司统一申请支付接口，并配置后端支付参数与支付证书

2.7 小程序隐私政策参考模板

小程序的上线发布也需要进行调整，我们要详细地说明用户在使用小程序中，小程序会收集、处理和使用哪些用户的信息。

1、登录腾讯平台的小程序后台，点击设置栏目。

2、选择用户隐私保护指引设置功能，点击更新。（必须要更新，不能继续使用标准化的隐私保护说明，否则审核不过）

3、不要自主增加勾选小程序会涉及到的类型。

4、点击保存或下一步后，按照以下模板录入信息。

5、参考模板：

根据法律规定，开发者仅处理实现小程序功能所必要的信息。

为了（**减少用户复杂的上传头像，录入昵称的操作），开发者将在获取你的明示同意后，收集你的微信昵称、头像。**

为了（**计算商家与用户距离，方便用户下单后，商家进行配送，同时也方便用户获取到与商家之间的距离。），开发者将在获取你的明示同意后，收集你的位置信息。**

为了（**实现用户一键注册会员，确保登录信息的真实性及不被伪造，减少用户繁琐的账号密码登录操作），开发者将在获取你的明示同意后，收集你的手机号。**

为了（**保证下载图片功能正常使用，保障用户能直接保存商品图片，商品详情图片，并可以上传头像，对订单进行上传图片评价），开发者将在获取你的明示同意后，使用你的相册（仅写入）权限。**

开发者收集你的发票信息，用于（给**下单用户开具电子发票或者普通纸质发票）。**

开发者收集你的地址，用于（**下单时减少收货地址的填写，减少复杂的地址输入）。**

开发者收集你的身份证号码，用于（遵循国家的政策，实现账号的实名制，确保登录信息的真实性，如果发生用户提交了非法信息可进行溯源，方便公安及司法机关用于侦查。）。

开发者收集（你的 收款账号（银行卡等）），用于（**用户对自己的余额和佣金进行提现申请操作，由后台打款给用户）。**

开发者（收集你的邮箱），用于（**将系统的重要通知，如系统更新内容，最新的隐私政策等发送给您，发送必要的重要信息通知）。**

开发者（收集你的设备信息），用于（获取您使用我们小程序的运行信息，获取bug，异常日志，运行记录等，方便我们优化小程序系统）。

注：以上内容仅供参考，各类不同的小程序开发和运营者，需要根据实际使用情况，进行如实填写。

2.8 设置腾讯地图api

需要设置腾讯地图和高德地图的API，否则添加地址等需要地图定位的地方会出现空白。

1、首先我们前往腾讯地图api网站申请一个key密钥 https://lbs.qq.com/

2、填写对应需要的内容，注意域名白名单里面，不要填写域名，留空。

3、给 key你分配配额，前往配额管理，账户额度，给刚添加的key配置配额

不设置配额，会出现以下情况。

3、在微信小程序后台【开发管理】【开发设置】【服务器域名】添加request的域名：【https://apis.map.qq.com】

4、前往核心商城系统后台【平台设置】【其他设置】【腾讯地图key】中添加申请的key

2.9 获取定位需要申请接口的说明

为保证腾讯小程序地图选点功能的正常使用，商家需前往“微信小程序后台”-“开发”-“开发管理”-“接口设置”中申请使用地理位置权限。

原则上只需要申请前面4个，第5个可根据自己实际情况申请。（）

申请后微信侧预计在1-3个工作日进行审核（具体以微信审核时间为准，目前看到的进度是一般几个小时内），审核通过后再前往“管理”-“版权管理”-“开发版本”提交小程序审核。

在申请中，可能需要上传一张图片进行配合，那么我们可以在微信开发者工具中，打开【我的】【地址管理】【新增收货地址】，点击【街道社区】后面的【请选择】来获取当前使用的腾讯地图插件登选点插件用到腾讯地图。如果打开为空白，请先完成之前的此设置

图片类似

2.9.1 获取用户收货地址（wx.chooseAddress）

腾讯文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html

说明：获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。

模板一：

xxxxxxxxxx
获取用户收货地址。为了提升用户下单体验，“使用微信已有提地址”快速填写收货人地址；

模板二：

xxxxxxxxxx
打开地图选择位置。为了提升用户下单体验，并保证地址的准确性，使用微信地图选择位置功能填写收货人地址。

模板三：

xxxxxxxxxx
为了提升用户下单体验，"使用微信已有地址"快速填写收货人地址

2.9.2 打开地图选择位置（wx.chooseLocation）

腾讯文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html

说明：打开地图选择位置。

模板一：

xxxxxxxxxx
为了提升用户下单体验，并保证地址的准确性， 使用微信地图选择位置功能填写收货人地址。

模板二：

2.9.3 选择位置，支持模糊定位（精确到市）和精确定位混选（wx.choosePoi）

腾讯文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.choosePoi.html

说明：选择位置，支持模糊定位和精确定位混选

模板一：

xxxxxxxxxx
打开地图选择位置。为了提升用户下单体验，并保证地址的准确性，使用微信地图选择位置功能填写收货人地址。

模板二：

2.9.4 获取当前的模糊地理位置（wx.getFuzzyLocation）

腾讯文档说明：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getFuzzyLocation.html

说明：获取当前的模糊地理位置。

模板一：

xxxxxxxxxx
获取客户的实时地址，方便同城配送货物时快速完成收货地址填写，提升小程序服务体验

模板二：

xxxxxxxxxx
业务涉及同城配送服务，需获取用户地理位置信息给用户展现到达时间。

模板三：

xxxxxxxxxx
业务涉及用户自提场景， 需要根据用户地理位置推荐自提点

3，微信公众号开发配置

3.1 微信公众号服务器配置

3.1.1 配置代码对接信息

首先我们打开项目代码，进入接口端的appsetting.json，拖到最底部，在公众号对接模块中录入相关信息。

说明：

WeiXinAppId：指的是公众号的appId

WeiXinAppSecret：值得是公众号的appSecrrt

WeiXinEncodingAesKey：自己预设的43位字符组成，也可以从下面步骤对接中获得。

WeiXinToken：自己预设的字符，必须为英文或数字，长度为3-32字符

注意：上面4个，有2个是从公众号平台获取的，两个是自己预设的。

修改配置文件后，一定要重启程序池或者IIS，一定要重启程序池或者IIS，一定要重启程序池或者IIS

3.1.2 对接微信公众号管理平台

首先我们打开微信公众号管理平台，登录选择左侧的【设置与开发】【基本设置】进入配置界面

URL：部署接口的地址加【/WeChatOffiaccountNotify】，比如你的接口访问地址是：https://api.MagicShop.cn，那么URL就是：https://api.MagicShop.cn/WeChatOffiaccountNotify

Token：第一步设置的【WeiXinToken】

EncodingAESKey：第一步设置的【WeiXinEncodingAesKey】

3.2 配置网页域名白名单

我们的公众号内加载的是网页，那么网页要进行数据交换，授权认证等，也是需要设置白名单的。

我们只要讲公众号内的访问地址，添加到【白名单】内即可!

3.3 公众号配置H5支持获取OpenId静默登录

进入H5项目找到consts 文件夹 找到config.ts 文件

1. 替换appId 为公众号的appId

2. 是否开启微信公众号授权： isOpenH5PatternInWeChat ：true ,

3. true: 开启微信公众号授权，采用静默获取opendId进行登录，前提是：需要配置微信公众号环境 参考文档 【微信公众号配置4.1.4.2 文档】 ，为false 是在h5环境中（浏览器，或者微信点开链接 统一属于H5环境）不进行静默授权获取openId登录

4，后端VUE运行与服务器配置

管理后台的前端有两个版本：

一个版本是LayUiAdmin版本，此版本内嵌到Magic.Net项目中，目前官方部署的是LayUiAdmin版本；

一个是VUE3.0版本，两个版本后端内容完全一致，调用接口完全相同。

SVN地址：https://data-beta/svn/20210421MagciShop.Net.Vue3/

GIT地址：

4.1 Vue管理后台架构说明

4.1.1环境与框架配置

Vue后台目前采用

1. vue3（3.0.5版本）

2. ant-design-vue （2.2.0-beta.4 版本）

3. axios（0.21.1）

4. vuex (4.0.2)

5. vue-router(4.0.10)

以上主要使用vue生态的主要npm 包

4.1.2 二开注意事项

1. vue 管理后台采用的的 Web.Admin api

2. 调整项目根目录的 vite.config.ts的 server.proxy 的target 为你后端的api 地址 只需要替换域名地址 或者IP 地址 保留 /api

4.1.3 解读架构分层

系统采用分层架构思想进行设计，模块化进行开发，模块之间耦合很低，系统中主要分为业务组件和 非业务组件，组件采用tsx 进行开发，tsx 组件化思想强，更灵活,

使用ts 强类型进行开发，面向对象开发、

使用json 进行组件配置（表单，表格 ，查询数据详情）

assets

主要放置系统中的静态文件，比如图片 等.

components

components: 文件下的组件为非业务组件，采用tsx 进行开发，会抽离业务，是组件更加通用，

consts

放置系统中的常量，不会变化的，比如用户状态，用户等级 等

enum

放置系统中的枚举，如定行类型，支付类型 等

hooks

放置系统中钩子，比如 封装antd 的message ,封装高阶函数等

layouts

为系统的布局方式

models

放置系统这个中模型，如订单模型，商品模型等

pages

放置系统这个中模型，如订单模型，商品模型等

放置系统下的页面，每个文件夹都是一个独立的模块，

每个模块下面会放置api.ts 用来放置的接口的地址

router.ts 用来存放模块页面的路由地址

plugins

用来存放系统的插件

router

用来路由配置，会组装pages 页面下每个模块配置的路由

guard.ts 用来检测路由跳转权限判断

services

用来存放系统的请求接口的方法

store

用来存放每个模块的的数据

modules.使用命名空间进行隔离

style

系统中的全局样式

utils

系统中工具函数

main.ts

系统中的启动入口

bootstrap.ts

系统启动后进行一些初始化和设置 比如加载路由，拦截器 等

4.1.4 系统中注意项

1、系统中的表单 可以使用json 对象配置出来 新增 和编辑

支持自定义表单项 注入到动态表单中，使表单功能更加强大，同时提供数据管道 给表单处理数据

2、可以使用json配置 配置出表格

可以使用json配置出搜索表单

可以使用json同时配置表格和搜索

可以使用json 配置出查看数据详情

系统的菜单，不需要手动写，是根据pages 下每个模块下面的route.ts 生成菜单的

menu:false 表示此路由不会生成菜单，但是可以进行路由跳转

authority： 菜单权限控制，如果不设置，或者设置为* 表单不进行权限控制

vue 的vite配置

server.proxy 用来设置转发地址

4.2 Vue 管理后台IIS部署手册

VUE部署WIN 系统

win 服务器以2012R2为 部署文档说明

项目使用yarn管理包和还原包, yarn 和npm 区别请百度

打包时电脑 需要 下载nodejs 版本 推荐版本为16.14.0

下载链接 http://nodejs.cn/download

下载成功后，使用 node -v 查看版本

需要调整项目的配置

4.2.1 打开项目，进入项目的根目录，找到vite.config.ts文件

需要修改server.proxy target的地址

target 为代理地址 后端接口部署的地址

第一步从SVN或者GIT 服务clone 代码

Git地址：公司服务器

4.2.2 使用vscode 打开项目，进入项目根目录

4.2.3 执行yarn 还原包

执行yarn 还原包成功后，执行yarn build

项目build 成功后，将会再项目的根目录下生成一个dis 文件。该文件夹是打包好的项目，将dist 目录下的内容拷贝到服务器

4.2.4 winServe20212R2 配置

1.进入服务，找个磁盘创建一个文件比如vue-dist

2.进入服务器 创建一个网站

1.起一个网站名称-比如vue-website

2.物理路径：选择之前在磁盘上创建一个目录，指到根目录下

3.IP 地址选择全部未分配， 端口选择80

4.填写主机名，一般用来域名映射

网站创建成功后，会创建一个应用程序池

1.步骤一 URL重写

• 下载URL 重写模块 urlrewrite

• ：https://www.iis.net/downloads/microsoft/url-rewrite

安装成功后，点击新创建的站点，在IIS 图形界面看到URL重写模块

双击之后，进入URL重写界面，在右上角点击"添加规则"，具体如下图：

选择入站 空白规则

填写完成后

重写URL;这里填写你自己站点配置的域名，要跟vue 前端代理地址一致

最后重启网站即可

4.2.5 如果不能访问

安装Application Request Routing

https://www.iis.net/downloads/microsoft/application-request-routing

最后重启网站

5，采用NUXT3开发的纯H5端

H5端是区别与UniApp端的手机端商城，框架结构和代码都有一定的区别。

SVN地址：https://data-beta/svn/20210421MagciShop.Net.H5/

H5端商城采用vue技术栈的nuxt3进行开发。nuxt3 同时支持服务端和客户端渲染，商城前端(非会员中心采用服务端渲染，可以更好的做SEO 优化)，会员中心采用客户端渲染，降低服务器的压力

5.1 技术介绍

5.1.1 vue3: 学习地址

https://cn.vuejs.org/guide/quick-start.html#try-vue-online

5.1.2 nuxt3: 学习地址

官方地址：https://nuxt.com/blog/v3

中文地址：https://nuxt.com.cn/

5.1.3 UI 组件

vant: 轻量、可定制的移动端 Vue 组件库 https://vant-contrib.gitee.io/vant/#/zh-CN

native-ui: https://www.naiveui.com/zh-CN/os-theme

native-ui 偏向PC端交互，pc 端商城用的是 native-ui ，pc端商城的UI库只有 native-ui

vant 组件是更偏向于移动端交互， h5端UI 库 native-ui 和Vant ,推荐使用vant， 更适合移动端交互

5.1.4 typescript

1.是一种开发时类型约束，跟C# 一样是强类型的，避免一个类型走天下，可以在开发阶段避免很多问题

2. 强类型好处，可以很确定的看出字段类型，接口返回的模型，，智能提示

官网地址 https://www.typescriptlang.org/

中文地址：https://nodejs.cn/typescript/

以上为pc,h5端商城用到主要技术栈

5.2 H5端项目分层介绍

5.2.1 assets 放置样式 比如css sass,css文件

5.2.2 components 放置组件 放置一些公用组件、

components: 为nuxt3 约定的文件夹 在该文件夹下面定义的组件 默认为全局导入，直接在页面使用，不要 先进行导入后，才能使用. 写好组件，nuxt3，会默认进行全局导入 ，会导入懒加载组件和非懒加载组件，根据实际场景使用 入下图

5.2.3 composables 放置一些可组合的 公用的方法 目前放置了服务（service）

composables： 1.为nuxt3 约定的文件夹 。在该文件夹下面目前定义了服务(Service)

2. 在该文件夹下面 可以定义全局方法，需要注意的是，全局方法的文件名必须以.globa结尾，比如：xxxx.global 里面的定义的 方法则全局方法 如果下图

5.2.4 consts 定义放置常量

定义系统常用的变量避免字符串变量到处飞。

5.2.5 deploy 容器部署文件

该文件夹放的，pc，h5的docker 部署yaml文件

1.nginx： 由于pc,h5端采用的服务端渲染，使用node 来允许服务，因此需要借助nginx进行转发。nginx.default.conf 为nginx配置文件

2.docker-compose.yaml ：容器编排文件夹，使用管理多个容器，提供发布效率和增加可维护性

3.Dockerfile: 为部署nuxt3 的文件， Dockerfile 将项目打包成镜像，然后运行

5.2.6 enum 放置枚举

1.一般用来定义系统中的状态，比如订单，发货，支付状态，为了跟后端的状态保持统一，提高强类型，和代码可读性，避免魔幻数字，增加可维护性

5.2.7 env 放置环境变量，开发环境 和生产环境 服务地址 分开放置

该文件夹下放置环境变量，便于区分生产环境和开发环境，避免发布时发生地址错误

.env.dev: 为开发环境的地址

.env.pro: 为生产环境的地址

使用yarn dev 运行开发项目时：默认会使用.env.dev 的配置文件

使用yarn build 打包项目时，默认会使用.env.pro 配置文件

5.2.8 layouts 布局模板，比如商城的顶部和尾部，

该文件夹放置模板文件，比如系统通用的系统头部和尾部

1.目前系统有俩种通用的模板：1 .非会员中心的通用系统头部和尾部，2：会员中心的通用的系统的头部和尾部

可以支持更多的模板 。定义好模板后，可以在页面使用使用如下图

5.2.9 locales 放置多语言文件 比如英文 中文

该文件夹下面放置多语言文件，目前支持切换中文和英文，根据需求可以支持更多的语言，切换语言后，语言的配置会存在cookie里面

5.2.10 middleware 放置中间件，可以处理用户的权限和做些全局的处理

该文件夹下面定义些中间件，这里有点服务端的概念，简单来说，如果定义了 路由中间件，页面跳转，都会执行路由中间件里面的方法

可以定义全局中间件和局部中间件

全局中间件文件名字 必须以.gloabal 结束，这样nuxt3 系统会默认注册到全局

局部中间件：可以随意命令，不能用global结尾，必须在页面先进行申明，才能使用

5.2.11 model 模型， 对应后台的模型

该文件下定义业务的模型，因为系统采用的ts 进行类型约束，避免any 类型走天下，极大的减少开发时的类型 不对的错误，减少运行时类型不对错误。提高开发效率和可维护性。非常建议前端接口返回的数据，全部定义模型，这样可以非常清晰，接口返回什么类型，返回什么字段。，接口约定好，可以跟后端并行开发

5.2.12 pages 页面， 商城的页面

该文件夹下面放置系统页面，比如首页，商品列表页面等

****着重解释

问： 很多伙伴拿到项目，很蒙蔽，，之前用vue2或者其他的项目，都会定义路由，而在项目里面没有找到，页面怎么进行导行的？？？？

答：

大家都写过C#,肯定听说过，约定大于开发，所有nuxt3采用约定的方式，比如以上介绍的pages，middleware，composables 等，都是nuxt 约定的文件，所有nuxt 背后才能帮我们做很多事情

问： 如何定义页面路由？

nuxt：生成路由，是根据pages文件夹下的文件和文件夹生成，简单来所，是根据pages下的文件夹和文件路径来生成 比如定义了 /pages/test.vue 那生成的路由是 http://localhost:xxxx/test

如果定义的/pages/about/index.vue 那是生成的路由时 http://localhost:xxxx/about 如果文件夹下的文件名称用index 结尾。，nuxt 默认为index 文件作为该文件夹的默认路由

问：如果定义子路由

答： nuxt 生成子路由也是根据约定来生成的

比如：/pgaes/member.vue 定义主要页面的文件 生成对应的路由为 http://localhost:xxxx/member 这个路由为一级路由，

在/pages/member/center/index.vue 再在pages 文件夹下新增同名的member文件夹，然后再menber文件夹下面新增对应的页面比如 个人中心center 页面 则生成的路由为 http://localhost:xxxx/member/center 默认会进行个人中心的index 页面

5.2.13 plugins 插件，放置一些多语言，项目启动的一些处理，

该文件夹下面放置一些项目启动的插件，比如项目启动时，要执行某个生命周期钩子，初始话某个数据

2：比如添加多语言，vant ，naive-ui UI库的插件，项目启动时，注入到系统里面

5.2.14 public 公开的，放置写公开的，比如图片，js 不需要参与编译的

该文件放置一些不需要编译的，能够通过外网进行访问到，比如图片，和js

5.2.15 store 状态管理，放置页面一些数据的状态，让其他页面共享

该文件夹下放置不通业务的状态管理：比如系统的配置，账号信息，等，store里面数据可以再系统里面全局共享，并且store里面的数据是响应式，如果某个地方改变store对象的值，其他地方引用这个值全部会同步更新，这样保证数据的一致性和 业务模块，组件直接解耦，并且全部通过属性进行一层一层传递

5.2.16 utils 帮助类， 目前主要放置了 http 请求帮助类

该文件夹下面放置一些帮助类文件，这些文件不会被nuxt注册到全局，因此页面需要使用，必须先进行导入后才能使用

http: 封装了通用的请求帮助类

5.2.17 app.vue 根组件

项目启动的根组件

5.2.18 ecosystem.config 文件

为启动nuxt 系统的文件

如果系统用docker 部署则不需要该文件

在iis 和linuxt 上部署，需要借助该文件来启动应用 ，必须搭配pm2来使用（PM2 在部署手册里面有详细介绍，请查看）

5.2.19 nuxt.config nuxt 相关配置

该文件夹下面放置的nuxt 一些全局配置，比如全局设置系统的标题和SEO,以及引用外部的js 等

5.2.20 tsconfig.json

该文件是我们采用ts开发时进行的一些配置，可以根据自行需要进行配置，，一般安装某个包，根据包的提示，是否需要在tsconfig.json文件里面进行配置

5.2.21 yarn.lock

该文件的作用是锁住 npm 包的版本，因为每个npm的都有很多版本，也有大版本和小版本，如果不进行锁npm 包，每次重新安装时，都会采用新的版本，有可能新版本nmp包有问题，所有我们借助yarn.lock来锁住版本，这样团队里面的每个人 安装npm 包 保证版本一致，减少因为包版本不同而造成的错误

5.3 使用VSCode进行H5开发

VSCode 全称 Visual Studio Code，是微软出的一款轻量级代码编辑器，免费、开源，插件丰富、而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

项目存放的文件夹目录不能含有中文，否则项目运行将会报错

PC端商城端口是3000 ,H5端端商城是3001，项目运行起来之前，先把api 服务中的appsetting.json 添加

http://localhost:3001 运行跨域

如果后端API 项目部署部署https。 切记 将env 文件夹下面的env.dev env.pro 环境变量地址写为https

下载地址

https://code.visualstudio.com/download

H5端 开发环境准备

5.3.1 安装node 版本

安装地址 https://nodejs.org/download/release/v16.14.0

根据自己的32位还是64位 进行安装对应的版本

安装好后 执行 node -v 查看版本 入下图 说明node 安装成功

1. 由于项目是用yarn 来管理npm 包，切记使用npm 来管理 npm 包 大家可以自行了解下 yarn 跟 npm 的区别

安装yarn

执行 如下命令

xxxxxxxxxx
npm install -g yarn

安装成功 执行 yarn -v 查看版本 则说明安装成功

5.3.2 安装配置

成功后，进入项目根目录 如下图， 执行yarn install 切记一定要执行yarn install

如图 正在还原npm 包，

由于网络关系，如果某个npm 包还原失败后，重新执行yarn install 直到所有的npm 包还原成功，还原成功后，将会出现 node_modules

项目还原成功后，使用vscode 打开项目 入下图

5.3.3 运行项目

打开项目后，安装键盘 Ctrl+J 快捷键 打开控制台窗口 然后执行yarn dev 如下图 将会出现ip 地址和端口号

• 第一次启动 比较慢，由于要编译所有的npm 包，，运行成后，在浏览器输入 http://localhost:3001/ 将会出现预览界面，

• 项目启动成功，每次修改，保存后，由于会热更新，浏览器会自动刷新，将会看到自己最新的更改（如果浏览器没有及时刷新则自己手动刷新下浏览器）

6、开发步骤

6.1、UniApp前端与后端API接口交互

接口制作完成后，我们将接口发布到服务上，然后就可以前端进行调用交互了。

1、打开项目下MagicShop.Net.Uni-App\MagicShop\common\request\http.api.js 统一接口配置文件。添加接口的请求地址。

2、在前端需要的位置，使用方法调用即可。

6.2、屏蔽微信开发者工具中黄色的提醒

我们系统集成了uView的UI框架，以及底层是uniapp基于vue进行编译的多端。所以在微信开发者工具中会出现很多认为不恰当的黄色感叹号提醒内容，这些内容比较影响我们的代码编写可视区域。可进行屏蔽。

1、屏蔽前

2、屏蔽方法

点击微信开发者工具Console面板中的Default Levels下拉按钮，取消Warnings的勾选即可。

3、屏蔽后效果

6.3、Swagger端调试

Sawagger的调试：https://api.magicshop.top Swagger账号密码：MetaMagicShop

关于如何调试：参考后端文档

找到Swagger中的登陆接口

点击try it out 进行调试输入用户名和密码

如果输入正确，接口返回成功，返回结果中有Token

复制Token填写到Authrization中

输入Token后，即可进行在线调试接口。