欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js制作xml在線編輯器實例

 更新時間:2021年08月24日 17:09:21   作者:韓子盧  
本文主要講解了利用js制作xml在線編輯器的實例,文中講解實例的圖片和代碼非常詳細,感興趣的小伙伴現(xiàn)在一起來看一看吧

前言

一年多沒更新博客了,原因是疫情期間《騎馬與砍殺2》發(fā)售,然后去寫游戲MOD去了。

用C#大概寫了7個月的游戲MOD,每天晚上肝到很晚,然后期間又因為介紹這個游戲MOD,學習了PR,然后做起了B站的UP主。

再到后面有了些別的想法和公司業(yè)務調(diào)整,也懶得寫博客,不知不覺一年多也就過去了。

收獲還是有的:

  • 比如在斷更這個MOD時,不論是在中文站還是3DM的MOD站,這個MOD的下載量都是排第一的,而且甩第二名相當遠。如果有玩《騎砍2》MOD的朋友,應該猜出來我是誰了。
  • 又比如在B站收獲了五千多粉絲,從一開始說話結結巴巴,到最后也還是說得結結巴巴。不過因為自己的剪輯,觀看效果也還不錯。
  • 又比如深刻認識到做個UP和主播有多麻煩,就我這拉胯的數(shù)據(jù)其實已經(jīng)領先了B站很多UP主了。UP主中更多的不是頭部UP,而是視頻0播放的UP主。你可以看一下B站的最新視頻,翻了幾十頁全是0播放,極為壯觀。
  • 有趣的人生體驗增加了

好了,言歸正傳。

現(xiàn)在基本MOD斷更,UP主也懶得繼續(xù)認真做了。

這里主要還是談一下技術相關的,也就是一個純前端實現(xiàn),用于寫MOD的XML在線編輯器。

它是一個仿VSCode風格的編輯器,可以自動學習游戲MOD文件生成約束規(guī)則,幫助我們實現(xiàn)代碼提示和代碼校驗。

更重要的是它可以直接修改你電腦上的的文件。

這是最終成品的代碼倉庫:https://gitee.com/vvjiang/mod-xml-editor

以及一張成品展示圖:

本篇博客所涉及到的技術:

  • CodeMirror
  • react-codemirror2
  • xmldom
  • FileReader
  • IndexDB
  • Web Worker
  • File System Access

讓我們從頭開始講起。

在線XML編輯器的需求

在做《騎砍2》的MOD時,需要經(jīng)常寫XML文件。

因為騎砍2的數(shù)據(jù)配置就是以XML的形式保存,然后MOD加載后,用MOD的XML去覆蓋官方自己的XML。

通常我們做MOD數(shù)據(jù)這塊,就是參考官方的XML自己去寫XML文件。

但是這樣會遇到一個問題,XML這東西沒有代碼提示和代碼校驗,寫錯一個字符也很難發(fā)現(xiàn)。

又或者有時候游戲更新,它的XML規(guī)則可能會改動。

官方是不會發(fā)布通知告訴你這些改動點的,所以如果你還是用的以前的元素和屬性那就等于寫錯了。

寫錯的結果往往是游戲加載MOD時直接崩潰,也不會給你任何提示,你只能慢慢去尋找BUG。

而騎砍2作為一個大型游戲,每次啟動時間都很長,導致你測試一個MOD數(shù)據(jù)是否配置正確的測試流程會非常長。

媽耶,多少個夜晚,游戲崩潰的那一瞬間,我人就崩潰了。

所以后來我就想著做一個XML在線編輯器去解決這個問題。

技術預研

可視化編程

其實我一開始沒有做這個XML編輯器的想法,因為這玩意一看就難搞,而是想通過一個可視化編程,通過拖拉拽元素和屬性的方式去實現(xiàn)。

你別說,我還真的做了一套初步方案出來,結果配置一個大型的XML這玩意拖拉拽無數(shù)次,心態(tài)逐漸爆炸,遂放棄此方案。

VSCODE插件

想看看有沒有什么VSCode插件可以進行代碼提示,有一個使用XSD進行代碼校驗的,貌似還是IBM提供的。

但是很可惜已經(jīng)廢棄,然后用不了了,放棄此方案。

在線編輯器

后來之所以使用在線編輯器的方式做這個,是因為三四月份公司這邊想要做一個在線編輯java項目環(huán)境xml配置文件的一個東西。

然后我這邊就嘗試著做了一個,了解到了CodeMirror。

CodeMirror通過自己配置tags來支持xml的代碼提示,但是并不支持xml的代碼校驗,所以需要自己去做xml的代碼校驗。

