中游链 - 跨端民宿旅居预订平台

更新记录

2.0.0（2026-08-20）下载此版本

重大变更项目结构重构：由 Vite CLI 工程（src/）升级为 HBuilderX 标准工程（根目录 manifest.json / pages.json）无需 npm 安装，HBuilderX 导入即可直接运行，降低上手门槛配置入口迁移：src/utils/config.js → 根目录 config.js 功能升级完整移植微信小程序原生版全部 38 个页面，功能闭环更完整新增【自定义装修】模块：17 种组件（轮播 / 图文 / 宫格 / 商品 / 富文本 / 计算器 / 客服 / 电话等）+ 倒计时营销新增【门店装修】decoration 页面，支持移动端可视化配置新增【电子名片】全套：名片详情 / 列表 / 访客记录 / 分享海报新增【分销体系】完善：分销中心 / 佣金提现 / 代理申请 / 推荐海报新增【订房券】商城 / 赠送 / 订单全流程新增【订阅消息】授权页（模板订阅，单次最多 3 条，异常码 20004 / 10003 处理）新增余额明细、评价晒图、平台协议 / 隐私政策全文页、web-view 内嵌页 AI 客服、首页 / 列表 / 详情 / 下单全链路多房型购物车技术栈 uni-app Vue3 语法（export default + data(){}），微信小程序优先微信原生 setData 自动适配：复杂路径（a.b.c）响应式垫片 behaviors → mixin 统一复用（decorate-behavior） wx. 全部迁移为 uni. 跨端 API，含 #ifdef MP-WEIXIN 条件编译保留 rpx 适配、TabBar 5 栏与全套静态资源

1.0.0（2026-07-22）下载此版本

v1.0.0

首次发布
完整民宿旅居预订平台
支持微信小程序 / App / H5
含预订、优惠券、分销、名片、AI客服等完整功能

平台兼容性

uni-app(3.8.2)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	80	14	-	×	×	×	×

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
2.19.0	1.0.0	1.0.0	×	×	×	×	×	×	×	×	×

环境要求

HBuilderX 3.7.0+ 或 Node.js 18+
微信开发者工具（调试微信小程序时需要）
npm（Node.js 自带）

快速上手

1. 导入/下载项目

方式一（HBuilderX）：

打开 HBuilderX → 文件 → 导入 → 导入本地项目
选择项目目录
等待项目加载完成

方式二（CLI）：

npm install

2. 配置后端地址

编辑 src/utils/config.js：

export default {
  API_BASE: 'https://your-api.com/miniapp/v1',  // 改为你的后端 API 地址
  IMAGE_BASE: 'https://your-api.com',            // 改为你的图片服务器地址
  THEME_COLOR: '#FF6B35'                         // 主题色，可自定义
}

3. 配置微信小程序

编辑 src/manifest.json 中 mp-weixin 字段：

"mp-weixin": {
  "appid": "你的微信小程序appid",
  "setting": { "urlCheck": false },
  "requiredPrivateInfos": ["getLocation", "chooseLocation"],
  "permission": {
    "scope.userLocation": {
      "desc": "用于为您推荐附近民宿和导航到民宿位置"
    }
  }
}

4. 运行

HBuilderX 方式：

顶部运行菜单 → 运行到小程序模拟器 → 微信开发者工具
或：运行到手机或模拟器 → 选择 App 平台

CLI 方式：

# 微信小程序
npm run dev:mp-weixin

# App
npm run dev:app

# H5
npm run dev:h5

后端接口要求

项目需搭配后端服务使用，API 约定如下：

基础路径： {API_BASE}（配置在 src/utils/config.js）

认证方式： JWT Bearer Token

请求头：

Authorization: Bearer {token}
Content-Type: application/json

响应格式：

{
  "code": 0,
  "data": {},
  "message": "success"
}

接口模块列表

模块	接口	说明
认证	`POST /auth/wechat-login`	微信登录（code 换 token）
	`POST /auth/bind-phone`	绑定手机号
	`POST /auth/send-sms`	发送短信验证码
	`POST /auth/sms-login`	短信验证码登录
民宿	`GET /homestays`	民宿列表（分页、筛选）
	`GET /homestays/:id`	民宿详情
	`GET /homestays/recommend`	推荐民宿
	`GET /homestays/search`	搜索民宿
	`GET /homestays/:id/rooms`	房型列表
	`GET /rooms/:id/calendar`	房型日历
订单	`POST /orders/create`	创建订单
	`GET /orders`	订单列表
	`POST /orders/:id/pay`	支付订单
	`POST /orders/:id/cancel`	取消订单
优惠券	`GET /vouchers/list`	优惠券商城列表
	`POST /vouchers/buy`	购买优惠券
	`GET /vouchers/my`	我的优惠券
	`POST /vouchers/gift`	赠送优惠券
分销	`GET /distribution/center`	分销中心数据
	`GET /distribution/team`	分销团队
	`POST /distribution/withdraw`	佣金提现
名片	`GET /business-cards`	名片列表
	`GET /business-cards/:id`	名片详情
	`POST /business-cards/my`	保存我的名片
通用	`GET /banners`	轮播图
	`GET /home-navs`	首页导航
	`GET /platform-config`	平台配置
	`GET /cities`	城市列表

项目配置

主题色自定义

修改 src/utils/config.js 中 THEME_COLOR，同时全局样式变量在 App.vue 的 <style> 中的 CSS 变量统一生效。

TabBar 图标

图标文件位于 src/static/icons/，替换对应 tab_*.png 即可。

平台差异化处理

项目通过 #ifdef 条件编译处理多端差异：

模块	微信小程序	App
登录	`uni.login()` + code 换取 openid	短信验证码登录
获取手机号	`open-type="getPhoneNumber"`	短信验证码
支付	`uni.requestPayment`(微信支付)	App 端微信/支付宝支付
订阅消息	`uni.requestSubscribeMessage`	不支持（条件编译移除）
版本更新	`uni.getUpdateManager`	不支持（条件编译移除）
腾讯广告 SDK	@dn-sdk/miniprogram	不支持（条件编译移除）

常见问题

Q: 运行后白屏 / 数据为空？ A: 检查 src/utils/config.js 中的 API 地址是否配置正确，后端服务是否启动。

Q: 微信小程序登录失败？ A: 确认 manifest.json 中的微信 appid 已正确填写，且后端 /auth/wechat-login 接口可用。

Q: App 端无法定位？ A: 检查 manifest.json 中 app-plus 的定位权限配置，打包时需勾选定位模块。

Q: 图片不显示？ A: 检查 IMAGE_BASE 配置，图片 URL 需要完整的 http(s):// 开头，或相对于 IMAGE_BASE 的路径。