Barrier-free toolbar technical scheme based on WeChat applet

Abstract

The invention discloses a barrier-free toolbar technical scheme based on a WeChat applet, and relates to the technical field of front-end development, the barrier-free toolbar technical scheme comprises a barrier-free toolbar system, the barrier-free toolbar system comprises a theme style component, a state management module, a global configuration tool, a user interaction component and a barrier-free function component, the theme style component comprises a black.js theme style file, a blue.js theme style file, a light.js theme style file, a white.js theme style file and a tellow.js theme style file and is used for defining different color matching schemes, the state management module is used for managing states related to theme styles by utilizing a theme.js file, and according to the barrier-free toolbar technical scheme based on the WeChat applet, through the color matching switching and click screen reading functions, the color matching of the WeChat applet can be realized, and the color matching efficiency of the WeChat applet can be improved. The browsing experience of users with visual impairment and the like is obviously improved; meanwhile, slot configuration and global introduction are adopted, the workflow of developers is simplified, the technical threshold is reduced, in addition, various crowds with abnormal color vision are supported, the containment of digital products is enhanced, and the universal accessibility of Web content is powerfully promoted.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, specifically to a technical solution for an accessibility toolbar based on WeChat mini-programs. Background Technology

[0002] With the rapid development and widespread adoption of internet technology, the Web has become a core platform for information dissemination, knowledge sharing, business transactions, and social interaction globally, carrying massive amounts of information resources and service functions. In this digital wave, the accessibility of Web content is not only related to whether people with disabilities can access and utilize these resources without barriers, but also directly affects the overall inclusiveness and fairness of society and the comprehensive improvement of user experience, making its importance increasingly prominent.

[0003] With the development of the internet, the accessibility of web content has become increasingly important. Although many tools and technologies are available to improve the accessibility of digital products, there are still many shortcomings in practical applications: Lack of targeted front-end solutions: Mobile accessibility tools offer limited functionality and lack customization for mini-programs, failing to meet the needs of all users. Poor user experience: Many websites offer limited accessibility features for visually impaired users, making it difficult for them to have a good browsing experience; High implementation complexity: Developers often face complex configuration processes and technical hurdles when attempting to implement higher levels of accessibility support, which increases project costs and time consumption. To address this, we propose an accessibility toolbar technical solution based on WeChat Mini Programs. Summary of the Invention

[0004] The purpose of this invention is to provide a technical solution for an accessibility toolbar based on WeChat mini-programs to solve the problems mentioned in the background.

[0005] To achieve the above objectives, the present invention provides the following technical solution: an accessibility toolbar technical solution based on WeChat Mini Program, including an accessibility toolbar system, wherein the accessibility toolbar system includes a theme style component, a status management module, a global configuration tool, a user interaction component, and an accessibility function component; Theme style components: Includes black.js, blue.js, light.js, white.js, and yellow.js theme style files, used to define different color schemes; State management module: The theme.js file is used to manage the state of theme styles, including theme switching and saving the current theme, to ensure the consistency of theme state in the global scope; Global configuration tool: Utilize the writePageMeta.js file for global configuration of the style header, automatically inserted in the page file via custom npm command <page-meta>The label realizes global injection and unified management of styles. The user interaction component includes: The floatingBtn.vue file is a floating ball component that provides an intuitive operation interface, which can be dragged arbitrarily without affecting other operations, and is the main entrance for user interaction with the accessibility toolbar. The globalBtn.vue file is a global accessibility toolbar component that integrates the functions of floating ball, read screen, and color matching plug-ins, facilitating unified calling and management in the global scope. The accessibility function component: readScreen.vue file: read screen mode component, responsible for converting text content on the page into speech for playback, supporting users to obtain information through hearing.

[0006] Preferably, the main style file in the theme style component supports red-green color blindness, blue-yellow color blindness and other types of color vision abnormality by default, and supports extension.

[0007] Preferably, the writePageMeta.js file in the global configuration tool can be individually configured through the npm custom configuration command: npm run writePageMeta, and the global style header can be configured.

[0008] Preferably, the accessibility toolbar system further includes a themeMixin.js file as an imported mixin file, which is used to uniformly process color matching, read screen switch, state and display information, and ensure the consistency and maintainability of these functions in the global scope.

[0009] Preferably, the accessibility toolbar system further includes a page.json file for importing global plug-ins and configuring related parameters of the global accessibility toolbar.

