评论

云模板-美业小程序

低码美业模板

点击安装模板

1 模板简介

美业小程序适用于用户预约商家提供的服务项目,提供了简洁、通用的预约功能,主要包括:

  • 店铺信息展示
  • 服务分类展示
  • 服务项目展示
  • 用户预约

云模板内置了小程序应用,后台管理系统,api接口,开发者可以根据自己的需要选择对应的开发模式。

1.1开发模式

微搭低代码开发

开发者可以使用微搭低代码,对模板中已有的美业小程序应用和后台管理系统进行二次开发,快速迭代项目,实现自己的业务需求,适用于定制化不强的业务,便于快速上线。

微信原生开发

当现有的美业小程序应用模板不满足业务需求时,开发者可以不依赖微搭低代码,使用原生微信开发实现自己的小程序应用,编写自定义UI和业务逻辑,使用模板提供的api和后台管理系统持久化数据,适合有高度自定义需求的开发者。

使用微搭低代码的开发方式可直接参阅使用微搭低代码开发指南,使用微信原生开发的开发方式可直接参阅使用微信原生开发指南,无论使用哪种开发方式,安装模板是不可缺少的环节。
提示: 在项目开始前,预先调研自己的项目适合哪种开发模式,是一种不错的做法
提示: 无论从哪个入口安装,云模版都会安装到同一个云开发环境,即在云开发中同一个云开发环境下,可以看到不同入口安装的云模版

2 快速开始

2.1 安装美业小程序云模板

(1)从微信IDE创建项目入口安装

在微信IDE中创建小程序,选择美业小程序云模板,点击

创建

按钮,等待安装完成。

(2)从模版中心安装

在云模板中心找到美业小程序云模板,点击右上角

安装模板
按钮,等待安装完成。注:在创建项目之后,可通过微信开发者工具右上角的云开发->云模板->模板中心进入

2.2 相关资源说明

无论从哪一种入口安装模板,安装完成后,您将获得以下资源,他们的作用和位置分别为

  • 云数据库集合:本质为云开发数据库表,用于存储数据
管理后台:云模板提供的管理后台,可直接访问,或在云后台查看,点击
编辑
  • 可在微搭低代码中编辑管理后台应用
  • 微信小程序应用:使用微搭低代码开发模式时,应用直接嵌入到小程序中,预览区在微信开发者工具左侧,开发者点击页面信息中的页面设计,在微搭低代码平台,通过可视化界面来编辑应用的各个页面,完成二次开发。
  • api(工作流):本质为工作流,提供对数据模型的增删改查能力,使用微信原生开发时,api(工作流)是开发者在原生微信开发中和数据模型交互的桥梁。

2.3 使用微搭低代码开发指南

开发者从微信IDE创建项目入口完成安装步骤后,微信开发者IDE左侧会展示小程序应用预览,右侧包括云数据库集合,管理后台,api(工作流)等各种资源。

开发者可在此基础上进行二次开发,云模板致力于在简洁和灵活性上做平衡,值得庆幸的是,大部分的资源,如小程序页面、api(工作流)、后台管理系统等,开发者都可自行修改。

(1)界面编辑

小程序应用编辑,可以在关联资源中点击页面设计,跳转到微搭web编辑器编辑应用。

管理后台,可以在关联资源的管理后台点击编辑,跳转到微搭web编辑器编辑应用。

编辑完成后,在微搭中选择保存,更改会同步到IDE预览区。

(2)发布

发布方式有两种,直接使用微信IDE的上传功能发布小程序(推荐),另一种是使用微搭低代码的发布功能,绑定小程序ID后发布。

2.4 使用微信原生开发指南

从模板中心完成安装步骤后,在我的应用列表中点击查看详情会展示模板相关资源。 模板中的小程序应用并不是必须的,开发者可以编写原生代码,在前端调用api来实现业务逻辑,接口的说明和调用示例在接口展示中做了详尽说明。

(1)api(工作流)具体使用方式如下

  • 配置云开发环境 ID

修改

app.js
,在
App
的
onLaunch
生命周期方法中添加云能力初始化代码,参数传入当前小程序的云开发环境ID。
App({
  onLaunch: function () {
    wx.cloud.init({
      // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
      env: 'lowcode-3gp1xflvc8844909',
      // 是否在将用户访问记录到用户管理中,在控制台中可见,默认为false
      traceUser: false,
    });
  },
});
  • 调用api与数据库表交互
