DTnds社区团购帮助文档
项目结构
您下载的源码文件名为DTnds_10_src.7z的压缩包,通过解压后,我们将得到以下四个目录
DTnds.Admin
总后台管理项目,这是一个标准的Vue3.0 SPA单页面项目
DTnds.Merchant
商户平台管理项目,这是一个标准的Vue3.0 SPA单页面项目
DTnds.App
手机应用项目,这是一个标准的UniApp项目,它的的内核其实也是Vue3.0项目,它可以生成适用于H5网站、小程序、手机App应用。
DTnds.Core
后台端API项目,它是整个系统的核心,它负责存储和提供数据给前端应用,后端语言采用.Net 8.0 + EFCore,是一个跨平台应用。
管理和商户项目结构
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。
|- assets 静态文件目录,放置一些图片、css、字体等文件。
|- components vue组件文件的存放目录,也是主要的工作目录。
|- pages 页面的主要目录,所有的Vue页面都要放在这里面。
|- request HTTP请求的封装方法目录。
|- router Vue路由的配置文件目录。
|- stores Vue State持久性存储封装的方法。
|- utils 一些封装好的帮助方法。
|- App.vue 项目入口文件。
|-main.js 项目的核心文件。
public 这里面的文件发布后的文件原样带出。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
vite.config.js Vite的配置文件
移动端项目结构
colorui 界面辅助UI框架,快速页面布局,可以参考帮助文档:https://miren.lovemi.ren/colorui-document/
common AJAX请求的封装类、SCSS样式
components 符合vue组件规范的uni-app组件目录
pages 业务页面文件存放的目录
static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录
node_modules 存放Node下载的组件,首次运行自行安装
uni_modules 存放uni_module
unpackage 非工程代码,一般存放运行或发行的编译结果
main.js Vue初始化入口文件
App.vue 应用配置,用来配置App全局样式以及监听
pages.json 配置页面路由、导航条、选项卡等页面类信息
manifest.json 配置应用名称、appid、logo、版本等打包信息
uni.scss 内置的常用样式变量
API接口项目结构
DTnds.Core.API RESTful API接口项目,引用Model、IServices 、Services 、DBFactory 、Common类库。
DTnds.Core.Common 公共组件方法类库,独立项目,不能引用任何类库。
DTnds.Core.DBFactory 数据库工厂类库,负责数据库上下文,引用Model、Common类库。
DTnds.Core.IServices 数据访问层接口类库,仓储模式对数据库的增删改查定义接口,以便依赖注入,引用Model、Common类库。
DTnds.Core.Model 数据库表实体类库,Models目录主要负责定义实体与数据库表的映射、关系,ViewModels目录主要负责业务需求的DTO实体定义。
DTnds.Core.Services 数据访问层接口实现类库,引用Model、IServices 、DBFactory 、Common类库。
项目开发
准备工作
开发人员要求
1. 前端开发者要求
熟悉并掌握
Vue 3.0
的语法,如果不熟悉,请点击 这里 学习相关教程;不需要TypeScript,我们用的是JavaScript;熟悉JavaScript语法、HTML、CSS样式,至少要掌握JavaScript、scss前端这些是最基本的;
熟悉Vue Rotur、Pina,这些教程在跸哩跸哩网站上面都是可以找到的;
2. 后端开发者要求
- 熟悉并掌握 .Net Core RESTful接口开发、EFCore框架,当然也意味着你必须要熟悉C#语法;
- 至少要掌握熟悉一款数据库,如SQL Server 2012以上、Mysql 8.0.2以上,其中一些主流的数据库(包括国产数据库)都是可以支持的;
软件要求
1. 后端开发工具
Visual Studio 2022 社区版
(免费的)下载地址 或者Visual Studio Code
,两者可以二选一,选择你自己喜欢的;数据库方面可以选择主流的,如SQL Server、Mysql、Oracle、达梦数据库(国产)等等,只要有相关的NuGet包支持就可以。
我们标准的开发数据库是使用SQL Server 2012版本,你可以安装最新,性能会好点;
2.前端开发工具
前端的后台开发我们统一使用了
HBuilderX
国产开发工具,它的优点就是小巧和启动速度快,下载地址当然除了
HBuilderX
,你也可以选择Visual Studio Code
,具体要根据你的习惯来决定;
API项目开发
1.数据库迁移
由于我们API项目使用的是Code First模式,所下载的源码中并未包含数据库,所以在运行项目时,我们必须要先生成数据库,也称之为数据迁移
,下面是Code First模式的一些解析:
TIP
Code First模式我们称之为“代码优先”模式,从某种角度来看,其实“Code First”和“Model First”区别并不是太明显,只是它不借助于实体数据模型设计器,而是直接通过编码方式设计实体模型(这也是为什么最开始“Code First”被叫做“Code Only”的原因)。但是对于EF它的处理过程有所差别,例如我们使用Code First就不再需要EDM文件,所有的映射通过“数据注释”和“fluent API”进行映射和配置。
1. 在Window下数据库迁移
确保你的Windows系统上已经安装了最新版本的Visual Studio 2022,并且包含了.NET 8.0的开发工具。在源码包里面打开DTnds.Core/DTnds.Core.API目录,找到“
DTnds.Core.sln
” 双击打开;首先我们要在Visual Studio 2022 解决方案资源管理器里展开DTnds.Core.API,找到appsettings.json文件,双击打开,修改你的数据库连接字符串。
"ConnectionStrings": { "DBType": "SqlServer", //MySql,SqlServer,Sqlite,Oracle,PostgreSQL "WriteConnection": "server=.;uid=sa;pwd=123;database=DTnds2db;TrustServerCertificate=true;", "ReadConnectionList": [ "server=.;uid=sa;pwd=123;database=DTnds2db;TrustServerCertificate=true;" ], "Strategy": "Random" }
注意:ReadConnectionList至少要保留一条记录,将uid和pwd改更成你的数据库账号密码即可。
首先我们要将
DTnds.Core.API
设置为启动项目,可以在解决方案资源管理器中选中DTnds.Core.API
项目,右键在弹出的菜单中选择设为启动项目
,这步基本忽略,因为DTnds.Core.API
是唯一的Web项目,默认是设为启动项目的。在工具栏上面的
视图
>其它窗口
>程序包管理器控制台
,打开程序包管理控制台
,如图所示:在程序包管理控制台里面将DTnds.Core.DBFactory设置为默认项目,如图所示:
输入以下命令,按回车键执行:
Add-Migration initDatabase
TIIP
这里值得注意的是
initDatabase
是我们自定义迁移文件的名称,且不能重复,也就是说,下次你再进行迁移的时候就不能于重复使用这个名称,需要另外起名。等待数据库迁移文件生成后,我们再输入以下命令按回车键执行,当我们看到执行到Done时,证明已经成功生成了数据库:
Update-Database
做完以上工作,我们的数据库就会自动创建好了,不需要我们手动创建数据库。
2. 下次进行数据库迁移
在我们对Model的类进行修改时,如果涉及到增删改字段,需要同步到数据库里面,这时候你就需要再一次迁移,依次的操作和上面是一样的,执行命令顺序如:
Add-Migration 自定义名称
Update-Database
3. 删除数据库和迁移文件
当我们手动调整了数据库结构或更改了类名或属性后,造成迁移文件和数据库不同步时,数据库再次迁移就会失败,此时我们打算重做数据库,这里,我们就需要先删除数据库,再执行删除迁移文件,具体命令如下:
Drop-Database //删除数据库
Remove-Migration //删除迁移文件,一次删除一条最新的数据迁移文件
当我们删除完迁移文件后,再依次像上面首次迁移数据库迁移的命令即可。
在苹果系统Mac OS数据迁移
在 macOS 上使用 Visual Studio 2022 进行 Entity Framework Core (EF Core) 的数据库迁移,首先我们需要将DTnds.Core.API
项目设置为默认项目,具体步骤如下:
1. 设置开发环境
确保已经在 macOS 上安装了以下工具:
- Visual Studio 2022 for Mac
- .NET SDK
2. 安装 EF Core CLI 工具
在终端中运行以下命令,确保安装了 EF Core 命令行工具:
dotnet tool install --global dotnet-ef
验证安装是否成功:
dotnet ef --version
3. 添加和应用迁移
添加迁移
在终端中,导航到
DTnds.Core.API
项目目录,并运行以下命令以创建初始迁移:dotnet ef migrations add InitialCreate
这将生成一个新的迁移文件夹,包含数据库架构的初始快照。
应用迁移
运行以下命令以将迁移应用到数据库:
dotnet ef database update
4. 更新模型和迁移
如果需要更新模型(例如,添加新的属性或实体),请按以下步骤操作:
更新实体类
更新实体类,例如,添加一个新的属性:
public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } public int Stock { get; set; } // 新属性 }
添加新迁移
创建新的迁移以反映模型的更改:
dotnet ef migrations add AddStockToProduct
应用迁移
将新迁移应用到数据库:
dotnet ef database update
结论
通过上述步骤,你可以在 macOS 上使用 Visual Studio 2022 进行 EF Core 的数据库迁移。这包括设置项目、配置 EF Core、创建和应用迁移,以及在模型发生更改时更新迁移。确保每次更改模型后都生成新的迁移并将其应用到数据库,以保持数据库架构与模型一致。
2. 项目启动
API站点做为主要的驱动,它将为后台、前台Web、手机APP提供数据,所以在开发前端时,我们需要启动API项目以便给前端提供数据访问,如果你是团队合作,你可以在局域网启动一个API站点。当然,这个地址必须要在局域网中能访问。
一般情况下,我们不需要部署到API,.Net为我们提供了命令就可以直接启动一个站点。
通过命令启动一个站点
首先我们先用Visual Studio 2022打开DTnds.Core项目,在DTnds.Core.API项目上面右健,在弹出的菜单中选择
生成
,这样就会自动编译程序集到DTnds.Core.API项目的bin目录
里面。我们直接打开文件夹,例如你的项目在F盘的DTnds.Core里面,此时我们可以进入F:\DTnds.Core\DTnds.Core.API\bin\Debug\net8.0,在地址栏上面输入cmd,按回车。
此时弹出了DOC窗体,输入以下命令回车即可启动API站点
dotnet DTnds.Core.API.dll --urls="http://*:5200"
因为需要调试,所以不要关闭DOC窗口,关闭即代表网站不在运行。
注意:编译项目的时候,必须要关闭DOC窗口,如果你的项目还在运行,占用进程,Visual Studio 2022无法编译的。
除了以上的方式,你当然也可以直接从Visual Studio 2022直接启动调试。
或者部署到服务器或本地的IIS里面去运行。
3. 项目发布
在Visual Studio 2022里面选中 DTnds.Core.API
项目,右健弹出的菜单中选择 发布,这时会自动编译。
稍等片刻后,在下面的输出
窗口中,按住Ctrl健
+鼠标左健
单击,直接打开发布文件目录,里面就是我们编译过后的发布文件,将里面的文件上传到你的站点目录下即可。
后台项目开发
开发环境准备
总后台管理项目的文件夹名为
DTnds.Admin
,商户平台项目文件名为DTnds.Merchant,它是一个标准的Vue 3.0 项目,关于它的目录结构,可以查看项目结构说明
。开发工具我们统一使用 HBuilderX ,我们需要进入他们的官网下载安装,下载正式版进行本地安装。
接下来我们还需要安装Nodejs,那是因为我们Vue是基于Nodejs环境的,点击进行他们的[官网](Node.js — 下载 Node.js® (nodejs.org))下载最新版的LTS稳定版。
Tip:如果你的Nodejs有多个版本需要管理,推荐你使用nvm进行对npm版本的管理以及切换,这样你的旧项目需要老版本的npm时,可以进行切换,nvm安装说明
项目运行
1. 项目导入
打开HBuilderX开发工具,从左上角的 文件 > 导入 > 从本地目录导入,选择DTnds.Admin目录和DTnds.Merchant目录,导入即可,如图:
2. API地址修改
在HBuilderX开发工具里,依次展开DTnds.Admin和DTnds.Merchant > src > request ,我们将会看到一个index.js,把里面的地址修改成你正在运行或后端人员提供给你的API地址。
//请求配置属性
const httpConfig = {
baseApi: 'http://localhost:5200',
tokenKey: 'dtmall_admin_token', //Token存取的key
isRefreshing: false, //是否正在刷新的标记
requests: [] //重试队列,每一项将是一个待执行的函数形式
}
注意:API网址后台不要带/结尾,很多人都是因为带了/结尾,导致请求不到数据。
3. 安装依赖项
在项目里的 node_modules
文件夹存在的是我们在开发时用到的组件,由于太大,我们在提供源代码是把里面的文件删除了。所以我们需要通过npm安装,在确认安装Nodejs后,执行以下命令即可:
npm install
在安装的过程序中,可能会遇到下载慢,安装过程中有错误导致中断下载,可以把
node_modules
文件夹里面的文件全部删除后再执行以上命令。如果你需要更快的速度,可以设置国内镜像,如 淘宝镜像
4. 项目运行预览
首先双击打开一个项目的文件,让HBuilderX知道你要运行哪个项目。
在主菜单栏中选择
运行
>运行到终端
>npm run dev
,第一次运行的时候可以会弹出让你选择内置还是在外部运行,我们一般选择内置,外部的话他们打开一个CMD窗口,实际都一样。执行后下面就会有两个预览地址,一个是本地预览地址,另一个是局域网都可以访问的地址,单击它,选择默认浏览器中打开。
这样,我们的项目就可以实时预览了。
5. 项目发布
依然要双击打开一个项目的文件,让HBuilderX知道你要发布哪个项目。
在主菜单栏中选择
运行
>运行到终端
>npm run build
,如图所示:
- 命令执行完毕后,在项目里面就多出了一个
dist
目录,这是一个纯HTML网站文件,将这些文件上传到你的空间下面即可,服务器上面不用安装任何软件即可运行。
APP项目开发
开发环境准备
- 前端APP项目的文件夹名为
DTnds.App
,它是一个标准的Uniapp 项目,关于它的目录结构,可以查看项目结构说明
。 - 开发工具我们统一使用 HBuilderX ,我们需要进入他们的官网下载安装,下载正式版进行本地安装。
- DTnds.App项目可以生成H5网站、小程序、手机APP,具体根据你授权版本不同,功能可能不一样。
- DTndsApp项目引入了ColorUI做界面,开发时可以参考它们的帮助文档,这样可以更快速地制作界面。
项目的运行
1. 项目导入
打开HBuilderX开发工具,从左上角的 文件 > 导入 > 从本地目录导入,选择DTnds.App目录,导入即可,如图:
API地址修改
在HBuilderX开发工具里,依次展开DTnds.App > common > request ,我们将会看到一个index.js,把里面的地址修改成你正在运行或后端人员提供给你的API地址。下面是小程序和APP需要写死的地方
const baseUrl = 'http://localhost:5200'
const tokenKey = 'dtmall_client_token'
注意:baseUrl修改成你的API网址,结尾不要带/结尾,很多人都是因为带了/结尾,导致请求不到数据。
2. 项目运行预览
首先双击打开一个项目的文件,让HBuilderX知道你要运行哪个项目。
在主菜单 > 运行 > 运行到浏览器,选择你要预览的浏览器即可,如图所示:
Tips:第一次运行的时候,HBuilderX需要安装项目所需的组件,让它自动安装完成,重新运行即可
这样,我们的项目就可以实时预览了。
3. 小程序预览
Uniapp项目可以生成小程序,前提是你需要安装相关的开发工具,下面以微信小程序为例。
首先我们要下载微信开发者工具,点击这里下载
双击DTnds.App项目中的
manifest.json
文件,在基础配置
里面单击重新获取
按钮。当然你要先在HBuilderX开发工具的左下角登录你的开发者账号,没有的话就新注册一个账户。
在
微信小程序配置
里面填写你的微信小程序AppID
在主菜单
运行
>运行到小程序模拟器
>微信开发者工具
,这时,HBuilderX将会自动打开微信开发者工具
,等待片刻后,就可以在微信开发者工具中实时预览你的项目了。注意事项:如果运行微信开发者工具编译出错,请在微信开发者工具中的
项目设置
设置为增强编译即可更加详细的配置,可以查看这里的说明:将Uniapp运行到微信开发者工具
项目部署
API网站部署
默认网站是不启用Redis缓存,如果需要部署Redis,用户可以在服务器里面安装Redis服务端,通过修改DTnds.Core/DTnds.Core.API项目里的appsettings.json以支持Redis,如下面这样修改。
"CacheSettings": {
"Enabled": true,
"Provider": "Redis", //可选项:"Redis"或"InMemory"
"RedisServer": "localhost:6379",
"InstanceName": "DTnds"
}
TIP
Enabled 是否启用缓存,
true
代表启用,false
代表不启用Provider 它有两个可选值,分别是
Redis
和InMemory
Windows系统部署
请确保已经在Visual Studio 2022里面发布了网站文件,并且上传到了服务器站点目录下。
1. 安装 IIS 服务器
选择一台服务器作为WEB-IIS服务器,在Windows Server系统中,IIS角色是可选组件,默认情况下是没有安装的。
打开【服务器管理器】,单击【添加角色和功能】。
默认选择【基于角色或基于功能的安装】,点击【下一步】。
默认选项,继续下一步。
进入【服务器角色】页面,点击Web服务器(IIS),在弹出的对话框点击【添加功能】。
默认选项,点击【下一步】,直到角色服务为止。角色服务中有很多选项没有选择,我们暂时不需要用到这些选项,继续点击【下一步】。
进入【确认】页面,点击【安装】。
进入【结果】界面, 安装过程需要等待一段时间, 安装完成后, 会在进度条下面显示【安装成功】。
2. 安装ASP.NET Core运行时
ASP.NET 核心运行时使你能够运行现有的 Web/服务器应用程序。在 Windows 上,我们建议安装托管捆绑包,其中包括 .NET 运行时和 IIS 支持。
在Web服务器上面访问微软官网,下载ASP.NET Core运行时,必须是.Net 8.0的,点击这里直达下载,如下图所示:
服务器上安装下载的EXE文件,安装成功后,打开IIS的模块,就能看到ASP.NET Core Module v2的模块了。
3. 数据库连接字符串
选择你喜欢的数据库进行安装,在这里就不再赘述了,可以查询对应的数据库教程。
安装好IIS、ASP.NET Core运行时、数据库之后,我们就可以更改相关的数据库连接字符串了。
找到我们API网站目录,找到appsetting.json,记事本打开,修改以下的数据库连接字符串,如图所示:
"ConnectionStrings": { "DBType": "SqlServer", //MySql,SqlServer,Sqlite,Oracle,PostgreSQL "WriteConnection": "server=.;uid=sa;pwd=123;database=DTnds2db;TrustServerCertificate=true;", "ReadConnectionList": [ "server=.;uid=sa;pwd=123;database=DTnds2db;TrustServerCertificate=true;" ], "Strategy": "Random" },
参数名 说明 DBType 数据库类型 WriteConnection 写的数据库的连接字符串 ReadConnectionList 读的数据库连接字符串,这是一个数组,至少要保留一条连接字符串,可以和写的数据库连接字符串相同 Strategy 读的数据库策略,它有两个可选值: Random
随机策略,Polling
轮循策略修改好后,我们重启一下网站才能生效哦!
Linux系统部署
ASP.NET Core是跨平台项目,它支持部署到不同的平台,Linux系统也是比较常见的部署方案,DTnds 8.0的部署和普通的ASP.NET Core部署没有任何区别。
要将 .NET 8.0 API 项目部署到 Linux 环境,可以按照以下步骤操作。此流程假设你已经在 Windows 环境中开发并测试了你的 .NET 8.0 API 项目。
1. 准备工作
确保已经在 Linux 服务器上安装了 .NET SDK 和运行时。你可以参考 微软的官方文档 获取详细的安装步骤。
2. 在 Windows 上发布应用程序
打开命令提示符或 PowerShell,导航到你的项目文件夹。
使用以下命令发布你的应用程序:
dotnet publish -c Release -r linux-x64 --self-contained
这个命令会生成一个针对 Linux x64 的自包含(self-contained)发布包,意味着你的应用程序将包含所有的 .NET 运行时和依赖项。
发布完成后,生成的文件将位于项目目录下的
bin/Release/net8.0/linux-x64/publish
文件夹中。
3. 将文件传输到 Linux 服务器
使用 SCP、SFTP 或其他文件传输工具将发布包传输到 Linux 服务器。例如,使用 SCP 命令:
scp -r bin/Release/net8.0/linux-x64/publish username@yourserver:/path/to/your/app
4. 配置和运行应用程序
连接到你的 Linux 服务器。
导航到你传输文件的目录:
cd /path/to/your/app
确保主程序文件(例如,
myapp
)具有可执行权限:chmod +x myapp
运行你的应用程序:
./myapp
5. 使用 Systemd 管理服务
为了确保你的应用程序在系统重启后自动启动,可以使用 systemd
创建一个服务。
创建一个新的服务文件,例如:
sudo nano /etc/systemd/system/myapp.service
在文件中添加以下内容:
[Unit] Description=My .NET 8.0 API Service After=network.target [Service] WorkingDirectory=/path/to/your/app ExecStart=/path/to/your/app/myapp Restart=always RestartSec=10 SyslogIdentifier=myapp User=youruser Environment=ASPNETCORE_ENVIRONMENT=Production [Install] WantedBy=multi-user.target
保存并关闭文件。
重新加载 systemd 配置:
sudo systemctl daemon-reload
启动服务:
sudo systemctl start myapp
如果你希望服务在系统启动时自动启动:
sudo systemctl enable myapp
6. 配置反向代理(可选)
为了更好地管理流量和安全性,你可以配置 Nginx 或 Apache 作为反向代理。以下是一个简单的 Nginx 配置示例:
安装 Nginx:
sudo apt-get update sudo apt-get install nginx
配置 Nginx:
sudo nano /etc/nginx/sites-available/default
添加以下内容到配置文件中:
server { listen 80; server_name your_domain_or_ip; location / { proxy_pass http://localhost:5000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection keep-alive; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }
测试 Nginx 配置:
sudo nginx -t
重新加载 Nginx:
sudo systemctl reload nginx
结论
通过上述步骤,你可以将 .NET 8.0 API 项目部署到 Linux 服务器,并配置服务以便自动启动和管理。如果有任何问题,可以参考 微软的官方文档 获取更多信息。
后台和商户网站部署
项目发布
在HBuilderX开发工具中打开DTnds.Admin项目,随便打开一个项目的文件,让HBuilderX知道你要发布哪个项目。
在主菜单栏中选择
运行
>运行到终端
>npm run build
,如图所示:命令执行完毕后,在项目里面就多出了一个
dist
目录,这是一个纯HTML网站文件,将这些文件上传到你的空间下面即可,服务器上面不用安装任何软件即可运行。
服务器部署
由于DTnds.Admin项目发布后,生成的是HTML网站,所以在服务器里面只要能支持HTML的站点都能顺利运行,值得一提的是发布后可以通过修改DTnds.Admin /src/request/index.js文件修改你的API的地址,不过需要清空一下你的浏览器缓存才能生效。
H5网站部署
1. 项目发布
在HBuilderX开发工具中打开DTnds.App项目,随便打开一个项目的文件,让HBuilderX知道你要发布哪个项目。
在主菜单栏中选择
发行
>网站-PC Web或手机H5(仅适用于uni-app)
,如图所示:命令执行完毕后,在项目里面就多出了一个
dist
目录,这是一个纯HTML网站文件,将这些文件上传到你的空间下面即可,服务器上面不用安装任何软件即可运行。
2. 服务器部署
由于DTnds.App项目发布后,生成的也是HTML网站,所以在服务器里面只要能支持HTML的站点都能顺利运行。
小程序部署
1. 小程序发布
1. 获取微信小程序AppID
登录微信公众平台,查看自己微信小程序的AppId并复制
2. 填写微信AppID
打开DTnds.App项目,选择 manifest.json文件 > 微信小程序配置,粘贴自己的小程序ID,如图所示:
3. 发布
在主菜单中选择发行
> 小程序-微信
,如图所示:
之后出现下面的弹窗,此时微信小程序名称随便填不影响,真正名称在于你自己在公众平台设置的那个,之后点击发行即可。
接下来,HbuilderX会自动调开微信开发者工具(没有的朋友先安装),我们选中右上角的上传按钮。
来到这一步,有可能会失败。看下面这张图,体积过大了
首先我们来看一下小程序有哪些限制
微信小程序每个分包的大小是2M,总体积一共不能超过20M。
百度小程序每个分包的大小是2M,总体积一共不能超过8M。
支付宝小程序每个分包的大小是2M,总体积一共不能超过8M。
QQ小程序每个分包的大小是2M,总体积一共不能超过24M。
字节小程序每个分包的大小是2M,总体积一共不能超过16M(字节小程序基础库 1.88.0
及以上版本开始支持,字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)
分包注意事项
subPackages 里的pages的路径是 root 下的相对路径,不是全路径。
分包下支持独立的 static 目录,用来对静态资源进行分包。
针对vendor.js过大的情况可以使用运行时压缩代码
HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
4. 分包步骤
开启分包优化
manifest.json->源码视图->mp-weixin
添加配置开启分包优化"optimization" : { "subPackages" : true //是否启用分包优化 }
page
文件夹的页面分一部分到pageA
文件夹,个人建议是page文件夹只放tabBar页面,非tabBar页面都分包至pageA
或者pageB
注意:分包之后注意检查页面跳转或者图片路径,有可能分包之后导致页面跳转失败或者图片路径不正确。
再次扫描代码质量通过,然后再次上传项目,上传成功!
2. 公众平台提交审核
最后一步,登录微信公众平台
,选择版本管理
,会发现上一步自己提交的版本,之后点击提交审核
即可,如果是首发可以尝试来一个加速审核
,能节省一些时间。
3. 配置域名
发布自己的小程序之前,务必先配置一下域名,这样小程序才能使用网络功能,不配置域名,任何互联网的访问功能(api访问)都会失败。
首先登陆微信公众平台
,选择开发管理
->开发设置
->服务器域名
,配置自己的合法域名。
这里要注意,ip地址是不可以的,必须是域名,因而没有域名的请先注册域名,而后备案,之后用域名进行配置。