并且因為通常我們?nèi)バr瀤ml用的是xsd,所以還需要將xsd轉換成CodeMirror的tags配置。

這個不論是百度Google,還是說Github,都是查不到相對應的方案,所以只能自己寫代碼去實現(xiàn)。

在這個過程中,我對CodeMirror,xsdhtmllint都有了比較深的一個了解,最終完成了項目。

因為這是之前公司的代碼,所以這里就不放出來了。

總之,在這個過程中了解到CodeMirror這么個東西,才有了用CodeMirror去做MOD的在線編輯器的想法。

最初形態(tài):簡單的在線XML編輯器

好了,廢話不說,拿起鍵盤就是無腦干。

最初形態(tài)沒有左側的文件樹,只有一個單純的編輯器和一個規(guī)則學習彈框。

涉及到的技術就三個:

CodeMirror

FileReader

xmldom

用CodeMirror做編輯器

CodeMirror這塊主要使用的react的一個封裝版react-codemirror2,反正就是看文檔和Demo自己配。

唯一的難度就是網(wǎng)上一大堆的CodeMirror配置介紹很多都是抄來抄去,轉載來轉載去,還是個錯的,簡直離譜。

總之你想玩的話最好還是看官方文檔(https://codemirror.net/) 和文檔上的Demo,然后自己研究下,抄別人配置的話水很深,你把握不住的。

我這里貼一段我封裝的編輯器組件的配置代碼吧,反正絕對可用,絕大多數(shù)編輯器的功能都OK,不過僅僅適用于編輯XML。

里面的注釋比較詳盡了,包括常用的代碼折疊,代碼格式化都有,我就懶得一一講了,你可以參考官網(wǎng)自己看看。

其中的一些引用代碼我就不貼了,有興趣的可以去上面提到的代碼倉庫看看。

import { useEffect } from 'react'
import { Controlled as ControlledCodeMirror } from 'react-codemirror2'
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/ayu-dark.css'
import 'codemirror/mode/xml/xml.js'
// 光標行代碼高亮
import 'codemirror/addon/selection/active-line'
// 折疊代碼
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/comment-fold.js'
// 代碼提示補全和
import 'codemirror/addon/hint/xml-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import './hint.css'
import 'codemirror/addon/hint/show-hint.js'
// 代碼校驗
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import CodeMirrorRegisterXmlLint from './xml-lint'
// 輸入> 時自動鍵入結束標簽
import 'codemirror/addon/edit/closetag.js'
// 注釋
import 'codemirror/addon/comment/comment.js'

// 用于調(diào)整codeMirror的主題樣式
import style from './index.less'

// 注冊Xml代碼校驗
CodeMirrorRegisterXmlLint(CodeMirror)

// 格式化相關
CodeMirror.extendMode("xml", {
commentStart: "<!--",
commentEnd: "-->",
newlineAfterToken: function (type, content, textAfter, state) {
    return (type === "tag" && />$/.test(content) && state.context) ||
    /^</.test(textAfter);
}
});

// 格式化指定范圍
CodeMirror.defineExtension("autoFormatRange", function (from, to) {
var cm = this;
var outer = cm.getMode(), text = cm.getRange(from, to).split("\n");
var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
var tabSize = cm.getOption("tabSize");

var out = "", lines = 0, atSol = from.ch === 0;
function newline() {
    out += "\n";
    atSol = true;
    ++lines;
}

for (var i = 0; i < text.length; ++i) {
    var stream = new CodeMirror.StringStream(text[i], tabSize);
    while (!stream.eol()) {
    var inner = CodeMirror.innerMode(outer, state);
    var style = outer.token(stream, state), cur = stream.current();
    stream.start = stream.pos;
    if (!atSol || /\S/.test(cur)) {
        out += cur;
        atSol = false;
    }
    if (!atSol && inner.mode.newlineAfterToken &&
        inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || "", inner.state))
        newline();
    }
    if (!stream.pos && outer.blankLine) outer.blankLine(state);
    if (!atSol && i < text.length - 1) newline();
}

cm.operation(function () {
    cm.replaceRange(out, from, to);
    for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
    cm.indentLine(cur, "smart");
    cm.setSelection(from, cm.getCursor(false));
});
});

// Xml編輯器組件
function XmlEditor(props) {
const { tags, value, onChange, onErrors, onGetEditor, onSave } = props

useEffect(() => {
    // tags 每次變動時,都會重新改變校驗規(guī)則
    CodeMirrorRegisterXmlLint(CodeMirror, tags, onErrors)
}, [onErrors, tags])

// 開始標簽
function completeAfter(cm, pred) {
    if (!pred || pred()) setTimeout(function () {
    if (!cm.state.completionActive)
        cm.showHint({
        completeSingle: false
        });
    }, 100);
    return CodeMirror.Pass;
}

// 結束標簽
function completeIfAfterLt(cm) {
    return completeAfter(cm, function () {
    var cur = cm.getCursor();
    return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) === "<";
    });
}