wx.cloud.callFunction({
  name: 'cloudbase_module',
  data: {
    name: 'query_business_information',
    data: {
      "filter": {
        "where": {
          "_id": {
            "$eq": "058dfefe62b2870809f0d35525ff7a61"
          }
        }
      },
      "select": {
        "$master": true
      }
    },
  },
  success: (res) => {
    console.log(res)
  },
});

(2)发布

与普通小程序发布一致

3 数据模型架构设计

数据模型包含四张表,字段和关联关系如下 

店铺信息:商家相关信息

服务分类:服务的类别

服务:所有的服务

客户预约:客户预约的服务,在小程序中,通过wxOpenId和预约电话作为用户的标识

4 api(工作流)设计

4.1 api总览

模板一共包含7个api(工作流),名称和作用如下:

query_business_information
:查询店铺信息
query_service_classification
:查询服务分类
query_service_items
:查询服务项目
create_appointment_information
:创建预约信息
delete_appointment_information
:删除预约信息
query_appointment_information
:查询预约信息
update_appointment_information

:更新预约信息对于店铺信息,服务分类,服务项目,根据实际需要,只提供了查询api,创建,编辑,删除可在云后台进行操作。

考虑到客户预约时对预约服务的操作,提供了创建,查询,编辑,删除api。

查询和删除api为了保证兼容性,既可操作单条记录,也可操作多条记录,即查询类api根据查询参数的不同,可返回单条或多条记录,删除类api参数为数组,可选删除单条和多条记录。

4.2 调用方式

在调用之前需要初始化云开发sdk,初始化方式可参照快速开始章节中配置云开发环境 ID

4.3 参数说明

对于查询api,查询参数不仅限于api接口文档提供的示例,开发者可根据实际业务需求,组合不同的查询条件,获取数据。

对于删除api,为了提供最大限度的兼容性,接口的删除条件均为数组,意味着该接口既可以删除单条记录,也可删除多条记录。

查询条件参考文档

4.4 返回值

接口返回值结构如下

{
  "errMsg": "cloud.callFunction:ok",
  "result": {
    "Response": {
      "Data": {
        "area": "北京市",
        "owner": "1788128953414635521",
        "startKey": "5",
        "address": "***",
        "telphones": "18888881811",
        "start": 0,
        "carousels": [
          "cloud://xxx.png"
        ],
        "createdAt": 1716280727406,
        "endKey": "1",
        "createBy": "1788128953414635521",
        "updateBy": "1788128953414635521",
        "_openid": "1788128953414635521",
        "name": "店铺名称",
        "logo": "cloud://xxx.png",
        "end": 43200000,
        "_id": "880c3388664c5d97014c4696282d5050",
        "updatedAt": 1716280727406
      }
    }
  },
  "requestID": "28d8be61-9f0b-48c7-b790-0647722bb3a0"
}

不同接口result内的值可能不同,但是对于同一个接口,返回值是稳定的,开发者可自行进行容错处理。

5 安全性检查

应用安全性是应用开发中极其重要的一环,在应用上线之前,开发者应仔细检查应用权限设计,包括但不限于:

  • 数据模型权限
  • 工作流调用权限
  • 应用访问权限

6 QA

Q:api(工作流)的查询参数如何编写?

A:查询参数与orm框架的编写方式类似,采用对象的形式描述,具体可以参照云开发文档

Q:如何将"cloud://"开头的图片转为"https://"开头的地址?

A:云开发针对图片做了防盗链处理,如需将"cloud://"的地址转为"https://"开头的地址,可以使用云开发sdk的 获取临时链接 ,在微信开发中的调用方式为

wx.cloud
 .getTempFileURL( // 支持数组类型参数,同时处理多张图片
   "cloud://tcb-demo-10cf5b.7463-tcb-demo-10cf5b-1302484483/images/pic_netbian_com/001714-162653863412dd.jpg"
 )
 .then((url) => console.log("请求结果", url));

Q:现有的数据模型和api接口不满足我的需求怎么办?

A:云模板提供了各种资源,旨在帮助提高开发者开发效率,各类资源均可以修改,开发者可以自行在微搭中修改数据模型,增加api(工作流)接口


  • 目录
  • 1 模板简介
  • 1.1开发模式
  • 2 快速开始
  • 2.1 安装美业小程序云模板
  • 2.2 相关资源说明
  • 2.3 使用微搭低代码开发指南
  • 2.4 使用微信原生开发指南
  • 3 数据模型架构设计
  • 4 api(工作流)设计
  • 4.1 api总览
  • 4.2 调用方式
  • 4.3 参数说明
  • 4.4 返回值
  • 5 安全性检查
  • 6 QA



