Dynamic Setting UI assembly | Weixin public doc

# Dynamic Setting UI assembly

From the version 1.1.0 Get started, support to get the conversation UI Components, Obtain ui Components can be accessed to inputVoiceStart, inputVoiceEnd 、send Three UI Method. Note that this method must be used when using the plugin UI In the case of the use of

Introduces the plugin and gets the current UI assembly

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()

Events to be triggered when the user needs to initiate speech input

// Events that need to be triggered when the user starts speech input
// The inputVoiceStart event is thrown inside the operateCard plug-in after calling this method. Note that listening on the operateCard component
chat.inputVoiceStart()

Event to be triggered when the user needs to end speech input

// Events to be triggered when a user terminates speech input
// The inputVoiceEnd event is thrown inside the operateCard plug-in after calling this method. Note that listening on the operateCard component
chat.inputVoiceEnd()

Events that need to be triggered when a user needs to send a message

// Events that need to be triggered when a user needs to send a message
// After calling this method, the plug-in will actively send a message, if you want to send quietly do not want the user to perceive, then set silence to true.
chat.send(" Hello! " , {
    silence: false //Silence indicates whether the front-end is displayed when the query is sent, and the default is false front-end display
})

# Dynamic setting guideList

From the version 1.1.0 To start, support the method of changing the user prompt at any time according to the context

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.setGuideList(["Contents" "Content"])

# Dynamic setting textToSpeech

From the version 1.1.0 Start, support for changing whether to open voice broadcast at any time according to the context

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.setTextToSpeech(false)

# Dynamic Set Welcome Words

From the version 1.1.2 Start, support dynamic modification of welcome

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.setWelcome(" Hello, may I help you? ")

# Dynamically set the welcome of the image type

From the version 1.1.5 Start, support dynamic modification of welcome

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.setWelcomeImage(URL address)

# Dynamically clear local cached chat history

From the version 1.1.5 Start, support for dynamic clearing of local cached chat history

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.clearChatRecord()

# Dynamically setting the chat background

From the version 1.1.2 Start, support dynamic setting chat background

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.setBackground("rgba(247,251,252,1)")

# Dynamic setting input of focus state

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.editFoucs(true)

# Dynamically scroll the page to the latest chat history

var plugin = requirePlugin("chatbot")
var chat = plugin.getChatComponent()
chat.scrollToBottom()

# Dynamically Set Chat Background Get UI Components, Control UI Conduct Send a message, start recording, end recording

From the version 1.1.0 Get started, support to get the conversation UI Components, Obtain ui Component can be accessed after theinputVoiceStart、 inputVoiceEnd 、send Three UI method

var plugin = requirePlugin("chatbot")
const chat = plugin.getChatComponent()

//Start recording.
chat.inputVoiceStart()

//End recording
chat.inputVoiceEnd()

//Send Message
chat.send(" Hello! ")

# open web-view page

Click on the link in the robot answer to jump Webview, requires the developer to configure their own hosting webview Page, url The Mini Program page corresponding to the field needs to be created by the developer himself Developers need to configure the appropriate domain name in the background of the Mini Program

<chat bind:openWebview="openWebView" />


openWebview: function(and) {
    let url = e.detail.weburl
    wx.navigateTo({
      url: `/pages/webviewPage/webviewPage?url=${url}`
    })
  }

# Open the Mini Program

Click on Mini Program in the robot answer and you need to jump in the developer's own Mini Program. The developer needs to specify in the Mini Program configuration the appId

<chat bind:openMiniProgram="openMiniProgramme" />

openMiniProgram(and) {
   let {appid, pagepath} = and.detail
   if (appid) {
        wx.navigateToMiniProgram({
            appId: appid,
            path: pagepath,
            extraData: {},
            envVersion: "",
            success(nothing) {
                // Open successfully
            }
        })
    }
}