微商来

环境搭建：

正式环境仅支持Linux

本地可以用Windows环境
在Windows环境下，建议开发者使用phpStudy环境套件，下面引用官方的介绍： 该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序绿色小巧简易迷你仅有32M，有专门的控制面板。总之学习PHP只需一个包。
对学习PHP的新手来说，Windows下环境配置是一件很困难的事；对老手来说也是一件烦琐的事。因此无论你是新手还是老手，该程序包都是一个不错的选择。
全面适合 Win2000/win7/win8/win2008 操作系统 ,支持Nginx。
新特征：完美支持win10，支持自定义php版本
Linux环境
在Linux环境下，可使用宝塔面板，该面板使用起来简单，功能强大。
安装宝塔面板

• 安装php
• 安装nginx
• 安装mysql
• 安装redis扩展
• 安装swoole扩展

添加网站，同时创建数据库

上传项目到网站文件夹，修改nginx配置文件，添加以下配置

       location /wap/ {
			try_files $uri $uri/ /wap/index.html;
		}
		location /clerk/ {
			try_files $uri $uri/ /clerk/index.html;
		}
		location /qlapi/ {
		  proxy_pass https://qlkefu.com/; #代理的域名
		  add_header 'Access-Control-Allow-Origin' '*';
		  add_header 'Access-Control-Allow-Credentials' 'true';
		}
		location /upload/ {

		}
		location ~ /\.ht {
			 deny  all;
		}
		location / {
		if (!-f $request_filename) {
		  rewrite  ^(.*)$  /index.php?s=/$1  last;
		  break;
		}
		index  index.html index.htm index.php;
		#autoindex  on;
		}

添加之后如图所示：

之后就可以访问并安装网站了

推荐您选择：

这里提供宝塔的安装教程：

新系统安装教程.doc

目录结构：

    ├─addons                插件目录
    │  ├─index              模块目录
    │  │  ├─controller      控制器目录
    │  │  ├─model           模型目录
    │  │  ├─service         服务层目录
    │  │  ├─template        视图目录
    │  │  │  ├─admin        店铺端视图目录
    │  │  │  └─platform     平台端视图目录
    │  │  ├─config.php      模块配置文件
    │  │  └─Index.php       插件入口文件
    │  ├─Addons.php         插件基类文件
    │  └─ ...               更多插件目录
    ├─application           应用目录
    │  ├─admin              店铺端目录
    │  │  └─controller      控制器目录
    │  ├─behavior           系统行为目录
    │  ├─cli                命令行任务目录
    │  │  └─controller      控制器目录
    │  ├─lang               语言包目录
    │  ├─platform           平台端目录
    │  │  └─controller      控制器目录
    │  ├─shop               PC端目录
    │  │  └─controller      控制器目录
    │  ├─wapapi             WAP端目录
    │  │  └─controller      控制器目录
    │  ├─wapstore           WAP门店端目录
    │  │  └─controller      控制器目录
    │  ├─command.php        命令行工具配置文件
    │  ├─common.php         应用公共（函数）文件
    │  ├─config.php         应用（公共）配置文件
    │  ├─database.php       数据库配置文件
    │  ├─error_message.php  变量定义文件
    │  ├─route.php          路由配置文件
    │  └─tags.php           应用行为扩展定义文件
    ├─clerk                 店员端静态资源存放目录
    ├─data                  公共目录
    │  ├─extend             扩展类库目录（可定义）
    │  ├─model              模型目录
    │  └─service            服务层目录
    ├─public                WEB部署目录（对外访问目录）
    │  ├─addons_status      保存插件权限目录
    │  ├─admin              店铺端静态资源存放目录(css,js,image,lib)
    │  ├─platform           平台端静态资源存放目录(css,js,image,lib)
    │  ├─static             静态资源存放目录
    │  ├─demo.xls           商品助手的示例文件
    │  ├─demo.zip           商品助手的示例文件
    │  └─router.php         快速测试文件
    ├─runtime               应用的运行时目录（可写，可设置）
    ├─template              视图目录（对外访问目录）
    │  ├─admin              店铺端
    │  ├─clerk              店员端
    │  ├─Pay                支付
    │  ├─platform           平台端
    │  ├─public             静态资源存放目录
    │  ├─shop               PC端
    │  └─wap                WAP端
    ├─thinkphp              ThinkPHP5.0.7框架系统目录
    ├─vendor                第三方类库目录（Composer）
    ├─wap                   WAP端静态资源存放目录
    ├─alipay.php            后台购买增值应用入口文件
    ├─alipays.php           后台购买增值应用入口文件
    ├─cli.sh                命令行文件
    ├─index.php             入口文件
    ├─think                 命令行入口文件
    ├─weixinpay.php         微信支付入口文件

系统默认路由：

系统安装：

访问域名地址进入安装界面。

安装中，建议不要关闭页面或者关闭浏览器，如关闭了，等待几分钟再访问后台地址。

安装完成，输入刚才填的管理员账号和密码登录

添加定时任务：

（1）解压文件：定时任务添加教程.rar。
1-1打开下面图的每个文件。

1-2将下面图每个文件的以下两个框框路径改为自己项目目录路径。

1-3打开下面图每个文件。

1-4 将下面图的框框里面的域名改为自己的域名。

（2）通过ftp工具去到：/var/spool/cron。
（3）将图5中的每个文件复制到：/var/spool/cron，将/var/spool/cron目录用户和组改为root，将每个文件（除了www文件）用户和组改为www，权限都改为777。

（4）将图6的sectask目录放到 项目根目录 中，将权限递归更改为www:www 777。

4-1：打开sectask目录。

4-2：将图7的两个文件打开，按照图8框框的所示将路径改为自己项目的路径。

5）打开终端，重启定时任务：service crond restart。
注意：如果发现不生效，则执行下面命令:
1、vi /etc/passwd
2、将www:x:1000:1000:: /dev/null:/sbin/nologin 改为： www:x:1000:1000::/home:/bin/bash

