基于Hbuilder X的uni-app连接OneNET云平台及AI交互 实战指南（一）——Token生成全流程解析_uniapp连接onenet云平台

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、前期准备
• • 1. 软件环境配置
• 二、HBuilderX的外部环境搭建
• • 1 .注册账号与创建项目
  • 2. 下载插件并运行
  • 界面预览验证
• 二、token生成器的外部环境搭建
• 三、核心代码解析
• • 1.代码如下（示例）：
  • 2.关键函数说明：
• 四、关键参数获取指南
• • 1. user_id
  • 2. author_key
  • 3. version
  • 4. 总结参数
• 五、调试与验证
• • 1.成功标志
  • 2.常见问题排查
• 总结

前言

本系列将以0基础新手视角，完整演示从账号注册到云端数据可视化的全流程，涵盖token生成、获取云平台数据，MQTT命令下发及代码实现。
🔗 ​配套学习：建议结合《基于ArduinoESP32-S3连接OneNET云平台指南》理解硬件端对接逻辑
注：此版本基于OneNET云平台的数据流模型，与物模型不同。但也会附上相关代码。

为什么需要Token？
在物联网开发中，Token相当于设备与云平台之间的「数字钥匙」，用于验证身份和权限。本文将以零基础视角，手把手教你通过uni-app生成OneNET云平台的安全凭证。

（一）本文为基于Hbuilder X的uni-app生成OneNET云平台的token

一、前期准备

1. 软件环境配置

需下载HBuilderX 4.61+
该文档是官方的安装包与安装步骤教程

二、HBuilderX的外部环境搭建

1 .注册账号与创建项目

1.打开软件→左下角→注册并登录账号。

2.点击“创建项目”，可在桌面先建一个文件夹“HBuilderX”，将本次所做项目都放在其中。
本次项目：P1token生成器，Vue2

2. 下载插件并运行

1.点击各级文件夹→双击“index.vue”→运行到内置浏览器
注：期间会提示下载各类插件，全都同意

界面预览验证

注：当看到如下效果时，说明基础环境已就绪：

二、token生成器的外部环境搭建

1.打开OneNET云平台→“服务与支持”→“下载专区”

2.下滑→找到“Node V1.0.0”，需使用魔法上网

3.下载后解压→打开对应文件夹，将《key.js》复制粘贴至《P1token生成器》内
注：要放对路径，不是放在子文件夹内

三、核心代码解析

1.代码如下（示例）：

注：修改author_key；version: ‘2022-05-01’；user_id；（version一般一致）

<template> <!-- 使用Flex布局居中显示LOGO和Token --> <view class=\"content\"> <image class=\"logo\" src=\"/static/logo.png\"></image> <view class=\"text-area\"> <text class=\"title\">{{token}}</text> <!-- 双花括号绑定数据 --> </view> </view></template><script>const { createCommonToken } = require(\'@/key.js\') // 导入鉴权模块export default { data() { return { token: \'\' } }, // 初始化数据 onLoad() { // 页面加载时自动执行 const params = { author_key: \'your author_key\', // 身份标识 version: \'2022-05-01\', // 鉴权协议版本 user_id: \'your user_id\' // 开发者id } this.token = createCommonToken(params) // 调用生成函数 console.log(\'生成Token:\', this.token) // 控制台输出验证 }}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}</style>

2.关键函数说明：

模板层（展示逻辑）

<template> <!-- 使用Flex布局居中显示LOGO和Token --> <view class=\"content\"> <image class=\"logo\" src=\"/static/logo.png\"></image> <view class=\"text-area\"> <text class=\"title\">{{token}}</text> <!-- 双花括号绑定数据 --> </view> </view></template>

逻辑层（Token生成）

<script>const { createCommonToken } = require(\'@/key.js\') // 导入鉴权模块export default { data() { return { token: \'\' } }, // 初始化数据 onLoad() { // 页面加载时自动执行 const params = { author_key: \'your author_key\', // 身份标识 version: \'2022-05-01\', // 鉴权协议版本 user_id: \'your user_id\' // 开发者id } this.token = createCommonToken(params) // 调用生成函数 console.log(\'生成Token:\', this.token) // 控制台输出验证 }}</script>

样式层（UI适配）
设置 图片和文本的大小，形式，颜色

<style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}</style>

四、关键参数获取指南

1. user_id

1.将鼠标移至头像处，点击“安全设置”；

2. author_key

1.点击“查看”，输入对应信息，获取《用户aceess》 即 《author_key 》

3. version

1.打开OneNET云平台官网，打开文档中心，搜“安全鉴权”，下滑查看
安全鉴权

4. 总结参数

author_key: \'your author_key\',version: \'2022-05-01\',user_id: \'your user_id\',

五、调试与验证

1.成功标志

1. 将《三、核心代码》直接复制到index.vue中
   
2. 用快捷键 《ctrl + s》或者左上角文件，保存。 此时右边页面会自动更新。
3. 成功标志： 图标下面显示 加密字符串

2.常见问题排查

总结

本文搭建了基于Hbuilder X的uni-app生成OneNET云平台的token，下篇文章将讲解对应的云平台信息获取和命令下发。下篇文章，下周一更新