[0010] Preferably, the accessibility toolbar system further includes a main.js file for importing global mixin files and other necessary configurations to ensure that the system can correctly load and initialize the accessibility toolbar when starting.

[0011] Preferably, theme switching: random theme switching by importing style files, theme switching by traversing the corresponding color file directory, returning the corresponding style group, obtaining all page file paths through page.json provided by uniApp, and embedding the color switch into the floating ball through the page-meta tag inserted in the header by the npm custom command: npm run writePageMeta.

[0012] Preferably, the read-screen mode component, write readScreen.vue mode file, write global element click event in themeMixin.js mixin file, when the event is triggered, get the corresponding label text content through obj.target.dataset.label, return audio file through TTS (text to speech), and use wx.createInnerAudioContext to play audio stream.

[0013] Preferably, long text continuous reading supports batch reading and automatically loads the next paragraph in each reading completion event.

[0014] Preferably, the barrier-free toolbar system is automatically introduced through page.js, the mixin file needs to be introduced in main.js, the corresponding label is added to the page that needs to be read, and the barrier-free toolbar system supports two modes of partial read-screen and global read-screen.

[0015] Compared with the prior art, the beneficial effects of the present application are: Through the color matching switching and click read-screen function, the present application significantly improves the browsing experience of users with visual impairment and the like; at the same time, the present application adopts slot configuration and global introduction, simplifies the developer workflow, reduces the technical threshold, supports multiple color vision abnormal populations, enhances the inclusiveness of digital products, and effectively promotes the universal accessibility of Web content. BRIEF DESCRIPTION OF DRAWINGS

[0016] Figure 1 The present application is installed with an initialization component schematic diagram. Figure 2 The present application is a user end tool bar effect diagram. DETAILED DESCRIPTION

[0017] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor are within the scope of protection of the present application.

[0018] Embodiment: please refer to Figure 1 and Figure 2 The present application provides a technical solution: a barrier-free toolbar technical solution based on WeChat applet, including a barrier-free toolbar system, the barrier-free toolbar system including a theme style component, a state management module, a global configuration tool, a user interaction component and a barrier-free function component. Theme style components: Include black.js, blue.js, light.js, white.js, and yellow.js theme style files to define different color schemes. State management module: Use the theme.js file to manage the state related to theme styles, including theme switching and current theme saving, to ensure the consistency of theme state in the global scope. Global configuration tool: Use the writePageMeta.js file for global configuration of the style header. Through custom npm commands, automatically insert <page-meta>The label realizes global injection and unified management of the style; The user interaction component comprises: The floatingBtn.vue file is a floating ball component, which provides an intuitive operation interface, and the user can drag it at will without affecting other operations, and is the main entrance for the user to interact with the accessibility toolbar; The globalBtn.vue file is a global accessibility tool component, which integrates the functions of the floating ball, read screen and color matching plug-ins, and is convenient for unified calling and management in the global scope. The accessibility function component: the readScreen.vue file is a read screen mode component, which is responsible for converting the text content on the page into voice for playing, and supports users to obtain information through hearing.

[0019] As a further limitation of the application, the subject style file in the subject style component supports red-green color blindness, blue-yellow color blindness and other types of color vision abnormality groups by default, and supports extension.

[0020] The writePageMeta.js file in the global configuration tool can be customized through the npm command: npm run writePageMeta, and the style header can be globally configured when needed.

[0021] The themeMixin.js file is introduced as a mixed file in the accessibility toolbar system, which is used to uniformly process the switching, state and display information of color matching and read screen, and ensure the consistency and maintainability of these functions in the global scope.

[0022] The page.json file is used to introduce global plug-ins and configure related parameters of the global accessibility toolbar.

[0023] The main.js file is used to introduce global mixed files and other necessary configurations, so that the system can correctly load and initialize the accessibility toolbar when starting.

[0024] Theme switching: the theme is randomly switched by introducing the style file, and after the theme is switched, the corresponding color file directory is traversed to return the corresponding style group, all page file paths are obtained through page.json provided by uniApp, and the color matching switch is embedded into the floating ball by inserting the page-meta tag in the header through the npm custom command: npm run writePageMeta.

[0025] The read-screen mode component writes the readScreen.vue mode file, writes the global element click event in the themeMixin.js mixin file, and when the event is triggered, the corresponding label text content is obtained through obj.target.dataset.label, the audio file is returned through TTS (text-to-speech), and the audio stream is played using wx.createInnerAudioContext.