云开发 Copilot

Beta



点击安装模板

1 模板简介

美业小程序适用于用户预约商家提供的服务项目,提供了简洁、通用的预约功能,主要包括:

  • 店铺信息展示
  • 服务分类展示
  • 服务项目展示
  • 用户预约

云模板内置了小程序应用,后台管理系统,api接口,开发者可以根据自己的需要选择对应的开发模式。

1.1开发模式

微搭低代码开发

开发者可以使用微搭低代码,对模板中已有的美业小程序应用和后台管理系统进行二次开发,快速迭代项目,实现自己的业务需求,适用于定制化不强的业务,便于快速上线。

微信原生开发

当现有的美业小程序应用模板不满足业务需求时,开发者可以不依赖微搭低代码,使用原生微信开发实现自己的小程序应用,编写自定义UI和业务逻辑,使用模板提供的api和后台管理系统持久化数据,适合有高度自定义需求的开发者。

使用微搭低代码的开发方式可直接参阅使用微搭低代码开发指南,使用微信原生开发的开发方式可直接参阅使用微信原生开发指南,无论使用哪种开发方式,安装模板是不可缺少的环节。
提示: 在项目开始前,预先调研自己的项目适合哪种开发模式,是一种不错的做法
提示: 无论从哪个入口安装,云模版都会安装到同一个云开发环境,即在云开发中同一个云开发环境下,可以看到不同入口安装的云模版

2 快速开始

2.1 安装美业小程序云模板

(1)从微信IDE创建项目入口安装

在微信IDE中创建小程序,选择美业小程序云模板,点击

创建

按钮,等待安装完成。

(2)从模版中心安装

在云模板中心找到美业小程序云模板,点击右上角

安装模板
按钮,等待安装完成。注:在创建项目之后,可通过微信开发者工具右上角的云开发->云模板->模板中心进入

2.2 相关资源说明

无论从哪一种入口安装模板,安装完成后,您将获得以下资源,他们的作用和位置分别为

  • 云数据库集合:本质为云开发数据库表,用于存储数据
管理后台:云模板提供的管理后台,可直接访问,或在云后台查看,点击
编辑
  • 可在微搭低代码中编辑管理后台应用
  • 微信小程序应用:使用微搭低代码开发模式时,应用直接嵌入到小程序中,预览区在微信开发者工具左侧,开发者点击页面信息中的页面设计,在微搭低代码平台,通过可视化界面来编辑应用的各个页面,完成二次开发。
  • api(工作流):本质为工作流,提供对数据模型的增删改查能力,使用微信原生开发时,api(工作流)是开发者在原生微信开发中和数据模型交互的桥梁。

2.3 使用微搭低代码开发指南

开发者从微信IDE创建项目入口完成安装步骤后,微信开发者IDE左侧会展示小程序应用预览,右侧包括云数据库集合,管理后台,api(工作流)等各种资源。

开发者可在此基础上进行二次开发,云模板致力于在简洁和灵活性上做平衡,值得庆幸的是,大部分的资源,如小程序页面、api(工作流)、后台管理系统等,开发者都可自行修改。

(1)界面编辑

小程序应用编辑,可以在关联资源中点击页面设计,跳转到微搭web编辑器编辑应用。

管理后台,可以在关联资源的管理后台点击编辑,跳转到微搭web编辑器编辑应用。

编辑完成后,在微搭中选择保存,更改会同步到IDE预览区。

(2)发布

发布方式有两种,直接使用微信IDE的上传功能发布小程序(推荐),另一种是使用微搭低代码的发布功能,绑定小程序ID后发布。

2.4 使用微信原生开发指南

从模板中心完成安装步骤后,在我的应用列表中点击查看详情会展示模板相关资源。 模板中的小程序应用并不是必须的,开发者可以编写原生代码,在前端调用api来实现业务逻辑,接口的说明和调用示例在接口展示中做了详尽说明。

(1)api(工作流)具体使用方式如下

  • 配置云开发环境 ID

修改

app.js
,在
App
的
onLaunch
生命周期方法中添加云能力初始化代码,参数传入当前小程序的云开发环境ID。
App({
  onLaunch: function () {
    wx.cloud.init({
      // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
      env: 'lowcode-3gp1xflvc8844909',
      // 是否在将用户访问记录到用户管理中,在控制台中可见,默认为false
      traceUser: false,
    });
  },
});
  • 调用api与数据库表交互