框架默认有以下模板替换变量：

路径变量：

店铺端变量：

平台端变量：

上传文件路径变量：

注意事项：

1.清理数据库数据时保留主键自增,以免新旧数据冲突

店铺端开发：

命名规范请参考ThinkPHP5.0文档。
店铺端的控制放在店铺端目录下的controller文件夹下。

    ├─application               应用目录
    │  ├─admin                  店铺端目录
    │  │  └─controller          店铺端控制器目录
    │  │  │  ├─Index.php        店铺端控制器，控制器名为首字母大写的驼峰式，可以建立其他控制器

在 Index.php 的代码如下:

店铺端的服务层文件放在公共目录下的service文件夹下，接口共用。

    ├─data                       公共目录
    │  └─service                 服务层目录
    │  │  ├─Goods.php            服务层，服务层名为首字母大写的驼峰式，可以建立其他服务层

在 Goods.php 的代码如下:

店铺端的模型文件放在公共目录下的model文件夹下，接口共用。

    ├─data                       公共目录
    │  ├─model                   模型目录
    │  │  ├─VslGoodsModel.php    模型，模型名为首字母大写的驼峰式，可以建立其他模型

在 VslGoodsModel.php 的代码如下:

店铺端视图：

店铺端的页面放在template目录下的admin文件夹下。

店铺端的页面静态资源放在public目录下的admin文件夹下。

添加左侧菜单视图：

登录平台端 系统 》店铺模块 添加模块。

填写对应的控制器、方法名、URL。

视图放在第三级，如下添加:

开发举例:

在店铺端控制器添加方法，然后template目录下对应路径添加html如下:

ajax请求接口url:

    url:__URL(ADMINMAIN + "/goods/GoodsCreateOrUpdate")
    url:__URL(ADMINMAIN + '/控制器名/方法名')

默认js变量值:

店铺端开发：

命名规范请参考ThinkPHP5.0文档。
店铺端的控制放在店铺端目录下的controller文件夹下。

    ├─application               应用目录
    │  ├─admin                  店铺端目录
    │  │  └─controller          店铺端控制器目录
    │  │  │  ├─Index.php        店铺端控制器，控制器名为首字母大写的驼峰式，可以建立其他控制器

在 Index.php 的代码如下:

店铺端的服务层文件放在公共目录下的service文件夹下，接口共用。

    ├─data                       公共目录
    │  └─service                 服务层目录
    │  │  ├─Goods.php            服务层，服务层名为首字母大写的驼峰式，可以建立其他服务层

在 Goods.php 的代码如下:

店铺端的模型文件放在公共目录下的model文件夹下，接口共用。

    ├─data                       公共目录
    │  ├─model                   模型目录
    │  │  ├─VslGoodsModel.php    模型，模型名为首字母大写的驼峰式，可以建立其他模型

在 VslGoodsModel.php 的代码如下:

店铺端视图：

店铺端的页面放在template目录下的admin文件夹下。

店铺端的页面静态资源放在public目录下的admin文件夹下。

添加左侧菜单视图：

登录平台端 系统 》店铺模块 添加模块。

填写对应的控制器、方法名、URL。

视图放在第三级，如下添加:

开发举例:

在店铺端控制器添加方法，然后template目录下对应路径添加html如下:

ajax请求接口url:

    url:__URL(ADMINMAIN + "/goods/GoodsCreateOrUpdate")
    url:__URL(ADMINMAIN + '/控制器名/方法名')

默认js变量值:

平台端开发：

命名规范请参考ThinkPHP5.0文档。
平台端的控制放在平台端目录下的controller文件夹下。

    ├─application               应用目录
    │  ├─platform               平台端目录
    │  │  └─controller          平台端控制器目录
    │  │  │  ├─Index.php        平台端控制器，控制器名为首字母大写的驼峰式，可以建立其他控制器

在 Index.php 的代码如下:

平台端的服务层文件放在公共目录下的service文件夹下，接口共用。

    ├─data                       公共目录
    │  └─service                 服务层目录
    │  │  ├─Goods.php            服务层，服务层名为首字母大写的驼峰式，可以建立其他服务层

平台端的模型文件放在公共目录下的model文件夹下，接口共用。

    ├─data                       公共目录
    │  ├─model                   模型目录
    │  │  ├─VslGoodsModel.php    模型，模型名为首字母大写的驼峰式，可以建立其他模型

平台端视图：

平台端的页面放在template目录下的platform文件夹下。

平台端的页面静态资源放在public目录下的platform文件夹下。

添加左侧菜单视图：

登录平台端 系统 》系统模块 添加模块。

填写对应的控制器、方法名、URL。

视图放在第三级，如下添加:

开发举例:

在平台端控制器添加方法，然后template目录下对应路径添加html如下:

ajax请求接口url:

    url:__URL(PLATFORMMAIN + '/goods/goodsCreateOrUpdate')
    url:__URL(PLATFORMMAIN + '/控制器名/方法名')

默认js变量值:

PC端开发：

命名规范请参考ThinkPHP5.0文档。
PC端的控制放在PC端目录下的controller文件夹下。

    ├─application               应用目录
    │  ├─platform               PC端目录
    │  │  └─controller          PC端控制器目录
    │  │  │  ├─Index.php        PC端控制器，控制器名为首字母大写的驼峰式，可以建立其他控制器

在 Index.php 的代码如下:

PC端的服务层文件放在公共目录下的service文件夹下，接口共用。

    ├─data                       公共目录
    │  └─service                 服务层目录
    │  │  ├─Order.php            服务层，服务层名为首字母大写的驼峰式，可以建立其他文件夹和服务层

PC端的模型文件放在公共目录下的model文件夹下，接口共用。

    ├─data                       公共目录
    │  ├─model                   模型目录
    │  │  ├─VslOrderModel.php    模型，模型名为首字母大写的驼峰式，可以建立其他模型

PC端视图：

PC端的页面放在template目录下的shop文件夹下。

PC端的页面静态资源放在shop目录下的public文件夹下。