// 屬性和屬性值
function completeIfInTag(cm) {
    return completeAfter(cm, function () {
    var tok = cm.getTokenAt(cm.getCursor());
    if (tok.type === "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length === 1)) return false;
    var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
    return inner.tagName;
    });
}

return (
    <div className={style.editor} >
    <ControlledCodeMirror
        value={value}
        options={{
        mode: {
            name: 'xml',
            // xml 屬性換行的時候是否加上標簽的長度
            multilineTagIndentPastTag: false
        },
        indentUnit: 2, // 換行的默認縮進多少個空格
        theme: 'ayu-dark', // 編輯器主題
        lineNumbers: true,// 是否顯示行號
        autofocus: true,// 自動獲取焦點
        styleActiveLine: true,// 光標行代碼高亮
        autoCloseTags: true, // 在輸入>時自動鍵入結束元素
        toggleComment: true, // 開啟注釋
        // 折疊代碼 begin
        lineWrapping: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
        // 折疊代碼 end
        extraKeys: {
            // 代碼提示
            "'<'": completeAfter,
            "'/'": completeIfAfterLt,
            "' '": completeIfInTag,
            "'='": completeIfInTag,
            // 注釋功能
            "Ctrl-/": (cm) => {
            cm.toggleComment()
            },
            // 保存功能
            "Ctrl-S": (cm) => {
            onSave()
            },
            // 格式化
            "Shift-Alt-F": (cm) => {
            const totalLines = cm.lineCount();
            cm.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines })
            },
            // Tab自動轉換為空格
            "Tab": (cm) => {
            if (cm.somethingSelected()) {// 選中后整體縮進的情況
                cm.indentSelection('add')
            } else {
                cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input")
            }
            }
        },
        // 代碼提示
        hintOptions: { schemaInfo: tags, matchInMiddle: true },
        lint: true
        }}
        editorDidMount={onGetEditor}
        onBeforeChange={onChange}
    />
    </div>
)
}

export default XmlEditor

學習XML,并提取出tags規(guī)則

當我們使用CodeMirror做一個簡單的編輯器時,想要進行一個XML的代碼提示,是需要使用到tags。

很明顯,不同的游戲有不同的XML規(guī)則,包括游戲更新之后XML規(guī)則也會更改。

所以我們必須要保證有一個機制去不斷地學習這些XML規(guī)則,所以這里我做了一個學習XML文件規(guī)則的彈窗去做這個事情。

點擊編輯器左上方的 約束規(guī)則——>新增約束規(guī)則

會彈出這樣一個彈窗:

通過FileReader讀取指定文件夾的XML文件,然后使用xmldom來依次解析這些xml文件的文本,生成文檔對象。

再分析這些文檔對象得到最終的tags規(guī)則。

這一步驟只需要對xml有所了解,其實也蠻基礎的,所以不講了。

總之現(xiàn)在我們完成了它的最初形態(tài),你每次使用它需要將你編輯的XML文件內(nèi)容復制到這個在線編輯器,編輯完后,再將完成的文本復制到原XML文件保存覆蓋。

進化形態(tài):加載樹形文件結構和全文件校驗功能的在線XML編輯器

上面的編輯器其實使用場景非常窄,只能在新寫一個XML時使用。

一個MOD往往幾十上百,甚至幾千個文件,不可能一個個粘貼到編輯器中進行校驗。

所以我們需要在這個編輯器中,加載MOD的所有XML文件,并進行一個代碼校驗。

涉及到的技術就兩個:

  • FileReader
  • Web Worker

左側文件樹

左側這個文件樹使用Ant Design的Tree組件完成,這里配置什么的就不講了。

在點擊打開文件夾這個按鈕時

同樣使用FileReader來讀取MOD文件夾中的文件。

但是FileReader獲取到的是一個文件數(shù)組,要想生成我們左側的樹形結構需要自己手動解析每個XML文件的路徑,并據(jù)此生成一個樹形結構。

全文件校驗功能

在打開文件夾的一瞬間,我們需要對全部的XML文件進行一次代碼校驗,如果校驗有誤,需要在左側文件夾上將相關的文件及它父級祖級的一系列文件夾全部標紅。

