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

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

---

前言

本系列将以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，下篇文章将讲解对应的云平台信息获取和命令下发。下篇文章，下周一更新