[0026] Long text continuous reading, supporting batch reading, automatically loading the next paragraph in each reading completion event.

[0027] The barrier-free toolbar system is automatically introduced by page.js, and the mixin file needs to be imported in main.js. The corresponding label is added to the page that needs to be read, and the barrier-free toolbar system supports two modes: partial reading and global reading.

[0028] The specific implementation of the embodiment is: (1) Write color matching switching Randomly switch themes by importing style files: import light from "@ / common / color / light"; import blue from "@ / common / color / blue"; import black from "@ / common / color / black"; import yellow from "@ / common / color / yellow"; import white from "@ / common / color / white"; setTheme(state, themeName = "light") { state.themeName = themeName }, After the theme is switched, the corresponding color file directory is traversed to return the corresponding style group, and then the page.json provided by uniApp is used to obtain all page file paths. Through the npm custom command: npm run writePageMeta; the page-meta tag is inserted in the header.

[0029] The writePageMeta.js file is as follows: function writePageMeta() { let total = 0 appJson.subPackages.forEach(subInfo = { subInfo.pages.forEach(pageInfo = { let pagePath = subInfo.root + ' / ' + pageInfo.path; let filePath = path.resolve(__dirname, pagePath) const wxml = fs.readFileSync(filePath + '.vue', 'utf8') let hasPageMeta = wxml.match( / <page-meta[^>]+> / g); if (!hasPageMeta) { const templateStart = wxml.indexOf(' <template> ') + ' <template>'.length; const newContent = wxml.slice(0, templateStart) + '\n <page-meta :page-style="theme">< / page-meta> ' + wxml.slice(templateStart); fs.writeFileSync(filePath + '.vue', newContent, 'utf8') console.log(total, `Success: ${pagePath} page has been added`) total = total + 1; } else { console.log(`Failed: ${pagePath} page already exists`) } }) }) console.log(`\x1b[32m ${total} write completed in total. \x1b[0m`); } Embed the color-matching switch into the floating ball.

[0030] (2) Write a screen reader: First, write the readScreen.vue mode file for screen reading, and write global element click events in the themeMixin.js mixin file. When the event is triggered, get the text content of the corresponding label through obj.target.dataset.label, and return the audio file through TTS (text-to-speech). Since the ordinary audio playback API provided by WeChat does not support the format, wx.createInnerAudioContext is used to play the audio stream.

[0031] this.audioCtx.decodeAudioData(res, (buffer) => { / / Create audio source _this.audioSource = _this.audioCtx.createBufferSource(); _this.audioSource.buffer = buffer; / / Connect audio source to output _this.audioSource.connect(_this.audioCtx.destination); / / Play audio _this.audioSource.start(); / / Listen for playback end event _this.audioSource.onended = () => { console.log('Audio playback finished'); }; }, (err) => { console.error('Failed to decode audio data', err); }); In some scenarios, when long texts need to be read continuously, recognizing a large amount of text at once may cause network congestion and a poor user experience. Therefore, it is supported to read in batches and automatically load the next paragraph after each reading is completed.

