Details zur Versionsaktualisierung des WeChat Mini-Programms 0.11.122100 – Einführung

0.11.122100 Update-Übersicht

• 4 neue APIs und 2 neue Komponenten hinzugefügt

• Erweiterung 10 Komponenten hinzugefügt Attribute, 6 Komponentenereignisse hinzugefügt

• Dutzende API- und Komponentenfehler behoben, einige interaktive Erlebnisse optimiert

• Entwicklung Entwicklertools fügen Debugging-Unterstützung für neue hinzu APIs und Komponenten

• Entwicklertools fügen Debugging-Unterstützung für WeChat-Zahlungen hinzu
  

Das detaillierte Aktualisierungsprotokoll lautet wie folgt:


Grundlegende Bibliotheksaktualisierung

• Eine neue API wx.switchTab Details

• Eine neue API wx .scanCode

• Eine neue API wx.createMapContext

• Eine neue API wx.createCanvasContext

• Ein neuer API-Aufruf wx.showToast Parametermaske

• Eine neue Seitenmethode Page.onShareAppMessage für benutzerdefiniertes Teilen von Inhalten

• Eine neue Framework-Methode App.onError

• Eine neue Seitenkonfiguration disabelScroll

• Eine neue -Komponente

• A Hinzugefügt < contact-button/>-Komponente, die zum Anzeigen der Schaltfläche für die Kundendienstsitzung verwendet wird

• Ein -Komponentenattribut „openType“ hinzugefügt

• A Hinzugefügtes Komponentenattribut color

• A Hinzugefügtes

• A -Komponentenattribut hinzugefügt Steuerverbindungsgleiten

• A Komponentenattribut hinzugefügt. Cursor-Abstand

