``` 本教程实例以《智慧餐厅小程序》为例。 ``` ## 第一步:设置接口参数 ``` 使用HBuilderX打开点餐小程序代码,具体步骤如下图 ``` ![](https://img.kancloud.cn/2d/1a/2d1a27246f8bbf82dbd6771f94023b44_940x310.png) ``` 1. url:为接口域名(与第三方平台设置的服务器域名一致)。 2. path:'/h5/food/' 为存放在服务器的位置。则生成后的H5代码应上传至服务器端的'/public/h5/food/'内。 3. applet_id : 为用户创建的小程序管理端的applet_id编号,可初始一个比如“10001”,为服务商搭建的演示。 ``` ## 第二步: 编译前配置 ``` 具体步骤如下图 ``` ![](https://img.kancloud.cn/1a/62/1a628a8aee328580962e5bec6dbda260_924x808.png) ``` 上图中的5位置的设置,要与第一步中的 path 参数一致。 ``` ## 第三步:编译发行H5代码 ``` 步骤:点击发行菜单->网站-PC,然后显示如下图。 ``` ![](https://img.kancloud.cn/ce/b8/ceb81807e5eed4f118e7f09c0e23ef8c_1047x461.png) ## 第四步:编译成功 ``` 编译成功并完成后会出现如下界面 ``` ![](https://img.kancloud.cn/33/e3/33e3b8bb797d3b3cee9692af868a8bc2_1063x849.png) ``` 点击上图红框内的路径,打开H5代码存放的位置,并上传至服务器端即可。 ``` # 第五步:如何调用自己的H5端 ``` 如在公众号中调用,如下图 ``` ![](https://img.kancloud.cn/e8/7a/e87adf309ab06ce21338c7c78c018b4c_1480x706.png) ``` 这里要注意的是上图链接中的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的数据。 ```