React入门级项目：摸鱼炒股神器

Niko_web
1,121 阅读4分钟

作为一名韭菜，一直都有使用表格来管理投资理财的习惯

上班时间盯盘时（希望老板不会发现这篇文章），通常都会先在手机/电脑上打开券商App，输入对应的股票代码，获取最新的行情数据，然后再对比表格上的数据指标，判断是买入还是卖出。

这样子炒股，简直比我上班敲代码ctrl c + v还累，不过自己写一个足够好用的盯盘程序一样要花不少的心思，所以就一直没动。

直到上手了维格表，对于看盘又有了新的思路——通过维格表小程序的拓展功能，不需要切换设备和页面，在维格表中就可以轻松查看股市行情并管理投资标的

实时预览.gif

酷炫之中不失方便，而 vika 小程序的开发也十分简单，只需要 20 行代码即可实现。

先决条件

开发者技能

在创建你的第一个小组件之前，请确保你已经掌握了如下技能：

  • 熟悉维格表的基本概念，特别是记录、字段、视图

    • 熟悉 JavaScript 语言和 React 框架。TypeScript 是加分项，可以帮助你开发更稳定的小组件
    • 如果你还没有接触过 JavaScript，但对 Web 开发有浓厚的兴趣，推荐你阅读 MDN JavaScript 教程 和 React 教程

  • 小组件 SDK 中使用的核心能力包括 React Hooks 和 React 函数式组件

  • 了解 npm 或者 yarn 包管理器

  • 熟悉最基础的命令行语句，比如 cd 进入一个目录，最基础的就够用了。

开发环境要求

  • Google Chrome 浏览器
  • 安装 NodeJS，推荐使用最新版本 v14.16.0，理论上 12 版本以上都可以。推荐使用 nvm 管理你的 node 版本。
  • 需要一个代码编辑器，推荐使用 VS Code

接下来我会给大家演示一下，这个小程序如何通过20行代码实现股票k线图预览的功能，让你在维格表上就能看行情～

在文章的末尾，我也附上了Github源码地址，有兴趣的小伙伴可以Star一下⭐️～

前期配置

首先，我们需要根据《快速上手开发 | 维格表开发者中心》的提示，创建一个新的小程序模板，我的项目名是“candlestick-chart”

注：如果你是首次开发，还需要先安装 NodeJS，在终端逐行执行以下指令即可

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
​
nvm install node

配置完成后，你可以在维格表左侧可以预览小程序

配置成功.png

梳理逻辑

首先，我们需要明确目的和业务逻辑：点击单元格，识别这条记录的股票代码，根据配置好的API接口请求数据

而我们要做的是，实现这个业务逻辑所需要的代码，最终将界面上的“🚀Hello World”替换成“k线图”

怎么做呢？

第一步，在src目录下新建一个“candlestick_chart.tsx”的组件（文件），先搭建html结构

搭建html结构.png

然后将这个程序导入到“index.tsx”入口文件中，并替换掉原来的“🚀hello world”

import {CandlestickChart} from './candlestick_chart'

导入组件.png

效果如图所示

导入组件预览.png

现在，你已经搭好框架啦，接下来只需要完善少许逻辑，就能跑起来了

先回到“candlestick_chart.tsx”，我们需要在这个文件里完善k线图预览的逻辑部分

首先，我们需要用到两个hooks，可以先在开头导入它们

import {useActiveCell, useRecord} from '@vikadata/widget-sdk';

来看看官方文档是如何介绍他们的

useActiveCellHooks.png

useRecordHooks.png

简而言之，当我们点击一个单元格时，会激活并且返回此单元格的信息，这时我们就可以获取他的recordId，并且作为useRecord的参数

而useRecord能够加载对应recordId的记录信息，最后我们再调用getCellValueString方法来获取该行的股票代码信息

getCellValueStringHooks.png

实现代码如下（我的股票代码列ID为：fldFtjhc7O2qS，你也可以在API面板查看自己的列ID）

    const activeCell = useActiveCell();
​
    const activeRecord = useRecord(activeCell?.recordId)
​
    const stockCode = activeRecord?.getCellValueString('fldFtjhc7O2qS')

贵州茅台.png

提示：维格表中的股票代码，需要在前面加上交易所的代号，比如「贵州茅台」的代码应该是sh600519，目前仅支持A股。

接下来，我们需要用新浪提供的API来获取各个时间段行情图（把末尾的“sh601006”替换成stockCode变量）

查看日K线图：image.sinajs.cn/newchart/da…

分时线的查询：image.sinajs.cn/newchart/mi…

日K线查询：image.sinajs.cn/newchart/da…

周K线查询：image.sinajs.cn/newchart/we…

月K线查询：image.sinajs.cn/newchart/mo…

// 获取分时k线图
​
const minLineUrl = `http://image.sinajs.cn/newchart/min/n/${stockCode}.gif`
​
// 获取日k线图
​
const dailyLineUrl = `http://image.sinajs.cn/newchart/daily/n/${stockCode}.gi`
​
// 获取周k线图
​
const weeklyLineUrl = `http://image.sinajs.cn/newchart/weekly/n/${stockCode}.gif`

最后一步，在html结构中的<img>标签里补充对应的src属性，就大功告成啦～

补充src.png

最终效果预览.gif

现在，就算不懂编程，相信也学会了如何构建一个股票k线图预览的小程序，直接开始ctrl c + v就行。

对代码感兴趣的大佬，我已经将源码上传至Github：github.com/vika-widget…（欢迎Star⭐️）

如果有疑问，可以结合源码一起去完善你的代码～

备注：本文中的小程序示例仅用于演示，k线图接口暂时仅支持A股，你也可以用其他接口代替

avatar
文章
阅读
粉丝