這個功能表面上很簡單,其實坑點很大,因為校驗的計算量實際上并不小,特別是你的MOD中有幾百幾千個文件的時候,非常容易搞得你js阻塞,頁面無響應。

在這里我使用了Web Worker新開一個線程去處理這個校驗過程,在校驗完成后將結果返回給我。

在這個過程中,我對Web Worker的使用也有了更多的了解。

印象中一直以為是一個new Worker(某js文件)這樣的方式去玩,感覺很難結合react的模塊化開發(fā)來使用。

但是實際上現(xiàn)在在webpack里配置上worker-loader,可以很方便使用Web Worker。

首先我們的worker代碼可以寫成下面這樣:

import { lintFileTree } from '@/utils/files'

onmessage = ({ data }) => {
lintFileTree(data.fileTree, data.currentTags).then(content => {
    postMessage(content)
})
}

然后我們使用這個Worker時,可以如下所示

import { useWebWorkerFromWorker } from 'react-webworker-hook'
import lintFileTreeWorker from '@/utils/webWorker/lintFileTree.webworker'

const worker4LintFileTree = new lintFileTreeWorker()

const [lintedFileTree, startLintFileTree] = useWebWorkerFromWorker(worker4LintFileTree)

然后你再用個useEffect依賴這個lintedFileTree,如果變動了就做某些操作,所以寫起來就像用useState一樣輕松。

非遞歸遍歷樹

大家可以看到上面我們用到的這些東西,很多都與樹相關,比如遍歷文件樹去校驗代碼。

又或者我們切換了某個約束規(guī)則后,也是需要遍歷整個文件樹進行重新校驗的。

遍歷的過程中,之前我用的是遞歸遍歷整個樹,這樣做不好的地方在于遞歸的時候內(nèi)存得不到釋放,所以后來我換了一種算法,采用非遞歸的方式遍歷整個樹。

IndexDB保存文件內(nèi)容

因為我們的MOD文件內(nèi)容比較多比較大,所以內(nèi)存占用可能會很大,不可能一直把這些文件內(nèi)容放到內(nèi)存中。

所以我讀取到文件內(nèi)容會依次放入IndexDB中,只展示當前編輯文件的內(nèi)容。

只有在需要的時候,比如全文件校驗或者切換文件時,才從IndexDB再次獲取文件內(nèi)容。

究極進化形態(tài):突破瀏覽器沙盒限制,實現(xiàn)對電腦本地文件的增刪改

通過之前的操作,我們終于完成了一個基本可用的在線XML編輯器。

但是它有一個致命缺點,就是受到瀏覽器沙盒環(huán)境的限制,我們在修改了文件后,沒法直接保存到電腦上,而必須依靠手動將修改好的代碼一一復制到對應的文件中。

這個操作繁瑣復雜,導致我們編輯器的功能可能只能用來輔助編寫代碼和批量校驗。

之前我以為只能做到這種程度,但是后來我在知乎上偶然看了一個帖子,發(fā)現(xiàn)Chrome86+的版本多了一個功能API:FileSystemAccess。

另外,除非是本地localhost環(huán)境,否則這個API只在https環(huán)境下才能調(diào)用,也就是說你在一個http的網(wǎng)站上,即使你用的是Chrome86+或者是Edge86+,那也是調(diào)用不了的。

這個API可以讓我們直接操作本地電腦上的文件,而不是像FileReader一樣只能讀,或者像FileSystem一樣只能在瀏覽器沙盒內(nèi)操作。

通過FileSystemAccess我們不僅可以實現(xiàn)對文件夾中的文件進行讀取修改,還能新增和刪除文件。

所以我使用這個API全面替換了之前使用FileReader的各個點,實現(xiàn)了在文件樹上右鍵進行文件夾和文件的新增和刪除。(這里是不支持對文件進行重命名的,不過其實我們可以使用刪除后再新增的方式來模擬重命名,但是我就懶得做了)

同時在按保存按鈕或者按保存的快捷鍵Ctrl+S后,就可以直接對文件進行保存操作。

下面是一個使用FileSystemAccess打開文件夾的組件代碼:

    import React from 'react'

    // 自定義的打開文件夾組件
    const FileInput = (props) => {
    const { children, onChange } = props
    const handleClick = async () => {
        const dirHandle = await window.showDirectoryPicker()
        dirHandle.requestPermission({ mode : "readwrite" })
        onChange(dirHandle)
    }
    return <span onClick={handleClick}>
        {children}
    </span>
    }

    export default FileInput

只要被這個組件包裹的元素(比如按鈕)被點擊后,會立即調(diào)用showDirectoryPicker,請求打開文件夾。

