为满足业务对UI的个性化需求，同时满足在页面中进行逻辑处理，LEMO 全系设备支持通过阿里集团小程序语法来定义页面UI和页面逻辑。

目录介绍

  1. -pages
  2.     -scan
  3.         index.lemo.json
  4.         index.source.json
  5.     -abc // abc 自己定义页面
  6.         index.axml
  7.         index.less
  8.         index.js
  9.         index.bundle.js
  10. -src
  11.     start.gs
  12. -app.json // 自己定义页面配置文件
  13. -package.json // 本地工程和依赖配置
  14. -build.js // 编译逻辑

/pages/scan/index.lemo.json 是通过vscode插件搭建的页面，能满足lemo pda 99%的业务场景。我们重点关注 /pages/abc/index.* 的文件。

如果你的项目中没有app.json, package.json, build.js 3个文件，那么请参考 初始化小程序工程

创建自定义页面1

  1. 在 pages 目录下创建独立的文件夹，并创建3个小程序必要文件 index.axml index.js index.less 。

    1. -pages
    2.  abc
    3.    -index.axml
    4.  -index.js
    5.  -index.less

  2. 在app.json 中申明

    {
"deviceType": "LEMO PDA", //如果是lemo core 这里写 "LEMO CORE"
"pages": [
 // 这里填写所有自己定义的页面列表
 "pages/abc/index"
]
}

    创建自定义页面2

    为了最大程度减少UI编码, 在pda中可以把搭建的lemo.json转换为小程序语法的源码，从而更快达到页面自定义的目标。

  3. 搭建页面 /pages/scan/index.lemo.json

  4. 在 app.json 的配置中台添加 pages/scan/index

  5. 执行 npm run transform

    // 使用以下命令可以把 配置在  app.json 中，搭建的lemo.json页面转换为小程序页面
npm run transform

    使用自定义页面

  6. 页面编译

npm run build
  1. GS中引入编译后的/pages/abc/index.bundle.js
    // 自定义页面在gs中需引用 index.bundle.js 。
// index.bundle.js 由 npm run build  生成
var barcode = labor.scan('/pages/abc/index.bundle.js', {
 title:"111",
isShow: true,
list: [1,2,3,4,5,6]
});

    页面语法介绍

    如果页面逻辑需要使用设备能力，可以参考 PDA Bridge 或 Core Bridge

    index.js

    ```javascript // pda import { EventService } from ‘@cniot/cainiao-appx/es/pda’;

// core //import { EventService } from ‘@cniot/cainiao-appx/es/core’;

export default { data: { title:”页面title”, isShow: true, list: [1,2,3] }, // 页面初始化事件 onInit(res){ // res 是 gs 下发的指令 // 这里推荐使用 EventService 来处理指令 https://www.yuque.com/mr180t/axessq/gnmwyx this.es = new EventService(res); const data = this.es.getData(); Object.asign(this.data, data); // 也可以使用单独赋值 // this.data.title = data.title; }, // 页面显示到前台事件，可能会多次触发 onShow(){}, // 页面准备就绪事件，仅触发一次 onReady(){}, // 页面进入后台事件 onHide(){} // 页面需要更新数据，通常由 gs 下发 update 指令触发 onUpdate(res){}, // 页面销毁事件 onDestroy(){}, // 自定义页面事件 onClickText(event){ // var item = event.target.dataset.item; this.data.isShow = !this.data.isShow; } }

通常我们需要 在 `onInit`、`onUpdate`、`onDestroy` 这3个生命周期里完成页面逻辑编写。

**注：在lemo pda中暂时不支持setInterval, setTimeout, Promise 3个api**

<a name="56b11d58de35af35a5c9386e46d1757c"></a>
#### index.axml
可以理解为页面模板， **在lemo系列设备中，所有节点都是**`**display:flex;**`<br />在 lemo core中我们提供了标准组件，可参考 [Core Components](https://www.yuque.com/mr180t/axessq/fffcqz) . PDA中目前还没有标准组件库。<br />**注意在axml中，文本只能包含在text标签内**
<a name="89b84498e8eed0a7f448b86b8752e5a6"></a>
##### 数据绑定
```javascript
<div>
  <text class="text">{{title}}</text>
</div>

条件渲染
<div>
  <text class="text" a:if="{{isShow}}" >{{title}}</text>
</div>

循环渲染
<div>
  <text class="text" a:for="{{list}}" >{{item}},{{index}}</text>
</div>

事件绑定
<div>
  <text class="text" onClick="onClickText" data-item="{{item}}" >{{item}},{{index}}</text>
</div>

目前支持的标签
标签名 属性列表 支持的事件 备注
div style,class,tabindex,data- onClick data-xx与html一致为自定义属性
onClick(event) => event.target.dataset.xx
text style,class
image style,class,src
scroller style,class,vertical_select vertical_select=”0 or 1”
0： 默认高亮切换方式为键盘左右键
1：键盘上下键也可切换高亮节点

index.less

支持less语法来定义页面样式。
注： 在lemo core中完整支持所有css现有标准，lemo pda，不支持css3属性。

.text{
    font-size: 16px;
  color:#f30f30;
}

本地调试

npm run dev

打包和构建

npm run build