``` 本教程实例以《智慧餐厅小程序》为例。 ``` ## 第一步：设置接口参数 ``` 使用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的数据。 ```