1 | npm install -g cnpm --registry=https: //registry.npm.taobao.org |
tnpm是阿里定制的npm,内部私有的模块都会发布到这里(官网:http://web.npm.alibaba-inc.com/ )
1 2 | npm i -g npminstall --registry=http: //registry.npm.alibaba-inc.com npminstall -g tnpm --registry=http: //registry.npm.alibaba-inc.com |
1 2 3 4 5 | window系统: cnpm install ai-genie-cli -g MAC系统: sudo cnpm install ai-genie-cli -g |
1、调试设备时请保持APP的登录状态
2、天猫精灵APP的账号要和阿里精灵开放平台保持一致
1、 window host 路径:C:\Windows\System32\drivers\etc
2、 mac host 路径:直接用快捷键 command+shift+g,弹出框,输入 /etc/hosts
1 2 | // 在host中添加 127.0 . 0.1 test.open-iot.tmall.com |
1 2 3 4 | genie init projectName // 创建项目 cd projectName // 进入项目 cnpm install // 安装依赖 注:安装依赖可以用tnpm/cnpm 会比 npm install 快一些 |
注:‘请输入用户账号’ 可回车直接跳过
1 | npm run dev // 运行项目 |
注:项目内不支持引用本地图片,请前往图片空间上传,如果打不开页面,请先支付宝认证
开发中相关的工具文档:
1、定位问题 & 工具 & 反馈问题
2、面板组件常见问题 FAQ
注:如图、默认会有一个Demo页面
1 2 3 4 5 | 注意点: 1 、可以更好的查看面板、建议在PC调完以后调试该方式 2 、需要在 webpack.dev.conf.js 文件的 devServer 加上 inline: false 关闭项目热更新(关闭代码修改实时更新) 不然会导致Native导航条展示不正常,如果不需要看Native导航条则不需要设置 inline: false 并重新 npm run dev 才能生效 |
1 | npm run build |
1 2 | // 全局安装 lzip cnpm install -g lzip |
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 在 my-project 处使用 lzip // 在my-project 平级目录 生成压缩包 成功 my-project.zip // 上传压缩包的格式说明 my-project ( 打包格式的一级目录为 my-project -> dist -> ... ) dist index.html app.css app.js ... 等等资源 |
1 2 3 | open 平台地址 https: //open-iot.tmall.com/home 按创建产品流程走 在 人机交互 -> 控制面板 中上传压缩包 |
(1)使用天猫精灵扫码二唯码
(2)显示设备列表页面 然后点击要测试的设备
(3)显示设备面板 然后测试
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | dist 打包后的文件 app.css app.js index.html src 本地文件(代码编辑) assets 静态资源 less 脚手架公用 css images 静态图片 page 页面 router 路由 store vuex状态管理 App.vue 根组件 main.js 项目启动js device-config.js 项目配置 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | export default { base: { platform: 'genie' , // 平台信息 controlType: 'rightAway' , // 蓝牙设备和WIFI设备该参数为'rightAway'时,控制设备立即下发指令 // 注 在 WIFI设备中,该值为 '' 时,控制设备会延时0.5秒下发,0.5秒内连续控制时,会继续延时0.5秒并把下发的这时间内的控制指令合起来一块下发 env: 'dev' , // icon: [], // 引入 iconfont.cn Symbol 下的链接 扩展 icon debugVConsole: false , // true/ false 使用天猫精灵打开面板 是否显示 vConsole setDeviceStatusInterval: 1000 , // 调用setDeviceStatus时等待间隔 }, debug: { stagingMap: 'release' , // 'pre2' 预发环境 'release' 线上环境 } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | export default { base: {}, debug: { isMock: true , // 是否开启mock, 开启mock后,默认getDeviceStatus和setDeviceStatus 将不会发起请求,其他api接口在mockConfig中自行设置mockApi,以重写sdk中的接口请求 mockConfig: { // mock 配置 mockApi: {}, // mock sdk中的其他接口 mockStatus: { // mock设备信息 attr: { onlinestate: 'online' , // mock设备状态 offline online }, // mock设备属性 errorInfo: {}, // mock设备上报的错误信息 scheduleInfo: {} // mock定时信息 }, mockGetType: 'success' , // 模拟get类型 success: 返回mock的成功数据; fail: 返回失败的mock数据 mockSetType: 'success' , // 模拟set类型 同上 mockGetSuccessData: null , // 获取设备状态成功的数据模拟 mockGetFailureData: null , // 获取设备状态失败的数据模拟 mockSetSuccessData: null , // 设置设备状态成功的数据模拟 mockSetFailureData: null // 设置设备状态失败的数据模拟 } } } |