开发举例:

视图开发，在PC端控制器添加方法，然后template目录下对应路径添加html如下:

ajax请求接口url:

    url:__URL(SHOPMAIN + '/member/getcity')
    url:__URL(SHOPMAIN + '/控制器名/方法名')

默认js变量值:

WAP端开发：

命名规范请参考ThinkPHP5.0文档。
WAP端的控制放在pc端目录下的controller文件夹下。

    ├─application               应用目录
    │  ├─wapapi                 WAP端目录
    │  │  └─controller          WAP端控制器目录
    │  │  │  ├─Member.php       WAP端控制器，控制器名为首字母大写的驼峰式，可以建立其他控制器

在 Member.php 的代码如下:

WAP端的服务层文件放在公共目录下的service文件夹下，接口共用。

    ├─data                       公共目录
    │  └─service                 服务层目录
    │  │  ├─Order.php            服务层，服务层名为首字母大写的驼峰式，可以建立其他文件夹和服务层

WAP端的模型文件放在公共目录下的model文件夹下，接口共用。

    ├─data                       公共目录
    │  ├─model                   模型目录
    │  │  ├─VslOrderModel.php    模型，模型名为首字母大写的驼峰式，可以建立其他模型

开发举例:

请求接口url:

    url:http://domain/wapapi/Member/memberIndex
    url:http://domain/wapapi/控制器名/方法名

插件开发：

开发的sql文件直接加入数据库。在addons目录下新建文件，如下：

   ├─bargain            模块目录
   │  ├─controller      控制器目录
   │  ├─model           模型目录
   │  ├─service         服务层目录
   │  ├─template        视图目录
   │  │  ├─admin        店铺端后台视图目录
   │  │  └─platform     平台端后台视图目录
   │  ├─config.php      模块配置文件
   │  └─Bargain.php     模块函数文件，安装变量设置

在插件入口文件bargain》Bargain.php添加参数，填写完可在平台端后台进行安装。

添加插件info信息：

添加插件左侧菜单menu_info信息：

添加需要的钩子，钩子共用平台端和店铺端，注意安装之后添加的钩子，需要重新卸载安装。

然后添加平台端和店铺端请求链接。

最后添加安装卸载方法。

到平台端应用就看到你所新建的插件，安装完成即可下一步插件文件开发，安装如下：

插件控制器：

命名规范请参考ThinkPHP5.0文档。
插件的控制文件放在插件目录下的controller文件夹下。

插件模型：

插件的模型文件放在插件目录下的model文件夹下。

插件服务层：

核心处理都在服务层，插件的服务层文件放在插件目录下的service文件夹下。

插件视图：

插件的视图文件放在插件目录下的template文件夹下，分别为platform平台端、admin店铺端。

调用钩子：

