> 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. 对不同项目的配置

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



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

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

修改`.env.development`  

```bash
# 微信公众号appid
VITE_APP_MP_APPID = 'wx42bbe857570c5b40'
```



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

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

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

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



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

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

假设你的服务器ip为`192.168.1.120`，也就是说你运行java项目的那台机器的开发环境，打开`cmd` 输入`ipconfig` 按回车的时候，看到的ipv4地址为`192.168.1.120` 当然这个ip也是假设的。

假设`java`运行的端口，也就是`ApiApplication`运行的端口是`8086` ，具体请看java项目中的application-dev.yml

那么开发环境的配置为

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

# 统一接口域名
VITE_APP_BASE_API = 'http://192.168.1.120:8086'

```



## 前端本地地址

修改`manifest.json` 里面的`port`，可以改前端h5启动的端口

```json
    "h5": {
        "devServer": {
            "port": 80
        },
    }
```



## 运行

**使用hbx**

h5: 

hbuilder开发工具上面的菜单选择：`运行-> 运行到浏览器 -> chrome`


小程序:

运行到小程序的前提是，你已经下载好了 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)

hbuilder开发工具上面的菜单选择：`运行-> 运行到小程序模拟器 -> 微信开发者工具`



**使用vsCode**

h5: 

```bash
npm run dev:h5
```

小程序

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

编译完成后通过 微信开发者工具 打开  dist/dev/mp-weixin 项目