• A Cursor-Abstand</li> <li> <p></p>A <picker/>-Komponentenattribut deaktiviert</li> <li> <p></p>A <view/>-Komponentenattribut hinzugefügt Klasse</li> <li> <p></p>A Hinzugefügt <scroll-view/> Komponentenattribute scroll-x, scroll-y unterstützen dynamische Änderung </li> <li> <p></p>A Hinzugefügt < ;map/> Komponentenereignis bindtap bindmarkertap bindcontrolstap bindregionchange</li> <li> <p></p>A <input/> hinzugefügtes <input/> video/> Komponentenereignis bindtimeupdate</li> <li> <p></p>Ein hinzugefügtes<textarea/> Komponentenereignis bindconfirm</li> <li> <p></p>Ein hinzugefügtes<textarea/> bindinput</li> <li> <p></p>Ein hinzugefügtes <canvas/>-Komponentenereignis bindlongtap</li> <li> <p></p>Eine hinzugefügte AudioContext.setSrc()-Kontext-API</li> <li> <p></p>Ein hinzugefügter CanvasContext-Kontext</li> <li> <p></p>Eine hinzugefügte CanvasContext.arc()-Kontext-API</li> <li> <p></p>Eine hinzugefügte CanvasContext.fillRect( ) Kontext-API</li> <li> <p></p>Eine neue CanvasContext.StrokeRect()-Kontext-API</li> <li> <p></p>Eine neue CanvasContext.createLinearGradient()-Kontext-API</li> <li> <p></p>Eine neu hinzugefügte CanvasContext.createCircularGradient()-Kontext-API</li> <li> <p></p>Eine hinzugefügte <scroll-view/>-Komponente, um das Scrollen der Seite beim Scrollen zu verhindern</li> <li> <p></p>U Update API wx.getSystemInfo Neuer Plattform-Rückgabeparameter</li> <li> <p></p>U Update API wx.downloadFile Wenn der HTTP-Statuscode 200 oder 304 ist, wird dies der Fall sein return tmpFilePath</li> <li> <p></p>U Aktualisierung der API wx.showModal-Aufrufparameter „confirmText“ cancelText Zeichenbeschränkung </li> <li> <p></p>U Aktualisierung des WXML-Datensatzes, Rückkehr zur Unterstützung von Objekten und Arrays</li> <li> <p></p>U Update<image/> Komponentenattributmodus optional widthFix</li> <li> <p></p>U Update<picker/> Komponentenattributbereich hinzufügen</li> <li> <p></p>U Update<switch/> <checkbox/> CanvasContext.restore() Kontext-API Pinselstil speichern</li> <li> <p></p>U CanvasContext.arc() Kontext-API-Parameteranpassung aktualisieren, eAngle hinzufügen, gegen den Uhrzeigersinn, SweepAngle entfernen</li> <li> <p> </p>U Optimieren Sie das <swiper/>-Slide-Erlebnis </li> <li> <p></p>U Optimieren Sie das <swiper/> interaktive Erlebnis </li> <li> <p></p>U Optimierung der <navigator/> <button/>-Komponenten-Klickerfahrung</li> <li> <p></p>F Korrektur der wx.request-Methode auf Android Verwenden Sie nur Großbuchstaben. Wertproblem</li> <li> <p></p>F Das Problem, dass wx.uploadFile den Header unter iOS nicht festlegen kann, wurde behoben.</li> <li> <p></p>F Das Problem mit wx.getLocation type= wurde behoben gcj02 unter iOS </li> <li> <p></p>F Behebt das Problem, dass wx.showToast nach dem Beenden des Applets immer noch angezeigt wird </li> <li> <p></p>F Korrigiert den Rückgabeparameter wx.showModal in Inkonsistenz zwischen Android und iOS</li> <li> <p></p>F Das Problem der Layoutstörung wurde behoben, wenn der wx.showModal-Inhalt zu lang oder der Titel leer war</li> <li> <p></p>F Beheben Sie das Problem, dass der Standardwert nicht angezeigt wird, wenn wx.showModal cancelText und bestätigenText leer sind</li> <li> <p></p>F Beheben Sie das Problem, dass die Tastatur während wx.showModal angezeigt wird und nicht geschlossen werden kann</li> <li> <p></p>F Das Problem, dass wx.getImageInfo keine http-Link-Bilder auf Android abrufen kann</li>, wurde behoben<li><p>F Das Problem der inkonsistenten Bildschirmhöhe, die von wx.getSystemInfo aufgrund des Erscheinens der Tableiste ermittelt wurde, wurde behoben. </p></li> <li><p>F Das Problem, dass das wx.downloadFile-Bild nach dem Herunterladen nicht angezeigt wurde, wurde behoben Android-Problem</p></li> <li><p>F Beheben Sie das Problem, dass wx.request die Anforderungsdaten nicht korrekt codiert</p></li> <li><p>F Beheben Sie wx.login App.onLaunch in iOS Kein Rückrufproblem</p></li> <li><p>F Fix wx.createAnimationContext-Einstellung transformOrigin-Ausnahme und Animation kann nicht mit dem nächsten Schritt fortfahren</p></li> <li><p>F Fix wx.navigateTo wx .redirectTo Unter iOS besteht das Problem, dass Page.onLoad nicht aufgerufen werden kann </p></li> <li><p>F Das Problem, dass das Standardverhalten von Catch-Blocking-Ereignissen ungültig ist, wurde behoben</p></li> <li><p>F Fehler bei der Übergabe von SetInterval-Parametern unter iOS behoben, der dazu führt, dass die Seite einfriert </p></li> <li><p>F Das Problem der mehrfachen Auslösung von onReachBottom wurde behoben </p></li> <li><p> F Behoben: <swiper/ > Problem mit Textknoten-Nachkommen /> Das versteckte Attribut „video/>“ wird nicht wirksam 🎜></p></li> <li>F Das Problem, dass <scroll-view/> an den oberen oder unteren Rand des Begrüßungsbildschirms rutscht, wurde behoben. <p></p> </li> <li>F Das Problem wurde behoben von <video/> wird unter iOS nicht wirksam <p></p> </li> <li>F Das Problem, dass <video/> weiterhin vorhanden ist, wurde unter iOS behoben <p></p> </li> <li>F Behoben <text/ > Das Problem, dass Klasse und Stil in Einbettungen nicht dynamisch aktualisiert werden <p></p> </li> <li>F Das Problem der falschen Textfarbe wurde behoben <button/> deaktiviert <p></p> </li> <li>F Das Problem, bei dem <input/> ungültig ist, wurde behoben <p></p> </li> <li>F Behoben < input/> bei Verwendung von display:flex in iOS9 wird die erste Eingabe nicht angezeigt. Probleme <p></p> </li> <li>F Fix <input/>, wenn der Anfangswert undefiniert ist <p></p> </li> <li>F Problem mit <input/>-Platzhalter-Ghosting behoben<p></p> </li> <li>F Problem mit <input/>-Farbanomalien behoben nach dem Fokus<p></p> </li> <li>F Beheben Sie das Problem der abnormalen Positionierung von <textarea/> position:fixed<p></p></li><li>F Beheben Sie das Problem von < textarea/> löst das Unschärfeereignis nach dem Öffnen der Auswahl nicht aus<p></p> </li> <li>F Behebung des Problems der Höhenänderung beim Festlegen der automatischen Höhe in <textarea/><p></p> </li> <li>F Behebung des Problems der Zerstörungsausnahme in <textarea/><p></p> </li> <li>F Behebung des Problems, dass die Vollbildschaltfläche in <video/> muss zweimal angeklickt werden, um auf Android wirksam zu werden <p></p> </li> <li>F Das Problem in <audio/> wurde behoben. Das Problem der widersprüchlichen Verwendung derselben ID auf mehreren Seiten <p></p> </li> <li>F Das Problem, dass <canvas/> nicht normal angezeigt werden kann, wurde behoben. <p></p> </li> <li>F Das Problem mit <image/> wurde behoben Endlosschleifenproblem<p></p> </li> <li>F Das Problem des <scroll-view/> Fehlers beim Scrollen in die Ansicht wurde behoben<p> </p> </li> <li>F Das Problem wurde behoben dass <form/> den Eingabeinhalt nicht abrufen kann <p></p> </li> <li>D Das <navigator/>-Weiterleitungsattribut wird bald entfernt <p></p> </li> <li>D Die Schnittstelle wx.createContext wird bald entfernt <p></p> </li> <li>D Das Attribut <input/> wird bald entfernt, verwenden Sie die Fokus-Attribute direkt <p></p> </li> <li>D wird bald entfernt<map /> deckt das Attribut ab<p></p> </li> <li> <p></p> Grundfunktionen von Entwicklertools </li> <li> <p> <br></p>A Debugging-Unterstützung für wx.switchTab hinzugefügt </li> </ul> <br><br>A wx.startRecord wx.stopRecord wx.playVoice wx pauseVoice wx.stopVoice API-Debugging-Unterstützung hinzugefügt<br><br><ul class="litype_1 list-paddingleft-2"> <li>A Debugging-Unterstützung für WeChat-Zahlungen hinzugefügt<p></p> </li> <li>A Debugging-Unterstützung für das Scannen von QR-Codes hinzugefügt<p></p> </li> <li>A Eine neue Nachricht hinzugefügt über app.json, das wiederholt die Auslagerungsdatei definiert, was zu einem Fehler in der Übermittlungsvorschau führt<p></p> </li> <li>A Neue Meldung über Netzwerkfehler beim Laden von Bildern im Simulator hinzugefügt <p></p> </li> <li>A Funktion zum Festlegen der Initialisierungsseite und Parameter beim Kompilieren hinzugefügt<p></p> </li> <li>A Funktion zum Festlegen der Initialisierungsseite und Parameter beim Senden der Vorschau hinzugefügt<p></p> </li> <li>F Optimieren Sie das Appdata-Panel, um Daten auf separaten Seiten anzuzeigen, unterstützen Sie dynamische Aktualisierungen und die Anzeige im Codemodus.<p></p> </li> <li>F Korrigieren Sie wx.getBackgroundAudioPlayerState, wenn keine Musik abgespielt wird. Kein Rückgabeproblem <p></p> </li> <li>F Behebung des Problems, dass wx.getBackgroundAudioPlayerState einen falschen Status erhält<p></p> </li> <li>F Behebung des Problems mit dem weißen Bildschirm im WXML-Panel in einigen Fällen<p></p> </li> <li>F Das Problem, dass WXML-Panel-Attribute nicht kopiert werden können und die Kopie über einen Wagenrücklauf verfügt, wurde behoben. <p></p> </li> <li>F Das Problem, dass einzelne Textknoten des WXML-Panels nicht angezeigt wurden, wurde behoben. Ausrichtung Problem<p></p> </li> <li>F Beheben Sie das Problem, dass der Simulator einen Fehler anzeigt, wenn die Position der Tableiste in app.json auf „oben“ eingestellt ist.<p></p> </li> <li>F Beheben Sie Devtools und Das Problem des falschen Klickens auf externe Links im Editor <p></p> </li> <li>F Das Problem, dass wx.requst die Anfrage aufgrund des Caches nicht senden konnte, wurde behoben <p></p> </li> </ul>Im Folgenden sind die Aktualisierungsdetails aufgeführt: <br><br><br>wx.switchTab(OBJECT)<br><br>Zur TabBar-Seite springen und alle anderen Nicht-TabBar-Seiten schließen<br> OBJECT-Parameterbeschreibung: <br>[tr] Erforderliche Beschreibung des Parametertyps[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>url</td> <td>String</td> <td>是</td> <td>需要跳转的 tabBar 页面的路径（需在 app.json 的  字段定义的页面），路径后不能带参数</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>Beispielcode: <br>{ "tabBar": { "list": [{ "pagePath": "index", "text ": "Home" },{ "pagePath": "other", "text": "other" }] }}wx.switchTab({ url: '/index'})<br><br><br><br> <br>wx.scanCode(OBJECT)<br><br>Starten Sie die Client-Code-Scan-Schnittstelle und geben Sie nach erfolgreichem Scan das entsprechende Ergebnis zurück <br>Objektparameterbeschreibung: <br>[tr] Parametertyp erforderliche Beschreibung[ /tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数，返回内容详见返回参数说明。</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>Erfolgsrückgabeparameterbeschreibung: <br>[tr]Parameterbeschreibung[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>result</td> <td>码的内容</td> </tr></tbody></table>Beispielcode: <br>wx.scanCode({ success: (res) => { console.log( res) }})<br><br><br><br><br>onShareAppMessage<br><br>Definieren Sie die onShareAppMessage-Funktion in Seite, um die Freigabeinformationen der Seite festzulegen. <br><ul class=" list-paddingleft-2"> <li><p>Nur ​​wenn dieser Event-Handler definiert ist, wird die Schaltfläche „Teilen“ im oberen rechten Eckmenü angezeigt </p></li> <li><p>Es wird aufgerufen wenn der Benutzer auf die Schaltfläche „Teilen“ klickt </p></li> <li><p>Dieses Ereignis muss ein Objekt für benutzerdefinierte Freigabeinhalte zurückgeben <br></p></li> </ul>Benutzerdefiniertes Freigabefeld<br>[tr ] Feldbeschreibung Standardwert[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>Beispielcode:<br>Page({ onShareAppMessage: function () { return { title: 'Customized share title', desc: 'Customized share description', path: '/page / user?id=123' } }})<br><br><br><br><br>wx.showToast(OBJECT)<br><br>Meldungsaufforderungsfeld anzeigen<br>OBJECT-Parameterbeschreibung: <br>[tr]Erforderliche Beschreibung des Parametertyps[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>String</td> <td>是</td> <td>提示的内容</td> </tr> <tr> <td>icon</td> <td>String</td> <td>否</td> <td>图标，只支持"success"、"loading"</td> </tr> <tr> <td>duration</td> <td>Number</td> <td>否</td> <td>提示的延迟时间，单位毫秒，默认：1500, 最大为10000</td> </tr> <tr> <td>mask</td> <td>Boolean</td> <td>否</td> <td>是否显示透明蒙层，防止触摸穿透，默认：false</td> </tr> <tr> <td>success</td> <td>Function</td> <td>否</td> <td>接口调用成功的回调函数</td> </tr> <tr> <td>fail</td> <td>Function</td> <td>否</td> <td>接口调用失败的回调函数</td> </tr> <tr> <td>complete</td> <td>Function</td> <td>否</td> <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> </tr> </tbody></table>Beispielcode: <br>wx.showToast({ Titel: 'Erfolg', Symbol: 'Erfolg', Dauer: 2000})<br><br> <br>onShareAppMessage<br><br>Definieren Sie die onShareAppMessage-Funktion in Seite, um die Freigabeinformationen der Seite festzulegen. <br><ul class=" list-paddingleft-2"> <li><p>Nur ​​wenn dieser Event-Handler definiert ist, wird die Schaltfläche „Teilen“ im oberen rechten Eckmenü angezeigt </p></li> <li><p>Es wird aufgerufen wenn der Benutzer auf die Schaltfläche „Teilen“ klickt </p></li> <li><p>Dieses Ereignis muss ein Objekt für benutzerdefinierte Freigabeinhalte zurückgeben <br></p></li> </ul>Benutzerdefiniertes Freigabefeld<br>[tr ] Feldbeschreibung Standardwert[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>title</td> <td>分享标题</td> <td>当前小程序名称</td> </tr> <tr> <td>desc</td> <td>分享描述</td> <td>当前小程序名称</td> </tr> <tr> <td>path</td> <td>分享路径</td> <td>当前页面 path ，必须是以 / 开头的完整路径</td> </tr> </tbody></table>Beispielcode: <br>Page({ onShareAppMessage: function () { return { title: 'Customized share title', desc: 'Customized share description', path: '/page/user?id=123' } }} )<br><br><br><br><br>wx.createCanvasContext(canvasId)<br><br>Definition<br><br>Leinwand-Zeichnungskontext erstellen (canvasId angeben)<br>Tipp: CanvasId muss angegeben werden , wirkt dieser Zeichenkontext nur auf den entsprechenden <canvas/><br><br><br><br>Parameter<br><br>[tr]Parametertypbeschreibung[/tr]<table class="t_table"><tbody><tr class="firstRow"> <td>canvasId</td> <td>String</td> <td>画布表示，传入定义在 <canvas/> 的 canvas-id</td> </tr></tbody></table> <br> <br><br>Neue Komponente: <br><br><br>audioContext<br><br>audioContext ist über audioId an eine <audio/>-Komponente gebunden, über die das entsprechende <audio/> Komponente. <br>Methodenliste des audioContext-Objekts: <br>[tr]Methodenparameterbeschreibung[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>setSrc</td> <td>src</td> <td>音频的地址</td> </tr> <tr> <td>play</td> <td>无</td> <td>播放</td> </tr> <tr> <td>pause</td> <td>无</td> <td>暂停</td> </tr> <tr> <td>seek</td> <td>position</td> <td>跳转到指定位置，单位 s</td> </tr> </tbody></table>Beispielcode: <br><!-- audio.wxml --><audio src="{ {src}}" id="myAudio" ></audio><button type="primary" bindtap="audioPlay">play</button><button type="primary" bindtap="audioPause " >Pause</button><button type="primary" bindtap="audio14">Stellen Sie die aktuelle Wiedergabezeit auf 14 Sekunden ein</button><button type="primary" bindtap="audioStart"> ;Zurück zum Anfang</button>// audio.jsPage({ onReady: function (e) { // Verwenden Sie wx.createAudioContext, um den Audiokontext abzurufen context this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc ('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D31 3AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }, data: { src: '' }, audioPlay: function () { this.audioCtx.play() }, audioPause: function () { this.audioCtx.pause() }, audio14: function () { this.audioCtx.seek(14) }, audioStart: function ( ) { this.audioCtx.seek(0) }})<br><br><img src="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"><br><br>picker-view<br><br>eingebetteter Seiten-Scroll-Selektor<br>[tr] Attributname Typ Standardwert Beschreibung[/tr]<table class="t_table"><tbody> <tr class="firstRow"> <td>value</td> <td>Number Array</td> <td> <table class="t_table"><tbody> <tr class="firstRow"> <td>value</td> <td>Number Array</td> <td><br></td> <td>数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。</td> </tr> <tr> <td>indicator-style</td> <td>String</td> <td><br></td> <td>设置选择器中间选中框的样式</td> </tr> <tr> <td>bindchange</td> <td>EventHandle</td> <td><br></td> <td>当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）</td> </tr> </tbody></table> </td> <td>Die Zahlen im Array stellen nacheinander die von der Picker-View-Spalte in der Picker-View ausgewählte Zahl dar (der Index beginnt bei 0, wenn die Zahl größer als die Länge der Picker-View-Spalte ist). Spaltenoption, die letzte ist ausgewählt. Ein Element. </td> </tr> <tr> <td>indicator-style</td> <td>String</td> <td></td> <td>Legen Sie den Stil des ausgewählten Felds fest in der Mitte des Selektors </td> </tr> <tr> <td>bindchange</td> <td>EventHandle</td> <td></td> <td>Das Änderungsereignis wird ausgelöst Wenn sich der Wert beim Scrollen ändert, ist event.detail = {value: value}; value ist ein Array, das angibt, welches Element der Picker-View-Spalte derzeit ausgewählt ist (der Index beginnt bei 0). </td> </tr> tbody></tbody></table>Hinweis: Es kann nur die Komponente <picker-view-column/> platziert werden, andere Knoten werden nicht angezeigt. <br><br><br>picker-view-column<br><br> kann nur in <picker-view /> platziert werden und die Höhe seines untergeordneten Knotens wird automatisch auf die gleiche Höhe wie die gesetzt Kontrollkästchen der Picker-Ansicht Hochkonsistent<br><view>{{year}}year{{month}}month{{day}}day</view> -view Indicator- style="height: 50px;" style="width: 100%; height: 300px;" bindchange="bindChange"> ;view wx: for="{{years}}" style="line-height: 50px">{{item}}years</view> </picker-view-column> ; <view wx:for="{{months}}" style="line-height: 50px">{{item}}month</picker-view> -column> <view wx:for="{{days}}" style="line-height: 50px">{{item}}day</view> picker -view></view>const date = new Date()const years = []constmonths = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i)}for (let i = 1 ; i <= 12; i++) {months.push(i)}for (let i = 1 ; i <= 31; i++) { days.push ( i)}Page({ Daten: { Jahre: Jahre, Jahr: date.getFullYear(), Monate: Monate, Monat: 2, Tage: Tage, Tag: 2, Jahr: date.getFullYear(), Wert: [9999 , 1, 1], }, bindChange: function(e) { const val = e.detail.value this.setData({ Jahr: this.data.years[val[0]], Monat: this.data.months[ val [1]], Tag: this.data.days[val[1]] }) }})<br/>Canvas-Verbesserung<br/><br/><ul class="litype_1 list-paddingleft-2"><li>Ein hinzugefügter CanvasContext-Kontext<p></p></li><li>Eine hinzugefügte CanvasContext.arc()-Kontext-API<p></p></li><li>Eine hinzugefügte CanvasContext.fillRect()-Kontext-API<p></p></li><li>A CanvasContext.StrokeRect()-Kontext-API hinzugefügt<p></p></li><li>A CanvasContext.createLinearGradient()-Kontext-API hinzugefügt<p></p></li><li>A CanvasContext.createLinearGradient()-Kontext-API hinzugefügt <p><br/></p></li></ul><br/>createCircularGradient<br/><br/>Definition<br/><br/>Erstellt eine kreisförmige Verlaufsfarbe. <br/>Tipp: Der Startpunkt liegt in der Mitte des Kreises und der Endpunkt am Ring. <br/>Tipp: Sie müssen addColorStop() verwenden, um mindestens zwei Verlaufspunkte anzugeben. <br/><br/><br/><br/>Parameter<br/><br/>[tr]Parametertypdefinition[/tr]<br/><table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>圆心的x坐标</td></tr><tr><td>y</td><td>Number</td><td>圆心的y坐标</td></tr><tr><td>r</td><td>Number</td><td>圆的半径</td></tr></tbody></table><br/><br/>Beispiel<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Kreisförmigen Farbverlauf erstellenconst grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Füllen mit gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><br/><br/><img src="https://img.php.cn//upload/image/423/329/798/1488964146381136.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/><br/>createLinearGradient<br/><br/>Definition<br/><br/>Erstellen Sie eine lineare Verlaufsfarbe. <br/>Tipp: Sie müssen addColorStop() verwenden, um mindestens zwei Verlaufspunkte anzugeben. <br/><br/><br/><br/>Parameter<br/><br/>[tr]Parametertypdefinition[/tr]<br/><table class="t_table"><tbody><tr class="firstRow"><td>x0</td><td>Number</td><td>起点的x坐标</td></tr><tr><td>y0</td><td>Number</td><td>起点的y坐标</td></tr><tr><td>x1</td><td>Number</td><td>终点的x坐标</td></tr><tr><td>y1</td><td>Number</td><td>终点的y坐标</td></tr></tbody></table><br/><br/>Beispiel<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Linearen Farbverlauf erstellenconst grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Füllen Sie mit Farbverlaufctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><br/><img src="https://img.php.cn//upload/image/319/264/577/1488964126768032.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/>StrokeRect<br/><br/>Define<br/><br/>Zeichne ein Rechteck (nicht gefüllt). <br/>Tipp: Verwenden Sie setFillStroke(), um die Farbe der rechteckigen Linie festzulegen. Wenn nicht festgelegt, ist die Standardeinstellung Schwarz. <br/><br/><br/><br/>Parameter<br/><br/>[tr]Parametertypbereichsbeschreibung[/tr]<table class="t_table"><tbody><tr class="firstRow">< td>x</td><td>Nummer</td><td><br/></td><td>x-Koordinate der oberen linken Ecke des rechteckigen Pfads</td></tr><tr> <td>y </td><td>Nummer</td><td><table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td><br/></td><td>矩形路径左上角的x坐标</td></tr><tr><td>y</td><td>Number</td><td><br/></td><td>矩形路径左上角的y坐标</td></tr><tr><td>width</td><td>Number</td><td><br/></td><td>矩形路径的宽度</td></tr><tr><td>height</td><td>Number</td><td><br/></td><td>矩形路径的高度</td></tr></tbody></table></td><td>Y-Koordinate der oberen linken Ecke des rechteckigen Pfads</td></tr><tr ><td>Breite</td ><td>Zahl</td><td><🎜></td><td>Die Breite des rechteckigen Pfads</td></tr><tr><td> Höhe</td><td>Zahl< /td><td><🎜></td><td>Die Höhe des rechteckigen Pfads</td></tr></tbody></table><br/><br/><br/>Beispiel<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.StrokeRect(10, 10, 150, 75)ctx.draw ()<br/><br/><img src="https://img.php.cn//upload/image/939/521/900/1488964112354042.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/>fillRect<br/><br/> definiert <br/><br/> zum Füllen eines Rechtecks. <br/>Tipp: Verwenden Sie setFillStyle(), um die Füllfarbe des Rechtecks ​​festzulegen. Wenn nicht festgelegt, ist die Standardeinstellung Schwarz. <br/><br/><br/><br/>Parameter<br/><br/>[tr]Parametertypbeschreibung[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>矩形路径左上角的x坐标</td></tr><tr><td>y</td><td>Number</td><td>矩形路径左上角的y坐标</td></tr><tr><td>width</td><td>Number</td><td>矩形路径的宽度</td></tr><tr><td>height</td><td>Number</td><td>矩形路径的高度</td></tr></tbody></table><br/><br/><br/>Beispiel<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br/><br/><img src="https://img.php.cn//upload/image/656/510/394/1488964097771237.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/><br/><br/><br/>Bogen<br/><br/>Definition<br/><br/>Zeichne einen Bogen. <br/>Tipp: Um einen Kreis zu erstellen, können Sie mit der arc()-Methode angeben, dass der tatsächliche Bogenmaß 0 und der Endbogenmaß 2 * Math.PI ist. <br/>Tipp: Verwenden Sie die Methode Stroke() oder Fill(), um Bögen im Canvas zu zeichnen. <br/><br/><br/><br/>Parameter<br/><br/>[tr]Parametertypbeschreibung[/tr]<table class="t_table"><tbody><tr class="firstRow"><td>x</td><td>Number</td><td>圆的x坐标</td></tr><tr><td>y</td><td>Number</td><td>圆的y坐标</td></tr><tr><td>r</td><td>Number</td><td>圆的半径</td></tr><tr><td>sAngle</td><td>Number</td><td>起始弧度，单位弧度（在3点钟方向）</td></tr><tr><td>eAngle</td><td>Number</td><td>终止弧度</td></tr><tr><td>counterclockwise</td><td>Boolean</td><td>可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。</td></tr></tbody></table><br/><br/><br/>Beispiel<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Koordinaten zeichnenctx.arc(100, 75, 50, 0, 2 * Math.PI)ctx.setFillStyle('#EEEEEE')ctx.fill()ctx.beginPath()ctx .moveTo(40, 75)ctx.lineTo(160, 75)ctx.moveTo(100, 15)ctx.lineTo(100, 135)ctx.setStrokeStyle('#AAAAAA')ctx.Stroke()ctx.setFontSize(12 )ctx.setFillStyle('black')ctx.fillText('0', 165, 78)ctx.fillText('0.5*PI', 83, 145)ctx.fillText('1*PI', 15, 78)ctx .fillText('1.5*PI', 83, 10)// Punkte zeichnenctx.beginPath()ctx.arc(100, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('lightgreen')ctx.fill ()ctx.beginPath()ctx.arc(100, 25, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill()ctx.beginPath()ctx.arc(150, 75 , 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// Draw arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#333333')ctx.Stroke()ctx.draw()<br/>Die drei Schlüsselkoordinaten für arc(100, 75, 50, 0, 1.5 * Math.PI) lauten wie folgt: <img src="https://img.php.cn//upload/image/352/893/518/1488964083105591.png" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍" style="max-width:90%" style="max-width:90%"/> <ul class=" list-paddingleft-2"><li><p>Grün: Kreismittelpunkt (100, 75)</p></li><li><p>Rot: Startbogen (0)</p></li><li><p>Blau : Abschlussbogen (1,5 * Math.PI)<br/></p></li></ul><br/><br/><br/><br/><br/>Auf Leinwand zeichnen<br/><br/>Alles in < Zeichnung in ;canvas/> muss mit JavaScript erfolgen: <br>WXML: (Wir werden dieses WXML in den folgenden Beispielen als Vorlage verwenden, sofern keine spezielle Anweisung vorliegt, und es nicht wiederholen) <br><canvas Canvas -id ="myCanvas" style="border: 1px solid;"/>JS: (Wir werden JS im nächsten Beispiel in onLoad einfügen) <br>const ctx = wx.createCanvasContext('myCanvas')ctx(. 'red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><br>Schritt 1: Erstellen Sie einen Canvas-Zeichnungskontext<br><br>Zuerst müssen wir Folgendes tun Erstellen Sie einen Canvas-Zeichnungskontext CanvasContext. <br>CanvasContext ist ein in das Applet integriertes Objekt und verfügt über einige Zeichenmethoden: <br>const ctx = wx.createCanvasContext('myCanvas')<br><br><br>Schritt 2: Canvas-Zeichnungskontext verwenden Zeichnung beschreiben<br><br>Als nächstes beschreiben wir, was wir in Canvas zeichnen möchten. <br>Setzen Sie die Füllfarbe des Zeichenkontexts auf Rot: <br>ctx.setFillStyle('red') Verwenden Sie die Methode fillRect(x, y, width, height), um ein Rechteck zu zeichnen, das mit dem gerade eingestellten Rot gefüllt ist: <br>ctx .fillRect(10, 10, 150, 75)<br><br><br>Schritt 3: Zeichnen<br><br>Teilen Sie der <canvas/>-Komponente mit, dass Sie nur die Beschreibung zeichnen möchten jetzt: <br>ctx.draw()<br><br><br><p>Das obige ist der detaillierte Inhalt vonDetails zur Versionsaktualisierung des WeChat Mini-Programms 0.11.122100 – Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Teilen Sie die Dateistrukturverzeichnisanalyse des WeChat-Applets" href="https://m.php.cn/de/faq/355585.html">Teilen Sie die Dateistrukturverzeichnisanalyse des WeChat-Applets</a></span><span>Nächster Artikel：<a class="dBlack" title="Teilen Sie die Dateistrukturverzeichnisanalyse des WeChat-Applets" href="https://m.php.cn/de/faq/355652.html">Teilen Sie die Dateistrukturverzeichnisanalyse des WeChat-Applets</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/347763.html" title="WeChat Mini-Programm Einfache DEMO-Layout-, Logik- und Stilübungen" class="aBlack">WeChat Mini-Programm Einfache DEMO-Layout-, Logik- und Stilübungen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/347764.html" title="Ausführliche Erklärung und Beispiele des WeChat-Applets wx.request (Schnittstellenaufrufmethode)" class="aBlack">Ausführliche Erklärung und Beispiele des WeChat-Applets wx.request (Schnittstellenaufrufmethode)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/347765.html" title="WeChat Mini-Programm – Detaillierte Erläuterung der WeChat-Anmeldung, WeChat-Zahlung und Vorlagennachrichten" class="aBlack">WeChat Mini-Programm – Detaillierte Erläuterung der WeChat-Anmeldung, WeChat-Zahlung und Vorlagennachrichten</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/347766.html" title="Einfache Beispielanwendung für das WeChat-Applet (Anwendungskonto) und ausführliche Erläuterung des Beispiels" class="aBlack">Einfache Beispielanwendung für das WeChat-Applet (Anwendungskonto) und ausführliche Erläuterung des Beispiels</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/347767.html" title="Detaillierte Erklärung des WeChat-Applets für die Schleife" class="aBlack">Detaillierte Erklärung des WeChat-Applets für die Schleife</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>