hook('updateOrderMicroShop', ['order_id' => $orderid, 'website_id' => $websiteid]);
hook('updateOrderMicroShop', [传所开发需要的参数);

WEB前端调用插件接口：

POST:/wapapi/addons/execute/addons/bargain/controller/bargain/action/getBargainList
POST:/wapapi/addons/execute/addons/插件名/controller/插件名/action/方法名

介绍

• 本文档介绍商城前端项目，包含所有移动平台，h5（含微信公众号），小程序（微信小程序），app（ios，安卓）。基于uni-app实现。
• 本项目所有的请求接口由微商来api提供。
• 本项目主要针对微商来商城业务，不适用其他商业项目。
• 本文档用于相关技术人员阅读，方便开展二次开发。

环境要求

• node版本: >= 6.0.0
• npm版本: >= 3.0.0
• vue-cli: >= 3.0.0 (全局安装 npm install -g @vue/cli)
• HBuilderX 版本: >= 3.1.2 ，v3编译器（项目需开启v3编译）

编辑器可选 HBuilderX/vscode

项目配置文件

• 项目src目录config文件填写开发/生产环境配置
• h5平台解决开发环境跨域问题：在manifest文件填写devServer相关代理信息即可
• 同级目录下ext.json 为微信第三方平台配置文件（编译成小程序代码时，小程序代码目录也是会存在该文件）

h5开发解决浏览器跨域

项目配置项

NAME: "shopvslai",					// 项目名不修改（只有shopvslai或shopdds）
VERSION: versionName,				// 开发版本号（读取manifest文件versionName）
DOMAIN: "",							// 域名（请求接口使用，访问资源域名）
SUBDOMAIN: "",						// 二级域名/独立域名（客服连接时用到）
WEBSITE_ID: 1,						// 平台商户id（小程序，app端必填，h5端根据域名识别website_id
STATIC: "/public/app",				// 资源路径
BASE_API: "wapapi",					// 请求接口基础目录（根据项目修改）
AUTH_KEY: ""						// 请求接口授权码（后端提供）

• 可参考 提交小程序

运行项目

• 该项目通过cli脚手架创建
• 运行项目命令
• npm run dev:%PLATFORM%
• npm run build:%PLATFORM%
• 也可以使用官方HBuilderX打开项目，将目录src拖进编辑器即可

一般情况下除调试app，其他端 都应该用命令行执行编译，如使用 HBuilderX运行项目，如果通过cli有安装其他第三插件，HBuilderX运行时会报错

有开发app，不建议使用 npm 安装第三方插件，（使用npm安装，在BuilderX运行时也需重新安装）

可查看官方uniapp快速上手教程

├── App.vue  							// 入口组件
├── main.js 							// 入口文件 初始化等
├── pages.json							// 页面路由配置文件
├── manifest.json						// 应用的配置文件
├── config.json							// 项目配置文件
├── ext.json							// 微信小程序第三方配置文件
├── api									// 框架相关api封装
├── common								// 公共文件位置
│   ├── data							// 存放默认数据
│   ├── interface						// 项目全部接口地址，根据模块划分
│   ├── styles							// 样式文件
│   ├── utils							// 公共方法
│   │   ├── index.js 					// 合集
│   │   ├── auth.js 					// token相关验证存储
│   │   ├── navigate.js 				// 路由跳转拦截
│   │   ├── stringify.js 				// 格式化style对象跟class对象，转成string
│   │   ├── validator.js 				// 表单验证相关
│   │   ├── wx-sdk.js 					// 微信公众号sdk相关方法
├── components							// 公共组件
│   ├── custom							// 装修组件
│   ├── lk								// 公共组件（不需要注册）
│   └── mixin							// 组件注入方法集
├── mixins								// 公共注入
│   ├── pages.js						// 全局注入pages，设置每个页面基本参数
│   ├── share.js						// 分享方法（用于小程序、H5微信公众号页面分享）
│   ├── load-list.js					// 加载列表方法（配合load-list组件使用）
│   └── reform-load.js					// 加载装修列表（配合装修组件使用）
├── packages 							// 分包页面目录
├── pages 								// 主包页面目录
├── platforms 							// 存放各平台所需相关文件
├── static 								// 静态资源目录（不经过打包）
├── router								// 路由目录
├── store								// 全局store管理（根据模块应用划分文件）
	└── basic.js						// 基础状态

新增文件/目录

• 所有开发目录均在src里面创建，项目根目录所有文件为命令行构建项目所需
• 一般情况src目录下文件夹已全部划分好，无需重新创建新文件夹，根据业务所定

新增页面

• 区分主包跟分包：主包在pages文件夹，分包在packages文件夹
• 根据应用模块划分文件夹，在里面创建相关业务.vue/.nvue文件

微信小程序自定义tabbar，所以所有可能是tabbar的页面必须在主包pages下面，不可以在分包packages

新增组件

• 公共组件不需在项目中注册（其他组件需在每个页面注册引用），直接引用组件 <lk-button>按钮</lk-button>,默认前缀为lk（表示公司名称）
• 自定义组件分商城装修组件跟自定义表单组件（商城装修组件可搭配reform-load方法使用，用于实现数据懒加载）
• 新增公共组件在components文件夹下新建，创建与组件同名目录，目录名称与组件名称一致
• 页面组件在当前页面下创建components目录，创建对应组件即可
• 组件命名注意语义化，以-划分，不要驼峰命名；如（cell-tag.vue,tab-popup.vue）...

新增api方法调用

• api文件夹一般二次封装官方uni相关api
• 建议把常用的uni相关api封装到此目录，如：
• navigate.js用于拦截路由跳转；
• prompt.js用于提示弹窗；
• requset.js用于请求接口；
• storage.js 用于存储数据；
• uploadFile.js 用于请求上传文件上传图片相关接口；
• media.js 调起设置媒体相关
• plugins.js 调用第三方服务
• ...

新增状态（store存储）

• store目录 为vuex状态处理
• basic为项目基础项
• modules文件夹为项目相关状态存放位置，根据业务逻辑划分文件

新增请求接口

• common/interface 目录一般存放请求接口位置（根据应用模块划分文件）

新增公共方法

• common/utils 目录一般存放公共方法类
• static 文件夹 存放静态资源 js文件夹一般存放第三方或者其他js（static不经过编译）

新增样式/图片

• common/styles 目录一般存放请求接口位置（根据应用模块划分文件）
• static 文件夹 存放静态资源 css文件夹一般存放第三方或者其他js,images存放本地图片（static不经过编译）

编辑器代码风格

• 建议遵守prettier风格
• 设置tabsize 为 2
• 每行末尾添加分号
• 双引号包裹字符串
• 函数(名)和后面的括号之间加个空格

组件选项的顺序

• 建议以此排序

export default {
  name: '',
  data() {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  onLoad() {},
  created() {},
  onShow() {},
  mounted() {},
  destroyed() {},
  onHide() {},
  methods: {},
  components: {}
};

组件数据

• 组件的 data 必须是一个函数。

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

组件方法命名

• 组件的 methods，命名建议为驼峰式命名法，getList(),setList()...
• 命名建议语义化，on开头表示监听，get表示获取，set表示设置...

组件文件名称

• 单文件组件的文件名 (kebab.vue)
• 组合名（横线连接）(kebab-case.vue)
• 组合名（横线连接）(kebab-case-a.vue)

• 组合名组件引用时的命名
• 推荐 <kebab></kebab>
• 推荐 <kebab-case></kebab-case>
• 推荐 <kebab-case-a></kebab-case-a>
• 自闭合组件 <kebab/>

slot内容分发

• slot name值 命名 建议全部使用驼峰式命名 如 headerInfo
• 如果使用header-info 则小程序可能识别不了name值，导致slot失效（可能属于官方框架问题）

<slot name="headerInfo"></slot>

<kebab slot="headerInfo"></kebab>

Prop 名大小写

export default {
  props: {
    greetingText: String
  }
}

<welcome-message greeting-text="hi" />

Props 换行

<welcome
  foo="a"
  bar="b"
  baz="c"
>

Props 顺序

• 标签的 Props 应该有统一的顺序，依次为指令、属性和事件

<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>

接口命名

• 建议全部大写，语义化命名开头 以 _ 分隔 ，后面加上该接口名称

export function GET_CONFIG(data = {}, config = {}) {
  return $Request({
    url: "",
    data,
    ...config
  });
}

页面（pages）说明

• router/routes 文件是全部路由对象，以pages name值为key
• 路由元素meta 下的属性说明：（只举例常用的属性）

路由管理 跳转方法 尽可能的接近vue-router的一些功能

"pages-mall-index": {
    path: "/pages/mall/index",
    name: "pages-mall-index",
    meta: {
      name: "pages-mall-index",
      pagePath: "pages/mall/index",
      addon: '',
      noLogin: true
    },
    title: "商城首页"
  },

跳转说明

• 项目所有路由跳转建议使用 api/navigate.js 方法进行跳转,该方法进行了拦截是否登录状态以及处理一些业务逻辑，一般情况不建议直接使用uni.navigate。组件目录下相关组件跳转方法也是用封装好的$Navigate方法跳转；
• navigate方法已处理好一些业务逻辑，如跳转tabbar页面 需用到pushTab，push也可以进行跳转tabbar；

调用方法

• $Navigate 方法 已在入口文件main.js 赋值到vue，每个组件通过this.$Navigate 方法调用 路由跳转方法；
• 非组件文件 可直接引入 api/navigate.js 调用其方法；

跳转方法（method）：（等同于官方跳转方法）

• $Navigate.push ==> uni.navigateTo
• $Navigate.replace ==> uni.redirectTo
• $Navigate.replaceAll ==> uni.reLaunch
• $Navigate.pushTab ==> uni.switchTab
• $Navigate.back ==> uni.navigateBack

跳转示例

• 字符串跳转： $Navigate.push('/pages/router/router1')
• 对象跳转： $Navigate.push({path:'/pages/router/router1'})
• 带参跳转：

• 1: $Navigate.push({path:'/pages/router/router1', query: { a: '1'}})
• 2: $Navigate.push('/pages/router/router1?a=1&b=1')

跳转时的pages或者packages 必须带上

h5端

• h5端 微信环境 ，进入商城，默认是自动授权登录
• h5端 非微信环境，可正常进入商城，一旦进入需要登录的路由（路由管理 noLogin 为true 表示不需要登录，默认为false，表示需要登录），会自动拦截跳转到商城登录页面
• h5端 非微信环境，登录页面需要用户输入账号密码进行登录

小程序端

• 可正常进入商城，一旦进入需要登录的路由（路由管理 noLogin 为true 表示不需要登录，默认为false，表示需要登录），会自动拦截跳转到商城登录页面
• 登录页面不需要用户输入账号密码，点击授权登录即可

app端

• 可正常进入商城，一旦进入需要登录的路由（路由管理 noLogin 为true 表示不需要登录，默认为false，表示需要登录），会自动拦截跳转到商城登录页面
• 登录页面 需要 用户输入账号密码，有配置微信第三方登录可以微信授权登录

所有端口登录时候，会获取是否有存在推广码跟海报相关参数，有的情况下会带上参数给到接口

h5公众分享，小程序分享

• mixins/share 是处理分享业务的文件
• 该文件为全局注入，每个页面均可分享和自定义分享，包括小程序端（不包含app）

默认分享

• 根据当前的路由配置 shareType 判断分享的页面，current 为 分享当前页面
• 小程序分享，跟分享朋友圈 是生命周期onShareAppMessage，onShareTimeline，return 返回对应参数
• 分享参数可通过 vuex => getters => shareParams 获得
• 具体分享参数如下（真正传给微信分享的api参数只有title,link,imgurl,desc）,其他参数业务需要

自定义分享

• 通过在页面上调用 setWxShare 方法，传入需要修改的参数即可
• 如：this.setWxShare({title:'修改分享标题'})，只修改了分享标题
• this.setWxShare({query:{a:1}})，传入query，分享时会在链接上拼接上query的参数

说明

• 绑定关系指的是 分销商分享商城页面，别人进去商城，从而进行绑定上下级关系
• 商城所有页面均可进行分享，包括小程序端（查看分享说明），只要是分销商 分享出去都会携带相关参数出去，别人通过分享链接进入，路由会处理获取相关分享参数
• 全局注入pages.js，生命周期onLoad 下进行处理

h5微信环境场景

• 全局注入pages.js，生命周期onLoad 获取参数extend_code（分销推广码），并通过commit('setSceneCode') 储存推广码，判断登录情况是否进行绑定关系。登录情况下，通过dispatch("extendSub")进行绑定；未登录情况，进行操作登录操作时，才去通过dispatch("extendSub")进行绑定，携带相关参数提交到后台接口。

小程序分享卡片场景

• 同h5微信环境处理一样

小程序太阳码场景

• 生命周期onLoad 获取参数 scene （太阳码场景值），需通过dispatch("getMpCodeScene"）进行解析分享参数，得到extend_code（分销推广码），并通过commit('setSceneCode') 储存推广码，有可能解析得到海报参数poster_id，poster_type，这时候通过commit('setSharePosterParams') 储存海报参数。登录情况下，通过dispatch("extendSub")进行绑定；
• 未登录情况，进行操作登录操作时，才去通过dispatch("extendSub")进行绑定，如有海报参数需要机芯dispatch("extendSub")时候会自动带上海报参数；
• 注意：小程序太阳码场景，解析参数是异步进行的，这时候页面上onLoad生命周期可能会获取不到相关页面参数，这时候获取页面参数应该在methods下的callLoad 方法获取（具体可参数代码，商品详情页面 goods/detail）

账号体系说明

• 指的是后台设置的账号体系，看是否需要绑定手机号，还是不需要绑定手机号
• 通过 vuex => getters => isBingFlag 获得 是否需要绑定手机状态（状态已处理好账号体系判断）
• 如果 isBingFlag 为 true ，则进行 用户操作时需要去绑定手机（h5端跟app端弹出绑定手机好的窗口，小程序端弹出微信默认获取手机号的弹窗；公共组件已处理好相关业务逻辑，组件传入bing-mobile 即可）

store 状态说明

• 只举例全局基础状态说明，其他状态查看代码理解
• 根据各个应用模块划分文件 存放 modules 文件夹

basic 基础状态

• 配置项目基本状态存储
• state跟getters属性说明：（只举例常用的）

获取商城配置信息

• 可以通过 vuex => state => config 获得
• 也可以调用方法获得 ，在页面上 this.getConfig() 异步获取
• 一般所有商城接口都会返回在正确返回里面带上config参数

GET_GOODSLIST().then((res)=>{
	const config = res.config; // 商城配置
	const data = res.data; // 接口数据
})

获取用户信息

• 可以通过 vuex => state => member => info 获得
• 也可以调用方法获得 ，在页面上 this.getMemberInfo() 异步获取

说明

• api/requset跟api/uploadFile 文件是封装的请求方法
• 非特殊情况项目所有请求都经过次方法
• 处理了项目上一些业务拦截以及提示
• 返回状态码 为负数情况均会弹出提示框，noShowMessage为true的接口不显示错误提示

请求公共参数说明

请求配置（config）参数说明

• interface 请求接口地方传入相关参数，也可以在页面上请求接口时带上

说明

• 由于公共组件过多，只有部分组件才有举例说明，其他组件请参考代码
• 部分组件与业务相关联

名称	描述	场景	样式
area-picker	省市区弹窗	用于表单，选择区域
avatar	头像组件	显示用户头像
badge	红色标记数值	用于icon上或者图片右上角显示红色标记
barrage	弹幕组件	弹幕应用的业务组件
bind-mobile	绑定手机弹窗	用于h5端，app端全局绑定手机的弹窗
button	按钮组件	(重要) 按钮组件封装了各端绑定手机相关业务，以及封装小程序开放能力
calendar	日历组件	暂只用于签到中心
category-nav	分类导航组件	左侧固定分类，右侧根据左侧选择的显示不同的内容，用于商品分类等
cell	单元格组件	(常用) 用于信息展示
cell-account-item	展示账户信息的组件	基于cell组件二次封装的组件，用于账户列表
cell-add-wxcard	公众号端显示加入微信会员卡组件	基于cell组件二次封装的组件，处理了相关业务，用于需要触发加入微信会员卡的场景
cell-full-cut	展示满减送信息的组件	目前用于购物车列表商品下方，跟确认订单商品下方
cell-image-panel	展示图片组的组件	横向展示小图（5张小图），点击图片可预览大图
cell-info-list	展示列表信息的组件	目前用于确认订单，订单详情等区域显示相关信息
cell-picker-group	选择器组件	基于cell跟官方组件picker二次封装的选择器组件，用于表单选择相关业务
cell-withdraw-account-popup	提现账户组件	基于cell跟popup二次封装的选择提现账户的组件，用于提现相关业务，处理了相关业务逻辑
checkbox	复选框组件	用于表单，搭配checkbox-group一起使用
checkbox-group	复选框组组件	用于表单搭配checkbox一起使用
choice-address	选择地址组件	封装的选择地址，处理了获取地址列表，目前用于确认订单现在收货地址等
circle-progress	圆形进度条组件	目前用于领券中心显示领券进度
count-down	倒计时组件	显示倒计时，获取了服务器时间
credential-group	授权证书组件	分销跟分红等应用的相关授权证书
empty	空布局组件	无数据是显示空数据的组件
field	输入框组件	(常用) 用于表单输入
field-areacode	输入框加国际区号组件	基于field二次封装的组件，输入框，可选择国际区号
field-msgcode	输入验证码组件	基于field二次封装的组件，输入框右侧显示发送验证码按钮，处理了发送验证码相关业务
floater-kefu	客服浮层	小程序端客服浮层按钮，带图片，点击到小程序客服聊天
goods-box	商品信息组件	(常用) 展示商品信息，用于装修组件，商品列表等（拓展性强）
goods-card	商品信息组件（卡片式）	卡片式展示商品信息，用于展示订单商品等（拓展性强）
goods-info-panel	商品信息面板	展示商品信息，用于商品详情，更多详细信息
grid-panel	类似九宫格面板	用于会员中心等地方
header-panel	头部展示用户信息的组件	用于会员中心等地方
icon	图标组件	(常用) 封装的图标组件
invite-wechat	关注公众号组件	用于微信公众号端显示关注的信息
line-progress	线性进度条组件	展示进度
live-box	直播盒子组件	展示直播信息的组件，9:16比例
load-list	列表加载组件	(常用) 封装的列表加载组件，搭配mixins下的load-list.js 使用（用于基于页面的加载列表）
load-list-view	列表加载组件	封装的列表加载组件，搭配mixins下的load-list.js 使用；区别是不监听页面的滚动，使用的是scroll-view滚动（用于固定视图内的加载列表）
loading	加载动画组件	加载列表时显示的动画组件
modal-pay-password	支付密码弹窗组件	用户需要弹出输入支付密码的场景，搭配mixins下的valid-pay-password.js 使用
navbar	顶部导航组件	自定义的导航组件，拓展性强，小程序端兼容刘海屏，可以搭配mixins下的navbar-style.js 使用 ，滚动时可变化颜色
notice-bar	跑马灯组件	目前用于装修组件
parser	富文本解析组件	解析富文本内容
pay-action-group	支付方式组件	可选择支付方式，根据后台配置生成多种支付方式，单选形式，用于收银台等场景
popup	弹出层组件	(常用)，用于多种场景，可拓展性强
popup-adv	弹出层广告图	基于popup二次封装的组件，用于弹出广告图使用
popup-bankcard-sms	银行卡输入短信弹窗	基于popup二次封装的组件，用于绑定银行卡业务弹出输入短信的场景
popup-coupon	优惠券弹层组件	基于popup二次封装的组件，展示优惠券列表
popup-set-pay-password	支付密码设置提示弹层	基于popup二次封装的组件，与modal-pay-password搭配使用
popup-store	选择门店弹层组件	基于popup二次封装的组件，展示门店列表
progress-bar	线性进度条组件	目前用于展示秒杀库存进度
radio	单选框组件	用于表单，搭配radio-group一起使用
radio-group	单选框组组件	用于表单搭配radio一起使用
reform-skeleton	装修骨架屏组件	用于装修数据未加载出来时候展示
result-state-panel	状态信息组件	用于展示各种状态
search	搜索框组件	输入搜索场景
shortcut-entry	快捷入口浮层	多个地方右下角浮层快捷入口
sku	商品规格sku组件	根据商品sku信息选择相关sku组
sku-actions	商品规格sku操作栏组件	根据商品sku信息和根据相关商品活动以及状态库存显示对应的操作按钮
star	评分组件	用于展示或者使用评分的场景
stepper	数量步进器	用于商品加减数量使用
steps	时间轴组件	用于展示时间顺序阶段的场景
submit-bar	提交操作栏组件	用于订单提交等场景
swiper	轮播图组件	基于官方组件swiper跟swiper-item封装的轮播图组件
tab	选项卡组件	用于切换tab栏，搭配tabs一起使用
tabs	选项卡组组件	用于切换tab栏，搭配tab一起使用
tabbar	底部菜单栏组件	自定义的底部菜单栏，用于h5端跟app端，小程序使用原生的tabbar
table	表格组件	用flex布局封装的表格组件
tag	标签组件	展示标签信息
upload	上传图片组件	封装了上传请求地址等相关逻辑
waterfall	瀑布流组件	用于展示不同高度的区块列表

说明

• 按钮组件基于官方 button 组件 封装 ， 小程序特有的 原生能力用这个组件也是可以调用的

Props （只列举部分参数）

说明

• 绑定手机号弹窗适用于 h5端 跟 app端，小程序端 使用 小程序自带获取手机号弹窗
• h5端 为全局组件，已经在main 赋值到vue原型对象上。$BindMobile

methods（h5端）

• 直接通过 this.$BindMobile 即可获取弹窗实例

• open：显示弹窗

• close：关闭弹窗

• 通过<lk-button bing-mobile/> 传入bing-mobile，点击时即可验证是否绑定过手机，进行拦截，调用this.$BindMobile.open()

methods（app端）

• 通过<lk-button bing-mobile/> 传入bing-mobile，点击时即可验证是否绑定过手机，进行拦截，路由跳转到/pages/member/bind，显示弹窗。关闭弹窗，使用路由返回方法即可

说明

• 提现账户弹窗，适用于提现相关操作，选择提现账户

Props （只列举部分参数）

是否显示微信账户

• 微信账户是跟自身会员授权过微信公众号或者微信小程序
• 通过获取会员信息 openid ，有则自动在提现列表加上一条微信账户

说明

• 加载列表组件（上拉刷新，下拉加载）

• 搭配mixins/load-list.js使用，页面注入mixin

• load-list 组件适用于页面级别的，下拉刷新 用的是框架自带的下拉刷新，性能比load-list-view好

• load-list-view 组件适用于组件级别的，需指定高度

Props （只列举部分参数）

event

event (load-list 方法)

说明

• 支付密码弹窗
• 搭配mixins/valid-pay-password.js使用，页面注入mixin
• 弹窗逻辑与后台商城设置密切相关，与后台设置的账号体系，后台是否开启支付密码，设置的密码长度，密码是否与当前会员密码长度一致 相关联
• 区块链钱包业务 支付密码弹窗也是使用这个组件，但是必须与后台设置的是否开启 无关，只要是区块链的钱包业务 操作，都是需要进行输入支付密码

Props （只列举部分参数）

methods

说明

• 商品sku 组件，用于商品选择sku，该组件逻辑业务比较复杂，涉及商品活动，商品类型，配合sku-action使用。

文档描述不清晰，请参数代码

Props （只列举部分参数）

methods

Props传入的info 默认参考数据

{
  goods_id: 0, // 商品id
  goods_image: "",// 商品图片
  goods_name: "",// 商品名称
  goods_type: 1,// 商品类型
  max_buy: 0,// 最大限购数
  max_market_price: "0",// 市场价
  max_price: "0",
  min_buy: 0,
  min_market_price: "0",
  min_price: "0", // 最小价格
  state: null,// 商品状态
  sku: { // sku
    list: [ // sku组合列表
      {
        group_limit_buy: "",// sku 拼团限购数
        group_price: "", // sku 拼团价格
        id: 0,// skuid
        market_price: "0",
        min_buy: 0,
        price: "0",// sku 价格
        s: [],
        sku_name: "",// sku 名称
        stock_num: 0  // sku 库存
      }
    ],
    tree: [ // sku 组合树
      {
        k: "",
        k_id: 0,
        v: [
          {
            id: 0,
            name: ""
          }
        ],
        k_s: ""
      }
    ]
  },
  is_allow_buy: true,  // 商品购买权限（为false不能购买）
  is_allow_browse: true, // 商品浏览权限（为false不能浏览该商品）
}

说明

• sku-action 底部按钮组 （包含各种营销活动状态，根据不同活动显示不同的按钮组）
• 一般配合sku使用

文档描述不清晰，请参数代码

Props （只列举部分参数）

methods

自行提交发布微信小程序代码

该文档适用于源码客户，需了解相关业务技术人员阅读

准备工作

• 电脑需安装微信开发者工具
• 微信小程序代码目录：public_html\template\wap-v3\dist\build\mp-weixin
• 确保已绑定微信小程序开发者
• 确保发布的微信小程序是否绑定微信开放平台
• 开发预览时需填写相关商城配置参数，域名以及独立域名，website_id

开始

1，启动微信开发者工具，选择小程序项目，导入项目，指向到微信小程序代码目录mp-weixin

2，填写项目名称（任意填写），填写小程序appid，输入完点击创建

3，创建完成，如下图（右侧会显示小程序基本信息，以及绑定的微信开放平台信息）

4，已经绑定微信开发平台情况，根目录ext.json配置文件生效，打开ext.json文件填写配置

• extAppid 必填（就是刚才创建项目的小程序appid）

以上步骤完成其实是可以提交发布小程序到微信开放平台，（因为最终这个ext.json文件是由小程序生成配置文件），可以直接查看 【上传提交】 部分。想要在工具上查看效果，须填写商城配置参数，填写完可用手机预览。

5，填写ext项 配置参数

• project_name：商城项目名称，一般不填写，已有默认名称
• auth_key：授权码，源码客户的授权码，一般不填写，代码已默认
• domain：商城域名，必填，如：https://shop.vslai.com.cn
• domain_wap：商城二级域名，必填，如：https://shop438434.vslai.com.cn （没有的话填写商城域名）
• website_id：平台id，后台系统可查看，必填

6，如工具上显示的底部tabbar有空格，说明后台装修时候跟现在调试的tabbar数量不一致导致的，查看后台装修tabbar数量，ext.json的tabbar 删除对应的其中一项即可

上传提交

1，点击右上交上传按钮

2，确认之后显示填写版本，项目备注（版本号会自动叠加，项目备注自行填写）

3，点击上传，等待上传成功。

4，上传成功这时候是转到微信开放平台草稿箱，前往微信开放平台转成模板

5，查看对应第三方开放详情，点击添加到模板库，切换到模板库可查看信息

后台系统提交发布小程序

1，前往后台系统，小程序管理

2，可先发布体验版，扫左侧二维码进行体验，这时候体验的模板就是微信开放平台模板库的最新模板

3，确保体验版后可发布提交正式版本（如提示是否发布有无直播版本，根据自身小程序直播权限选择）

自行打包编译为app

该文档适用于源码客户，需了解相关业务技术人员阅读

准备工作

• 电脑需安装 HBuilderX 编辑器
• 代码目录：public_html\template\wap-v3\src
• 确保微信开放平台 是否开通 移动应用，打包app需要填写 移动应用 的 Appid跟AppSecret

开始

1，启动 HBuilderX ，导入 代码目录（注：是src目录），打开商城配置文件config.js （根目录下）

2，打开 manifest.json 项目配置文件，填写打包app的配置信息

3，查看 manifest 源码视图，修改服务协议和隐私政策的域名

4，如有其他app配置，自行修改

打包app

1，点击编辑器菜单栏 发行 => 原生app云打包，填写配置

2，如何申请相关证书，可咨询客服人员

3，配置填写好，点击打包，通过官方在线打包

• 打包需要几分钟或十几分钟时间，注意查看控制台（也可通过编辑器菜单栏 发行 => 原生app 查看云打包状态 查看进度）
• 安卓打包完成后，会在public_html\template\wap-v3\src\unpackage\release 生成 apk文件，就是安卓的安装包，可上架到应用市场
• ios会生成一个下载地址进行下载 ipa格式的文件

系统核心表

商城核心表

代理分销应用表

防伪溯源应用表

定向送券应用表

APP商城应用表

砍价应用表

区块链钱包应用表

分红核心表

微商系统应用表

优惠券应用表

CPS联盟应用表

授权证书应用表

系统表单应用表

发货助手应用表

限时抢购应用表

全网分销应用表

电子卡密应用表

ERP助手应用表

节日关怀应用表

关注有礼应用表

朋友圈素材应用表

满减送应用表

赠品应用表

礼品券应用表

商品助手应用表

拼团应用表

帮助中心应用表

积分商城应用表

发票助手应用表

知识付费应用表

全渠道直播应用表

会员卡应用表

微店应用表

小程序应用表

小程序直播应用表

订单弹幕应用表

支付有礼应用表

付费等级应用表

超级海报应用表

商品预售应用表

客服系统应用表

领货码应用表

注册营销应用表

预约档期应用表

刮刮乐应用表

每日秒杀应用表

多商户系统应用表

每日签到应用表

疯狂砸金蛋应用表

O2O门店/门店收银应用表

供应商应用表

自定义表单应用表

任务中心应用表

好物圈应用表

券包应用表

幸运大转盘应用表

会员群发应用表

数据库字典/sys_addons/应用表

数据库字典/sys_addons_category/应用分类表

数据库字典/sys_addons_clicks/应用访问量表

数据库字典/sys_addons_config/第三方配置表

数据库字典/sys_album_class/相册表

数据库字典/sys_album_picture/相册图片表

数据库字典/sys_app_custom_template/APP自定义模板表

数据库字典/sys_auth_version/授权版本表

数据库字典/sys_auth_version_change_log/源码版本变更记录表

数据库字典/sys_auth_version_log/源码版本记录表

数据库字典/sys_authorization/域名授权表

数据库字典/sys_authorization_failed/盗版监控表

数据库字典/sys_change_user_log/系统用户转化表

数据库字典/sys_city/城市表

数据库字典/sys_config/商城配置表

数据库字典/sys_country_code/国家区号表

数据库字典/sys_custom_template/手机端自定义模板表

数据库字典/sys_district/区/县表

数据库字典/sys_grant_time/分红发放周期表

数据库字典/sys_hooks/系统钩子表

数据库字典/sys_instance/系统实例表

数据库字典/sys_instance_type/系统实例类型表

数据库字典/sys_log/系统日志

数据库字典/sys_merchant_version/商家版本表

数据库字典/sys_merchant_version_log/商家版本变更表

数据库字典/sys_message_count/短信余额表

数据库字典/sys_message_item/消息条目表

数据库字典/sys_message_push/消息推送模板表

数据库字典/sys_module/系统模块表

数据库字典/sys_mp_custom_template/小程序自定义模板表

数据库字典/sys_mp_message_template/小程序通知模板表

数据库字典/sys_mp_sub_keys/小程序订阅消息变量表

数据库字典/sys_mp_submit/小程序提交审核表

数据库字典/sys_mp_template_relation/小程序模板订阅消息关联表

数据库字典/sys_notice/系统公告表

数据库字典/sys_notice_template/系统通知模板表

数据库字典/sys_notice_template_item/系统通知项表

数据库字典/sys_notice_template_type/系统通知模板类型表

数据库字典/sys_pc_custom_code_logo/pc装修首页logo表

数据库字典/sys_pc_custom_config/pc装修导航模板表

数据库字典/sys_pc_custom_nav/pc装修导航表

数据库字典/sys_pc_custom_nav_config/pc装修导航配置表

数据库字典/sys_pc_custom_style_config/pc装修风格表

数据库字典/sys_province/省表

数据库字典/sys_url_route/系统路由表

数据库字典/sys_user/用户信息表

数据库字典/sys_user_admin/系统管理员表

数据库字典/sys_user_group/用户组表

数据库字典/sys_user_log/系统操作日志表

数据库字典/sys_website/系统实例表