fangq/mall4d-bbc

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

1. 安装nodejs + 淘宝npm镜像

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

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

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

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

2. 安装依赖

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

使用npm安装依赖，使用命令行输入，回车：

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

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

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

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

domain ： mall4uni-bbc 这个项目连接的是api.jar提供的接口
imDomain、imWsDomain : 当然他们还需要与用户进行客服消息通讯，所以也要连接im.jar提供的接口和websocket
picDomain : 当然他们还要访问七牛云 or 阿里云的图片，也是需要对应的域名地址

domainAddress：域名地址配置-用于分享时跳转链接

// 配置文件
var domain = "https://b2b2c-api.mall4j.com"; //统一接口域名，正式环境
var imDomain = "https://b2b2c-im.mall4j.com"; //统一接口域名，正式环境
var imWsDomain = "wss://b2b2c-im.mall4j.com"; //统一接口域名，正式环境


// 域名地址配置-用于分享时跳转链接
var domainAddress = 'https://h5.mall4j.com'

var picDomain = "https://img.mall4j.com/"; //图片域名

4. 对不同项目的配置

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

4.1微信公众号

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

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

修改utils/config.js

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

4.2 小程序

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

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

5. 发行

5.1 微信公众号or h5 发行

hbuilder开发工具上面的菜单选择：发行-> 网站-H5手机版，hbuilder打包完毕之后会有导出h5成功，路径为：xxx

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

location / {
    # vue的 history 模式需要
    try_files $uri $uri/ /;
    # h5的路径存放到这里 /usr/share/nginx/html/b2b2c-h5
    # 1.如果是docker部署的nginx，那么这个路径是docker里面的路径，
    # 服务器上的物理路径应该是 在docker-compose下的mall4j-nginx映射下 “./nginx/html:/usr/share/nginx/html” 也就是docker-compose的相对路径下的nginx/html文件夹
    # 2. 如果是非docker部署，就是服务器的物理路径
    root /usr/share/nginx/html/b2b2c-h5;
    index index.html;

    #### kill cache
    # 这里要清除缓存，不然微信会缓存首页，如果首页更改了代码，用户不清除微信缓存是获取不到新代码的
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}

5.2小程序

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

hbuilder开发工具上面的菜单选择：发行-> 小程序-微信
通过微信开发者工具，将发行的代码上传到微信的服务器

5.3安卓 ios打包

参考安卓ios打包的流程

4.mall4uni-bbc项目的搭建.md 4.6 KB Permanentný odkaz História Raw