快速集成小程序

生活物联网平台为您提供了官方的云食谱小程序，您只需要在面板上添加控件跳转到官方小程序即可快速在App端集成云食谱的能力。

1. 拼接小程序的链接。
   小程序的完整链接由小程序的地址头，和URL方式编码后的路由地址和参数组成。请您根据以下步骤来操作。
   1. 拼接路由地址和参数。

      生活物联网平台提供两种小程序的路由地址，详细介绍如下表所示。

      页面	路由链接	应用场景
      食谱首页	/pages/index/index	除操作某个具体云食谱外，建议其余选用食谱首页的链接。
      食谱详情页	/pages/recipe-detail/recipe-detail	当前设备正在执行某个云食谱时，建议选用食谱详情页的链接。

      小程序链接中需拼接的参数如下。

      参数	是否必填	参数说明
      devId	是	设备ID。
      productKey	是	产品的Key，设备证书信息之一。创建产品时，生活物联网平台为该产品颁发的全局唯一标识。
      openAccountId	是	平台颁发给食谱提供者的ID标识。您可以在SaaS平台的应用开发 > 开发管理中查看。
      contentRecipeId	否	内容食谱ID，食谱详情页必填。
      type	否	小程序类型，当有线上或预发环境区分时使用。 传入debug：在预发环境访问该小程序链接 不传debug：在线上环境访问该小程序链接

      请您根据具体的应用场景来选择链接地址。以拼接食谱首页的地址为例，拼接示例如下。

      /pages/index/index?devId=rXyQlw****fB8hUK000000&productKey=a1l****ZtE&openAccountId=Q5****qqzJn8SSP8LQ==&type=debug

   2. URL编码。

      您可以调用encodeURIComponent函数，将拼接的路由和参数结果进行URL编码。以上示例URL编码后结果如下。

      2Fpages%2Frecipe-detail%2Frecipe-detail%3FdevId%3DrXyQlw****xifB8hUK000000%26productKey%3Da1****vZtE%26openAccountId%3DQ****SVx%2FqqzJn8SSP8LQ%3D%3D%26contentRecipeId%3D4xxx01

   3. 拼接小程序的地址头。

      小程序的地址头为https://2021001192657554.hybrid.alipay-eco.com/index.html?appId=2021001192657554&page=，其中云食谱小程序的appId固定为2021001192657554。

      完整的小程序链接示例如下。

      https://2021001192657554.hybrid.alipay-eco.com/index.html?appId=2021001192657554&page=%2Fpages%2Findex%2Findex%3FdevId%3DrXyQlw****fB8hUK000000%26productKey%3Da1****ZtE%26openAccountId%3DQ5****qqzJn8SSP8LQ%3D%3D%26type%3Ddebug

2. 集成云食谱小程序。

   您可以通过以下方式集成云食谱小程序。

   • 通过二维码打开

     通过二维码生成工具，将小程序完整地址可生成二维码，并使用天猫精灵App扫描二维码即可快速体验。

     
     说明 该二维码为测试数据，无法正常启动云食谱，仅供您快速体验。
   • 在自定义面板中增加一个控件，修改控件展示名称（例如：点我打开云食谱小程序），并设置为小程序的链接。
   • 当您自行开发面板时，在H5中添加云食谱小程序。

     H5方式时，您还需要在小程序地址后添加_ali_new_window_open=true的参数配置。为您提供以下两种示例代码供参考。

     打开方式	示例代码
     调用JS API打开	window.location.url = 'https://2021001192657554.hybrid.alipay-eco.com/index.html?appId=2021001192657554&page=%2Fpages%2Findex%2Findex%3FdevId%3DrXyQlw****fB8hUK000000%26productKey%3Da1****ZtE%26openAccountId%3DQ5****qqzJn8SSP8LQ%3D%3D%26type%3Ddebug&_ali_new_window_open_=true'
     通过A标签打开	<a href="https://2021001192657554.hybrid.alipay-eco.com/index.html?appId=2021001192657554&page=%2Fpages%2Findex%2Findex%3FdevId%3DrXyQlw****fB8hUK000000%26productKey%3Da1****ZtE%26openAccountId%3DQ5****qqzJn8SSP8LQ%3D%3D%26type%3Ddebug&_ali_new_window_open_=true">点我打开云食谱小程序</a>