在R Shiny Conductor Tour中嵌入Javascript的实现示例

我当初在使用Shiny的Conductor包做引导 tour 时，卡了好长时间——官方文档只提到new()方法的onComplete、onCancel、onShow等参数可以填入待执行的JavaScript代码，但完全没给示例！对于几乎不懂JS的我来说，这真的很头疼。

后来我摸索出了一种可行的方式：用JavaScript更新Shiny的input$变量，这样就能在server函数里用observeEvent()捕捉到这个变量的变化，从而实现用tour步骤控制输入组件的效果。

核心思路 #

通过Shiny.setInputValue()这个Shiny内置的JS函数，我们可以在tour的各个回调事件里更新指定的input变量。这个变量可以是布尔值、数字或者字符串类型，完全根据你的需求来。

完整代码示例 #

library(shiny)
library(conductor)

ui <- fluidPage(
  use_conductor(),
  # 启动向导的按钮
  actionButton(inputId = "ui_start_tour", label = "Start Tour"),
  # 展示向导状态
  verbatimTextOutput(outputId = "tour_status")
)

server <- function(input, output, session) {
  # 创建Conductor向导实例
  conductor <- Conductor$new()$
    step(
      id = "step1",
      title = "Welcome",
      text = "This is the first step.",
      # 进入步骤时更新input$my_tour_state为true
      onShow = "Shiny.setInputValue('my_tour_state', true, {priority: 'event'})"
    )$
    step(
      id = "step2",
      title = "Second Step",
      text = "This is the second step.",
      # 进入步骤时更新input$my_tour_state为false
      onShow = "Shiny.setInputValue('my_tour_state', false, {priority: 'event'})"
    )
  
  # 点击按钮启动向导
  observeEvent(input$ui_start_tour, {
    conductor$init()$start()
  })
  
  # 实时展示向导状态
  output$tour_status <- renderText({
    paste("Tour status:", input$my_tour_state)
  })
}

shinyApp(ui, server)

代码说明 #

• 当进入第一步时，onShow里的JS代码会把input$my_tour_state设为true；进入第二步时则设为false。
• 在server端，我们通过renderText实时展示这个变量的值，你也可以用observeEvent(input$my_tour_state, {...})来触发更多自定义逻辑。
• {priority: 'event'}参数确保这个输入更新会被Shiny立即处理，避免延迟。

希望这个示例能帮你节省时间，不用像我当初那样反复试错啦！

内容的提问来源于stack exchange，提问作者Nevil