fangq/mall4d-bbc

mall4uni-pro：uni代表uniapp，目前用作h5后面会让可以打包兼容小程序、android/ios app

安装nodejs + 淘宝npm镜像

nodejs版本请选择为 12-16 偶数版本

如果不了解怎么安装nodejs的，可以参考菜鸟教程的nodejs相关

将npm的镜像源更改为淘宝的镜像源，回车（千万不要用cnpm，否则会出现不可预知的后果）：

npm config set registry https://registry.npmmirror.com

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

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

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

修改utils/config.js

// 这里的appid是公众号的appid，不是小程序的appid也不是微信支付的appid
var mpAppId = 'wx42bbe857570c5b40'

修改manifest.json 在非源码视图，选择需要运行的模式，修改里面的参数，如修改微信小程序配置-微信小程序appid 从而运行微信小程序。

修改 /utils/config.js 连接后台。

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

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

那么开发环境的配置为

...
// =============== 开发环境 ===============
if (process.env.NODE_ENV === "development") {
  domain = "http://192.168.1.120:8086"
}
...

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

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

使用hbuilderx打开vue项目，进入到该项目的根目录（根目录有package.json 的文件）

使用npm安装依赖（请记得配好淘宝的镜像源，除非你能确定你的网络能够畅快访问外网，另外千万不要用cnpm），使用命令行输入，回车：

npm i

注：若安装依赖失败出现以下错误

ERROR: Failed to set up Chromium r901912! Set “PUPPETEER_SKIP_DOWNLOAD“ env variable to skip download.

执行

npm set PUPPETEER_SKIP_DOWNLOAD true

npm i

使用hbx

h5:

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

小程序:

运行到小程序的前提是，你已经下载好了微信开发者工具

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

使用vsCode

h5:

npm run serve

小程序

npm run dev:mp-weixin

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