跳到主要内容

启动⼩程序样例

小程序描述文件​

小程序基础描述为一个manifest.json文件，内容样例如下

Iframe 小程序 manifest 描述

{
  "name": "example",
  "version": "1.0.0",
  "frame": {
    "view": "index.html",
    "mountPointId": "main"
  }
}
  • name: 小程序名称
  • version: 小程序版本
  • frame: 小程序页面信息
    • view: 页面文件，内部可以引入页面相关 css/js
    • mountPointId: 页面挂载点，详情见挂载点说明

VM 小程序 manifest 描述

{
  "name": "example",
  "version": "1.0.0",
  "frame": {
    "main": "page.html"
  },
  "main": "vm.js"
}
  • name: 小程序名称
  • version: 小程序版本
  • frame: 小程序页面信息
    • main: 页面文件，内部可以引入页面相关 css/js
  • main: 小程序 VM 代码文件

未来可能会进行扩展以支持更多的功能。

其中frame会以iframe的形式挂载到商家后台的小程序容器当中，而mainVM 代码会在商家后台小程序容器隔离沙箱中直接执行，这部分可以直接访问商家后台注册给小程序的接口(SDK 中的接口)，可以为同步或者异步接口(视接口声明而定)。

挂载点说明​

目前仅有一个挂载点，未来会根据业务情况扩展更多挂载点。

  1. main 为商家后台的一个页面，或者页面的一部分区域。不同页面可能位置、区域大小不同

操作方式​

  1. 下载小程序模板。
  2. 执行yarn安装相关依赖。
  3. 执行yarn start启动小程序本地服务容器。
  4. 进入酷家乐商家后台小程序容器应用。
  5. 点击左侧“小程序开发工具”按钮，在弹层中添加调试的小程序信息。
  6. 保存后即可在“进入应用”导航栏（默认）中看到注册的小程序入口，点击入口即可启动对应的小程序。

样例​

  • 进入商家后台小程序容器应用后，点击“小程序开发工具”按钮，添加调试的小程序信息。 sample1

  • 在导航栏中点击注册的小程序入口，启动对应的小程序 sample2