> mall4uni-bbc：uni代表uniapp，可发行为H5、小程序、android/ios app

## 1. 安装nodejs + 淘宝npm镜像

[NodeJS](https://nodejs.org/) 项目要求最低 18.12.0，推荐 20.9.0

如果不了解怎么安装nodejs的，可以参考   [菜鸟教程的nodejs相关](https://www.runoob.com/nodejs/nodejs-install-setup.html)



## 2. 安装依赖

项目要求使用 [pnpm](https://www.pnpm.cn/)  包管理工具

使用编辑器打开项目，在根目录执行以下命令安装依赖

```bash
pnpm install
```

如果不想使用 pnpm，请删除 `package.json` 文件中 `pnpm` 相关内容后再进行安装

```json
{
    "scripts" : {
        "preinstall": "npx only-allow pnpm"  // 删除此行
    },
    "engines": {
        "pnpm": ">=7"  // 删除此行
     },
    "pnpm": { // 删除此项
        ...
    }
}
```



## 3.修改配置文件，连接后台

> 在本文件所在的目录下有个`yami-shop/nginx/conf.d` 文件夹，里面有nginx的一些配置信息

修改 `.env.production`  连接后台。

* `VITE_APP_MP_APPID` ：微信公众号appid
* `VITE_APP_URL_SCHEMES`：App标识，用于跳转应用

- `VITE_APP_BASE_API` ： `mall4uni-bbc` 这个项目连接的是`api.jar`提供的接口
- `VITE_APP_WS_IM_API` :  当然他们还需要与用户进行客服消息通讯，所以也要连接`websocket`,访问`wukongim`中间件提供的ws端口
- `VITE_APP_H5_DOMAIN`：域名地址配置-用于分享时跳转链接
- `VITE_APP_RESOURCES_URL` :  当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址
- `VITE_APP_MERCHANT_PLATFORM_URL`：商家端后台地址，引导用户入驻成为商家
- `VITE_APP_MAP_KEY`：天地图Key，用于地图相关功能



```bash
# 如需添加更多环境变量，请以 VITE_APP_ 开头声明
# 在代码中使用 import.meta.env.VITE_APP_XXX 获取指定变量

# 环境配置标识
VITE_APP_ENV = 'production'

# 微信公众号appid
# 注意此处为微信 公众号appid，不是小程序appid
# 小程序appid在 manifest.json 文件的 mp-weixin.appid 字段中配置
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'

# h5或其它app打开当前App的自定义UrlSchemes，还需要在manifest.json -> distribute -> app-plus -> android/schemes 与 ios urltypes  中进行配置 (二者需要一致)
VITE_APP_URL_SCHEMES = 'lanhaibbc'

# 统一接口域名
VITE_APP_BASE_API = 'https://b2b2c-api.mall4j.com'

# 客服webstock接口请求地址，https对应wss，http对应ws
VITE_APP_WS_IM_API = 'wss://b2b2c-im.mall4j.com'

# 移动端域名地址配置
# 需要配置到 微信公众号后台 JS安全域名
# 用于微信公众号页面调用微信接口能力、生成分享二维码链接等
VITE_APP_H5_DOMAIN = 'https://h5.mall4j.com'

# 图片域名
VITE_APP_RESOURCES_URL = 'https://img.mall4j.com/'

# 商家管理后台地址
VITE_APP_MERCHANT_PLATFORM_URL = 'https://b2b2c-multishop.mall4j.com'

# 天地图Key （应用类型：浏览器端）用于地图相关功能
VITE_APP_MAP_KEY = ''

```



### 如需部署在二级目录下，需要修改以下配置

假设部署在 h5 目录，即访问的地址为 https://xxxx.xxx/h5

1. 项目配置  `manifest.json` 修改h5节点配置

   ```json
   {
   	"h5": {
   		"router": {
   			"base": "/h5/"
   		}
   	}
   }
   ```

2. nginx 配置

   ```
   location /h5 {
       try_files $uri $uri/ /h5/;
   }
   ```



## 4. 对不同项目的配置

uniapp项目是兼容多端的，所以不同的端要有不同的配置

#### 4.1微信公众号

> h5会分为两种，一种是在微信上打开的h5页面，一种是在浏览器打开的h5页面。在微信打开的h5页面，是需要公众号服务的，其中的微信支付，是jsapi支付。在手机浏览器打开的，是h5支付，属于不同的范畴。

在进行公众号打开页面的时候，因为需要进行微信公众号支付，还有微信公众号的登陆授权，所以需要配置微信公众号的appid

修改`.env.production`

```bash
# 微信公众号appid
# 注意此处为微信 公众号appid，不是小程序appid
# 小程序appid在 manifest.json 文件的 mp-weixin.appid 字段中配置
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
```

#### 4.2 小程序

对于小程序，需要配置小程序的appid

修改 `src/manifest.json`  mp-weixin 节点下 appid 

```json
"mp-weixin" : {
	"appid" : "小程序id"
    ...
}
```



## 5. 发行

#### 5.1 微信公众号or h5 发行



1. hbuilder开发工具上面的菜单选择：`发行-> 网站-H5手机版`，或使用命令行  `npm run build:h5`  编译

   编译完成后可在控制台找到输出路径

2. 将步骤1中生成的文件夹中的文件，压缩，上传到服务器nginx指定好的目录(`/nginx/conf.d/b2b2c-h5.conf` )，解压



```nginx
    location / {
        # vue的 history 模式需要
        try_files $uri $uri/ /;
        # h5的路径存放到这里 C://bbc-shop/html/b2b2c-h5
        # 该路径就是服务器的物理路径
        root C://bbc-shop/html/b2b2c-h5;
        index index.html;
    }
```



#### 5.2小程序

下载安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)

* 通过HBX 发布
  点击菜单  发行 ->  小程序-微信(仅适用于uniapp) ，编译完毕后会自动打开微信开发工具（若未自动打开请手动导入），在微信开发工具右上角点击上传，输入版本信息确认上传；

* 通过命令行发布

  使用终端运行

  ```bash
  npm run build:mp-weixin
  ```

  编译完成后打开微信开发工具导入 /dist/build/mp-weixin 项目，右上角点击上传，输入版本信息确认上传

注: 若小程序未开通直播功能或不需要直播功能，请参考 小程序移除直播  文档



#### 5.3安卓 ios打包

参考安卓ios打包的流程