一、概述:

朗尊B2B2C多用户平台,基于VUE利用uni-app开发适合多屏移动设备的Web，APP，小程序等。

该文档的作用就是让你可以轻松对Web，APP，小程序等项目进行打包，用于发布和管理。

二、环境版本：

所需环境如下：

1、node.js : (电脑上必须先安装node.js，在终端处用node -v命令查看node.js版本)

1.1、进入官网：https://nodejs.org/en/，选择最新的版本下载

1.2、设置node.js的环境变量：

变量名：NODE_PATH

变量值：C:\###\nodejs\node.exe(对应电脑上的安装文件的目录)

2、Windows系统

三、相关软件：

编程软件：HBuilderX

打包软件：HBuilderX

其它工具：WinSCP

四、依赖包安装：

1、打开编程软件：VScode或WebStorm或HBuilder，并进入我们开发的项目，调出终端(终端调出方法每个编程软件都不同)，如下图：

2、在终端处输入命令：npm install，如下图：

安装完成后，该文件夹会新增一个node_module的文件夹，安装这件依赖完成，如下图：

五、配置服务器地址:

在【config】文件夹下的config.js文件里配置好服务器地址，如下图：

备注：H5端的生产环境在serviceConfig.js文件里配置，APP和小程序的生产环境在config.js文件里配置。

六、在开发环境下调试：

打开HbuiderX，点击菜单栏的【运行】→【运行到浏览器】，如下图所示：

成功，如下图所示：

在浏览器里输入地址：localhost:8080，就能在本地浏览器里调试程序，如下图所示：

七、H5 web端生成发布版本的代码:

1、打开HbuiderX，点击菜单栏的【发行】→【网站-H5手机版】，如下图所示：

2、执行命令成功后，会在该项目的文件夹\unpackage\dist\build\h5里，生成一个名为dist的文件夹，发布版本的代码(【static】和【index.html】)都在dist文件夹里，如下图：

3、注意：【发行】→【网站-H5手机版】是对应serviceConfig.js里的配置，该功能是H5版本的发行，APP和小程序的发行请参考下面。

八、H5 web端部署：

1、打开WinSCP软件，输入主机名、用户名及密码(账号密码请问后台开发人员要)后进入会话窗口，如下图所示：

2、进入部署路径(部署路径请问后台开发人员要)，如下图：

3、进入该项目文件夹下的【dist】文件夹里，复制【static】、【serviceConfig.js】及【index.html】文件，粘贴到WinSCP的部署路径里。如下图所示：

4、部署成功后，在浏览器里输入网络地址(地址请问后台开发人员要)，就可以进入web端了。如下图所示：

九、APP端打包：

1、打开HbuiderX，点击菜单栏的【发行】→【原生APP-云打包】，如下图所示：

2、配置manifest.json文件：

2.1、配置【基础应用信息】，如下图所示：

2.2、【APP图标配置】，如下图所示：

2.3、【SDK配置】及【模块权限配置】，配置需要用到的SDK，如下图：

2.4、配置通用链接(该通用链接只针对IOS，不会影响安卓端)

最新政策，如果用到微信分享、微信支付、微信第三方登录时，IOS端要求配置通用链接。如果manifest.json文件sdk模块选择了微信分享、微信支付、微信第三方登录。则要配置IOS端的通用链接，如果通用链接的话，HbuilderX会报没有UniversalLinks的错误从而导致打包失败。

2.4.1、进入苹果开发者中心https://developer.apple.com/ → account → Certificates, Identifiers & Profiles → Identifiers，选中对应的App ID，选择如下图所示：

2.4.2、进入微信开放平台https://open.weixin.qq.com/ → 管理中心 → 查看对应的移动应用 → 开发信息 → 点击【修改】，在Universal Links下添加：https://mdiamonds.legendshop.cn/ (能唤起当前应用的Universal Links路径（https开头，以“/”结尾），在实际调用SDK时，会校验Universal Links是否匹配)，如下图所示：

2.4.3、配置manifest.json文件，如下图所示：

2.4.4、服务器配置apple-app-site-association文件

需要在上面域名对应的服务器上放apple-app-site-association文件。

apple-app-site-association文件配置如下：

{

"applinks": {

"apps": [],

"details": [

{

"appID": "com.app.legendshop2",

"paths": [ "/ulink/*"]

}

]

}

apps：必须对应一个空的数组

appID：由前缀和ID两部分组成,可以登录苹果开发者网站，在“Certificates, Identifiers & Profiles”页面选择“Identifiers”中选择对应的App ID查看

paths：对应域名中的path，用于过滤可以跳转到App的链接，支持通配符*，?以及NOT进行匹配，匹配的优先级是从左至右依次降低

注意：不要直接拷贝使用上面的示例，必须根据自己应用的配置修改把配置好的apple-app-site-association文件上传到你自己的服务器，确保通过https://mdiamonds.legendshop.cn/.well-known/apple-app-site-association可访问。

其中mdiamonds.legendshop.cn为上面配置的域名

应用安装后会通过访问上面的url向系统注册应用的通用链接

3、打包原生APP：

3.1、点击【发行】-->【云打包-打原生安装包】，如下图所示：