[0032] this.audioCtx.decodeAudioData(res, (buffer) => { / / Create audio source _this.audioSource = _this.audioCtx.createBufferSource(); _this.audioSource.buffer = buffer; / / Connect audio source to output _this.audioSource.connect(_this.audioCtx.destination); / / Play audio _this.audioSource.start(); / / Listen for playback end event _this.audioSource.onended = () => { if (_this.isRest) { _this.isRest = false } else { if (_this.readIndex < _this.textArray.length) { console.log('next'); _this.playAudio(_this.readIndex); } else { console.log('play end'); } } }; (3) Write global accessibility toolbar: Because the small program side and web page in some functions have some differences, such as in the loading of global plug-ins, it is necessary to load through the installation of vue-inset-loader plug-in. Therefore, import global plug-in in page.json as follows: "insetLoader": { "config": { "confirm": " <global-btn ref="globalRef">< / global-btn> " }, "label": [ "confirm" ], "rootEle": "view" }, Global-btn component contains the import of floating ball, screen reading, color matching plug-in, so as to facilitate global use. Write global mixin file themeMixin.js to uniformly process color matching, screen reading switch, state, display and other information. If you need to expand color matching, you can add custom color matching file in theme.js. After import, the system will automatically read it. The floating ball style is as shown in Figure 2 .

[0033] (4) System call: The system is automatically imported by page.js. It is necessary to import the mixin file in main.js, and then add the corresponding label to the page that needs to be read. The system supports two modes of partial screen reading and global screen reading, as shown in Figure 1 .

[0034] The component project structure is as follows:

[0035] It is to be understood that the terminology used herein such as first and second, and the like, is only used to distinguish one entity or action from another entity or action, and does not necessarily require or imply any such actual relationship or order between such entities or actions. Moreover, the terms "comprises", "comprising", or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can include other elements not expressly listed or inherent to such process, method, article, or apparatus.

[0036] While embodiments of the present application have been shown and described with reference to particular embodiments thereof, it will be understood by those skilled in the art that various changes in form and details can be made therein without departing from the spirit and scope of the application. The scope of the application is defined by the appended claims and their equivalents.< / template> < / template>

Claims

1. A technical solution of an accessibility toolbar based on a WeChat mini-program, characterized in that: The system includes an accessibility toolbar system, which includes a theme style component, a state management module, a global configuration tool, a user interaction component, and an accessibility function component; The theme style component includes black.js, blue.js, light.js, white.js, and yellow.js theme style files, which are used to define different color schemes; The state management module uses the theme.js file to manage the theme-related state, including theme switching and current theme saving, to ensure the consistency of the theme state in the global scope; Global configuration tool: Use the writePageMeta.js file for global configuration of the style header, automatically inserted in the page file by custom npm command <page-meta>Labels are used to globally inject and uniformly manage styles. The user interaction component includes: The floatingBtn.vue file: a floating ball component that provides an intuitive interface for users to drag and interact with, without affecting other operations, and is the main entrance for users to interact with the accessibility toolbar. The globalBtn.vue file: a global accessibility toolbar component that integrates floating ball, screen reading, and color matching plugin functions for unified calling and management in the global scope. The accessibility function component includes the readScreen.vue file: a screen reading mode component that converts text content on the page into speech for playback, supporting users to access information through hearing.

2. The micro-channel applet-based accessibility toolbar technical solution of claim 1, wherein: The main style files in the theme style component support red-green color blindness, blue-yellow color blindness, and other types of color vision abnormality groups by default and support extension.

3. The micro-channel applet-based accessibility toolbar technical solution of claim 1, wherein: The writePageMeta.js file in the global configuration tool can be individually configured through the npm custom configuration command: npm run writePageMeta, and the global style header can be configured.

4. The micro-channel applet-based accessibility toolbar technical solution of claim 1, wherein: The accessibility toolbar system also includes the themeMixin.js file as an imported mixin file, which is used to uniformly handle color matching, screen reading switches, states, and display information to ensure consistency and maintainability of these functions in the global scope.

5. The micro signal program-based barrier-free toolbar technical solution according to claim 1, characterized in that: The accessibility toolbar system also includes the page.json file, which is used to import global plugins and configure related parameters of the global accessibility toolbar.

6. The micro-channel app-based accessibility toolbar technical solution of claim 1, wherein: The accessibility toolbar system also includes the main.js file, which is used to import global mixin files to ensure that the system can correctly load and initialize the accessibility toolbar when starting.

7. The micro-channel app-based accessibility toolbar technical solution of claim 1, wherein: Theme switching: Randomly switch themes by importing style files. After theme switching, traverse the corresponding color file directory to return the corresponding style group. Use page.json provided by uniApp to get all page file paths. Use the npm custom command: npm run writePageMeta to insert the page-meta tag in the header and embed the color switch in the floating ball.

8. The micro-channel app-based accessibility toolbar technical solution of claim 1, wherein: The read-screen mode component writes the read-screen readScreen.vue mode file, writes the global element click event in the themeMixin.js mixin file, when the event is triggered, the corresponding label text content is obtained through obj.target.dataset.label, the audio file is returned through TTS, and the audio stream is played by using wx.createInnerAudioContext.

9. The micro-channel app-based accessibility toolbar technical solution of claim 8, wherein: Long text continuous reading, supporting batch reading, automatically loading the next paragraph in each reading completion event.

10. The micro-channel app-based accessibility toolbar technical solution of claim 1, wherein: The barrier-free toolbar system is automatically introduced by page.js, the mixin file needs to be introduced in main.js, the corresponding label is added to the page that needs to be read, and the barrier-free toolbar system supports two modes of partial reading and global reading.

Images