说明

当可视化搭建无法满足UI述求的时候，我们可以使用自定义页面来满足业务述求。
在 LEMO 系列设备中，我们实现了全系设备支持集团小程序语法来完成页面构建。

步骤

1. 在根目录添加小程序工程化文件

在跟目录添加 package.json 

  1. {
  2.   "scripts": {
  3.     "transform": "node ./build.js -transform",
  4.     "dev": "node ./build.js -dev",
  5.     "build": "node ./build.js -build"
  6.   },
  7.   "devDependencies": {
  8.     "@cniot/gs-appx-compile": "^1.0.13"
  9.   },
  10.   "description": "",
  11.   "dependencies": {
  12.     "@cniot/cainiao-appx": "^0.2.5"
  13.   }
  14. }

在根目录添加 build.js 

  2. const gsAppxCompile = require('@cniot/gs-appx-compile');
  3. const appxConfig = require('./app.json');
  5. const args = process.argv.splice(2);
  6. const isDev = args.indexOf("-dev") !== -1;
  7. const isBuild = args.indexOf("-build") !== -1;
  8. const isTransform = args.indexOf("-transform") !== -1;
  10. gsAppxCompile.setRootPath(__dirname);
  12. // tnpm run transform 转换 lemo.json 文件为小程序界面
  13. if(isTransform){
  14.   gsAppxCompile.transform(appxConfig);
  15. }
  17. // tnpm run dev 本地预览小程序页面
  18. if(isDev){
  19.   gsAppxCompile.dev(appxConfig);
  20. }
  22. // tnpm run build 打包小程序页面
  23. if(isBuild){
  24.   gsAppxCompile.build(appxConfig);
  25. }

在跟目录添加 app.json

deviceType 为设备类型目前支持 LEMO CORE LEMO PDA
pages 字段是当前工程中使用小程序的页面路径。比如这里的 pages/scan/index 等于在 pages/scan 目录下需要存在3个小程序规范的页面 index.js index.axml index.less 

  1. {
  2.   "deviceType":"LEMO PDA",
  3.   "pages":[
  4.     "pages/scan/index"
  5.   ]
  6. }

2. 本地研发

  1. // 安装工程化模块
  2. npm install
  4. // 启动本地模拟器，查看正在编辑的小程序界面
  5. npm run dev

3. 打包

打包后小程序页面目录会存在 index.bundle.js 文件

  1. // 打包小程序页面
  2. npm run build

GS 引用页面

  1. labor.confirm("/pages/scan/index.bundle.js", {});