天猫精灵IoT开放平台
非iot业务 sdk
更新时间：2019/06/27
访问次数：7630
一、环境配置
安装cnpm（阿里外网环境）
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装tnpm（阿里内网环境）
tnpm是阿里定制的npm，内部私有的模块都会发布到这里（官网：http://web.npm.alibaba-inc.com/ ）
npm i -g npminstall --registry=http://registry.npm.alibaba-inc.com npminstall -g tnpm --registry=http://registry.npm.alibaba-inc.com
安装vue-cli
window系统： cnpm install ai-genie-cli -g MAC系统： sudo cnpm install ai-genie-cli -g
二、项目开发
第1步、登录天猫精灵APP
1、调试设备时请保持APP的登录状态
第2步、本机的本地电脑配置
1、 window host 路径：C:\Windows\System32\drivers\etc
2、 mac host 路径：直接用快捷键 command+shift+g，弹出框，输入 /etc/hosts
// 在host中添加 127.0.0.1 test.open-iot.tmall.com
第3步、创建项目、安装开发环境
genie init projectName // 创建项目 后选择 非iot业务 cd projectName // 进入项目 cnpm install // 安装依赖
选择非iot业务
注：安装依赖可以用tnpm/cnpm 会比 npm install 快一些
第4步、开发调试
1、启动项目，会打开web端调试：
- 当前登录态，显示我的设备面板
- 当前非登录态，显示淘宝登录页
npm run dev // 运行项目 // 注： 打包时本地资源不参与打包 如需要使用图片 请在这里上传 tu.taobao.com
开发中相关的工具文档：
1、定位问题 & 工具 & 反馈问题
2、面板组件常见问题 FAQ
注：如图、默认会有一个Demo页面
2、使用天猫精灵APP代理的方式去调试
注意点： 1、可以更好的查看面板、建议在PC调完以后调试该方式 2、需要在 webpack.dev.conf.js 文件的 devServer 加上 inline: false 关闭项目热更新（关闭代码修改实时更新） 不然会导致Native导航条展示不正常，如果不需要看Native导航条则不需要设置 inline: false 并重新 npm run dev 才能生效
3、其它相关
第5步、打包、压缩、发布
1、本地代码打包
npm run build
2、安装lzip压缩包工具
// 全局安装 lzip cnpm install -g lzip
3、生成压缩包
// 在 my-project 处使用 lzip // 在my-project 平级目录 生成压缩包 成功 my-project.zip
三、项目配置说明
目录结构：
dist 打包后的文件
app.css
app.js
index.html
src 本地文件（代码编辑）
assets 静态资源
less 脚手架公用 css
images 静态图片
page 页面
router 路由
store vuex状态管理
App.vue 根组件
main.js 项目启动js
device-config.js 项目配置
device-config api全量举例说明：（src 下的 device-config.js 文件配置）
export default {
base: {
platform: 'genie', // 平台信息
env: 'dev', // 打开开发中所需要的功能 例：new VConsole()
icon: [], // 引入 iconfont.cn Symbol 下的链接 扩展 icon
pollingInterval: 5000, // 轮询间隔
setDeviceStatusInterval: 1000, // 调用setDeviceStatus时等待间隔
},
debug: {
stagingMap: 'release', // 'pre2' 预发环境 'release' 线上环境
}
}
MOCK数据：（src 下的 device-config.js 文件配置）
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 // 设置设备状态失败的数据模拟
}
}
}
四、参考资料
- vue :https://cn.vuejs.org/v2/guide/installation.html
- vuex（状态管理）:https://vuex.vuejs.org/zh/guide/
- vue api: https://cn.vuejs.org/v2/api
