```
本教程实例以《智慧餐厅小程序》为例。
```
## 第一步:设置接口参数
```
使用HBuilderX打开点餐小程序代码,具体步骤如下图
```

```
1. url:为接口域名(与第三方平台设置的服务器域名一致)。
2. path:'/h5/food/' 为存放在服务器的位置。则生成后的H5代码应上传至服务器端的'/public/h5/food/'内。
3. applet_id : 为用户创建的小程序管理端的applet_id编号,可初始一个比如“10001”,为服务商搭建的演示。
```
## 第二步: 编译前配置
```
具体步骤如下图
```

```
上图中的5位置的设置,要与第一步中的 path 参数一致。
```
## 第三步:编译发行H5代码
```
步骤:点击发行菜单->网站-PC,然后显示如下图。
```

## 第四步:编译成功
```
编译成功并完成后会出现如下界面
```

```
点击上图红框内的路径,打开H5代码存放的位置,并上传至服务器端即可。
```
# 第五步:如何调用自己的H5端
```
如在公众号中调用,如下图
```

```
这里要注意的是上图链接中的url的书写。
如上图所写的url为:https://demo.hemaphp.com/h5/food/#/?applet_id=10001
该url分为四部分,拆分分解说明如下:
1. https://demo.hemaphp.com/ 为接口域名。
2. h5/food/ 为服务端存放的位置
3. #/ 为分界符,之前为服务器路径,之后为页面路径和传递参数。
4. /?applet_id=10001 这里是重点,该部分为H5端的页面路径和参数,这里省略了页面路径,意思是打开首页面,并传递一个参数applet=10001。意思打开小程序管理端编号为10001的H5页面首页。
如果想打开订单列表,则这部分可以这样写/pages/order/index?applet_id=10001。
引用链接必须要传递applet_id 这个参数。如填写的是10002则打开的页面数据是,小程序管理端编号为10002的数据。
```
- 项目介绍
- 目录结构
- 插件结构
- 安装教程
- 安装必读
- 第一步
- 第二步
- 第三步
- 第四步
- 第五步
- 帮助教程
- 设置代开发小程序
- 搭建小程序调试环境
- 微信扫码登录
- 获取腾讯地图KEY
- 怎样和站点同用一个公众号发布H5端
- 助手小程序
- 站点公众号
- 发布H5端
- 网页收银端
- 云叫号器配置
- 操作手册
- 超级管理端
- 插件管理
- 用户申请
- 小程序
- 公众号
- 支付设置
- 用户管理
- 开放平台
- 设置
- 代理中心
- 用户中心
- 小程序设置
- 常见问题
- 名词解释
- 商家获取账号密码
- open_basedir报错
- 发布上线小程序
- 微信返码报错大全
- 平台注册的小程序登录公众平台
- 设置小程序转发图片
- 小程序模板报错集合
- 设置公众号模板消息
- 云叫号器
- 接口请求规则
- 公共请求参数
- 返回数据结构
- 设备管理接口
- 下发消息接口
- 相关文档