mp-merchant-booking

商家酒店C端预订小程序，每个商家有独立的小程序应用承载。商家可能为单体酒店，也可能是品牌酒店

开发

安装依赖：

npm install

启动：

目前只支持小程序

npm run serve:inquirer

小程序发布上传流程（已接入除景都道的商家）：

run npm script

npm run build:inquirer

step1 选择“继续”构建（使用方向键选择）

> node build/inquire.js

? 是否开始构建？ (Use arrow keys)
> 继续 
  退出 

step2 选择想要构建的商家渠道（使用方向键选择）

选中要发布的商家小程序即可开始打包对应小程序包 打完包又回到step1，完成上传（window需要重新进入项目，触发客户端更新小程序appId）之后可以选择继续打包

> node build/inquire.js

? 是否开始构建？ 继续
? 请选择想要构建的小程序渠道： (Use arrow keys)
> OTM酒店预订小程序
  一隅生活微信小程序 
  余舍微信小程序 
  邮电大厦微信小程序
  OTM联合会员酒店

默认从上到下依次自动切换商家

设置ext.json：

由于uni-app框架不支持设置ext.json，所以需要开发者自行在编译后的小程序代码根目录手动添加ext.json文件，文件模板参考src/ext.json文件（该文件不会被自动编译到小程序根目录，只做参考用）。dist目录不在git跟踪依赖中，开发者可根据需要修改。

小程序appid

目前使用的是华选账号，需要添加为开发者请联系前端负责人。

上线渠道

微信小程序

项目负责人

产品： 阿树

设计师：阿广

前端：laughing、汤姆猫

中间层：陈宇超

底层：

• 会员- 冯国森、曾勇峰
• 收银台- 叶新任
• 预订、结算- 罗艺
• 酒店- 李启华

项目script说明

// 本地开发微信
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
// 构建微信
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",

分支管理

• 功能分支：feature/version （每个功能版本的分支）
• 个人分支：feature/_your_name （多人开发）
• 测试分支：release/test
• 预生产分支：release/prev
• 生产分支：master（与线上保持一致，在发布前才被合并）

接口文档地址

• http://172.25.104.24:9797/doc.html

目录结构

src                              # 目录结构维护原则，就近维护
│  App.vue                       # 根应用配置文件
│  main.js                       # Vue初始化入口文件
├─public                         # 接口目录
│  ├─hotel-share.html            # 酒店分享到朋友圈模板html（服务端需要用此html生成转发图片）
├─api                            # 接口目录
├─components                     # 公共组件目录
│  ├─global                      # 公用的注册为全局的组件
│  ├─project                     # 公用的业务组件
│  └─public                      # 公用的非业务组件
├─filters                        # 公共过滤器
├─lib                            # 公共目录
│  ├─animation                   # 公用的动画方法
│  ├─style                       # 全局样式
│  ├─utils                       # 工具方法库
│  │  ├─sdk                      # 跨端方法封装（为将来实现多端渠道考虑）
│  │  ├─helper                   # 公用基础方法
│  │  ├─choose-date-range        # 选择日期范围
│  │  ├─choose-phone-prefix      # 选择国际电话前缀
│  │  ├─dom                      # dom操作
│  │  ├─enum                     # 枚举常量定义
│  └─ └─get-menu-button          # 获取小程序胶囊信息
├─pages                          # 页面
│  ├─common                      # 公用页面
│  ├─hotel                       # 酒店模块
│  ├─my                          # 会员中心
│  ├─order                       # 订单模块
│  └─order                       # 支付模块
├─static                         # 静态资源文件

接口错误码映射

关于扫码参数

品牌版 首页小程序码：员工id（channel_staff_id）、品牌id（channel_hotel_id） 扫码预订页小程序码（不存在） 会员卡售卖：员工id（channel_staff_id）、品牌id（channel_hotel_id） 门店版 首页小程序码：员工id（channel_staff_id）、门店id（channel_hotel_id） 扫码预订页小程序码：员工id（channel_staff_id）、门店id（channel_hotel_id） 会员卡售卖：员工id（channel_staff_id）、门店id（channel_hotel_id）

关于订阅消息

以下参考资料： 小程序模板消息能力调整通知(官方) 微信小程序订阅消息汇总，持续跟进中 「笔记」订阅消息体验踩坑 「笔记」小程序模版消息升级为订阅消息

关于样式

以下文件无需额外引入，已通过插件注入所有页面。

src/lib/style/color.less src/lib/style/mixins.less

为了节省空间，请定义mixins时定义为函数形式，否则即使不使用也会被注入样式文件中浪费空间。

函数形式定义的缺点就是，不能直接在template模板中直接绑定class。

建议：

/* 文本溢出隐藏 */
.line-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

不建议：

/* 文本溢出隐藏 */
.line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

其它样式如果需要，就要单独引入使用。

适配

• iphonex 底部小黑条遮挡底部按钮适配
  1. 需要适配的页面获取小程序globalData.isIphoneX
  2. 根据globalData.isIphoneX给页面根元素class添加'is-iphonex'
  3. 如果该页面底部有贴底元素，则给根元素class添加'with-booking-pannel'
  4. 相应的，贴底元素class添加'fix-to-bottom'
  5. 如果'with-booking-pannel'预留的底部控件不足，则自行在src/lib/style/common.less文件添加新类处理

商家小程序配置网络白名单

1. 小程序文件、图片下载域名

uni-app开发注意事项

对Vue原生语法的支持

1. 不支持v-model

内置组件

picker 日期

1. 无法自定义按钮颜色

样式

1. 组件之间的样式互不影响，跨组件的样式定义不会生效，如果想穿透组件层级覆盖样式，需要在页面级别的文件中定义样式
2. h5编译出来的样式默认使用了scoped，如果想要跨组件层级穿透样式，需要在样式定义前加上/deep/
3. 引入本地的font-family时，font-face定义需要将url直接赋值为绝对路径，或者转化为base64字符串，不能直接引用相对路径，否则会出现找不到字体文件的报错

自定义组件

1. 自定义组件上绑定原生事件需要用.native修饰符

<we-button @click.native="cancel">取消</we-button>

2. 自定义组件绑定class和style样式不会透传到组件内部根元素上

3. 不能直接在自定义组件上使用v-slot作为插槽，需要包裹一层template

4. 自定义组件注册为全局组件时，本地开发需要重启。否则引用时属性传进去全是undefined

5. 自定义组件模式下，子组件修改父组件传入的对象的属性不会更新到视图。

uni-ui版本问题

1. uni-popup组件，1.0.8版本时uni-popup容器没有设置z-index。1.1.9版本却设置了z-index为99，会出现样式兼容问题。因此最好固定版本。

插槽

uni-app目前作用域插槽仅支持解构插槽，且作用域插槽不能使用父组件的属性