在打開文件夾后,通過獲得的文件夾handle去請求文件夾寫入權限,然后再把這個文件夾handle傳到外部,獲取文件樹結構。

這里的操作是有瑕疵的,因為請求打開文件夾時瀏覽器會彈框向用戶獲取讀取文件夾的權限,

打開完畢后又直接會彈第二次框獲取寫入權限,也就是說在打開文件夾時會彈兩次框。

但是我也只能通過這種手法一次性請求到所有的權限,要不然等到要保存時再去請求權限也不太好。

不過瑕不掩瑜,通過這個API不僅實現(xiàn)了文件的增刪改,還解除了對IndexDB的使用。

因為我們隨時可以通過文件Handle獲取到相應的文件內(nèi)容,所以沒必要將文件內(nèi)容保存到IndexDB中。

更多的功能與細節(jié)

以上我只是對技術上的核心功能進行了概述,實際上這個編輯器還有N多的細節(jié)。

比如調(diào)整tags規(guī)則的面板,比如那些工具欄的按鈕,比如對dva的簡單封裝處理,比如對xml進行分析時,如果屬性值是數(shù)字,那么就不進行提示,而是直接忽略,因為數(shù)字往往沒太大意義而且枚舉值太大。

這一切的一切,都太多太多,但是它們的應用都比較基礎,所以不想贅述細節(jié),否則這篇博客就會變得非常長,而且難以突出核心思路。

不足與總結

這里的不足更多的是因為懶,比如之前說的文件夾和文件重命名功能,還有調(diào)整tags規(guī)則的自定義規(guī)則那里不支持修改刪除。

可以實現(xiàn),只是懶得做了。

這個東西前前后后做了幾個月,也不是說每天晚上都在寫這個,主要是有靈感了就來寫一下,或者發(fā)現(xiàn)哪里可以更好地改進一下就再寫一下。

合起來約摸著有兩三周的每個晚上在做這個事情,然后當它愈加趨近于完善和可用時,就愈加懶得做了。

因為剩下的操作不太重要,且腦補一下就可以完成,沒有太多有挑戰(zhàn)性的地方了。

不過總體來說,這個東西現(xiàn)在的可用性還是很強的。

不僅僅可以用于《騎馬與砍殺2》、《了不起的修真模擬器》、《文明6》等一系列游戲的XML文件的輔助編寫,還可以用于那些沒有XSD規(guī)則,又過于復雜的XML配置,甚至它還可以學習你自定義的XML規(guī)則。

到此這篇關于js制作xml在線編輯器實例的文章就介紹到這了,更多相關js制作xml在線編輯器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 微信小程序實現(xiàn)五星評價功能

    微信小程序實現(xiàn)五星評價功能

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)五星評價功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • javascript 事件對象 坐標事件說明

    javascript 事件對象 坐標事件說明

    javascript 事件對象 坐標事件說明,學習js坐標事件的朋友可以參考下。
    2010-05-05
  • 小程序實現(xiàn)頁面頂部選項卡效果

    小程序實現(xiàn)頁面頂部選項卡效果

    這篇文章主要為大家詳細介紹了小程序實現(xiàn)頁面頂部選項卡效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • js判斷手機號運營商的方法

    js判斷手機號運營商的方法

    這篇文章主要介紹了js判斷手機號運營商的方法,需要的朋友可以參考下
    2015-10-10
  • 如何在面試中手寫出javascript節(jié)流和防抖函數(shù)

    如何在面試中手寫出javascript節(jié)流和防抖函數(shù)

    這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-10-10
  • JavaScript?ECharts可視化圖表庫

    JavaScript?ECharts可視化圖表庫

    這篇文章主要介紹了JavaScript?ECharts可視化圖表庫,ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫,提供直觀,生動,可交互,可個性化定制的數(shù)據(jù)可視化圖表
    2023-01-01
  • javascript設計模式之模塊模式學習筆記

    javascript設計模式之模塊模式學習筆記

    這篇文章主要為大家詳細介紹了javascript設計模式之模塊模式學習筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • 利用JS hash制作單頁Web應用的方法詳解

    利用JS hash制作單頁Web應用的方法詳解

    這篇文章主要給大家介紹了關于如何利用JS hash制作單頁Web應用的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2017-10-10
  • 微信小程序調(diào)用攝像頭實現(xiàn)拍照功能

    微信小程序調(diào)用攝像頭實現(xiàn)拍照功能

    這篇文章主要為大家詳細介紹了微信小程序調(diào)用攝像頭實現(xiàn)拍照功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 詳解如何在Javascript中使用Object.freeze()

    詳解如何在Javascript中使用Object.freeze()

    這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze(),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-10-10

最新評論