wx.cloud.callFunction({
  name: 'cloudbase_module',
  data: {
    name: 'query_business_information',
    data: {
      "filter": {
        "where": {
          "_id": {
            "$eq": "058dfefe62b2870809f0d35525ff7a61"
          }
        }
      },
      "select": {
        "$master": true
      }
    },
  },
  success: (res) => {
    console.log(res)
  },
});

(2)发布

与普通小程序发布一致

3 数据模型架构设计

数据模型包含四张表,字段和关联关系如下 

店铺信息:商家相关信息

服务分类:服务的类别

服务:所有的服务

客户预约:客户预约的服务,在小程序中,通过wxOpenId和预约电话作为用户的标识

4 api(工作流)设计

4.1 api总览

模板一共包含7个api(工作流),名称和作用如下:

query_business_information
:查询店铺信息
query_service_classification
:查询服务分类
query_service_items
:查询服务项目
create_appointment_information
:创建预约信息
delete_appointment_information
:删除预约信息
query_appointment_information
:查询预约信息
update_appointment_information

:更新预约信息对于店铺信息,服务分类,服务项目,根据实际需要,只提供了查询api,创建,编辑,删除可在云后台进行操作。

考虑到客户预约时对预约服务的操作,提供了创建,查询,编辑,删除api。

查询和删除api为了保证兼容性,既可操作单条记录,也可操作多条记录,即查询类api根据查询参数的不同,可返回单条或多条记录,删除类api参数为数组,可选删除单条和多条记录。

4.2 调用方式

在调用之前需要初始化云开发sdk,初始化方式可参照快速开始章节中配置云开发环境 ID

4.3 参数说明

对于查询api,查询参数不仅限于api接口文档提供的示例,开发者可根据实际业务需求,组合不同的查询条件,获取数据。

对于删除api,为了提供最大限度的兼容性,接口的删除条件均为数组,意味着该接口既可以删除单条记录,也可删除多条记录。

查询条件参考文档

4.4 返回值

接口返回值结构如下

{
  "errMsg": "cloud.callFunction:ok",
  "result": {
    "Response": {
      "Data": {
        "area": "北京市",
        "owner": "1788128953414635521",
        "startKey": "5",
        "address": "***",
        "telphones": "18888881811",
        "start": 0,
        "carousels": [
          "cloud://xxx.png"
        ],
        "createdAt": 1716280727406,
        "endKey": "1",
        "createBy": "1788128953414635521",
        "updateBy": "1788128953414635521",
        "_openid": "1788128953414635521",
        "name": "店铺名称",
        "logo": "cloud://xxx.png",
        "end": 43200000,
        "_id": "880c3388664c5d97014c4696282d5050",
        "updatedAt": 1716280727406
      }
    }
  },
  "requestID": "28d8be61-9f0b-48c7-b790-0647722bb3a0"
}

不同接口result内的值可能不同,但是对于同一个接口,返回值是稳定的,开发者可自行进行容错处理。

5 安全性检查

应用安全性是应用开发中极其重要的一环,在应用上线之前,开发者应仔细检查应用权限设计,包括但不限于:

  • 数据模型权限
  • 工作流调用权限
  • 应用访问权限

6 QA

Q:api(工作流)的查询参数如何编写?

A:查询参数与orm框架的编写方式类似,采用对象的形式描述,具体可以参照云开发文档

Q:如何将"cloud://"开头的图片转为"https://"开头的地址?

A:云开发针对图片做了防盗链处理,如需将"cloud://"的地址转为"https://"开头的地址,可以使用云开发sdk的 获取临时链接 ,在微信开发中的调用方式为

wx.cloud
 .getTempFileURL( // 支持数组类型参数,同时处理多张图片
   "cloud://tcb-demo-10cf5b.7463-tcb-demo-10cf5b-1302484483/images/pic_netbian_com/001714-162653863412dd.jpg"
 )
 .then((url) => console.log("请求结果", url));

Q:现有的数据模型和api接口不满足我的需求怎么办?

A:云模板提供了各种资源,旨在帮助提高开发者开发效率,各类资源均可以修改,开发者可以自行在微搭中修改数据模型,增加api(工作流)接口


最后一次编辑于  12-13  
点赞 0
收藏
评论
登录 后发表内容