Présentation des détails de la mise à jour de la version 0.11.122100 du programme WeChat Mini-Développement de mini-programmes-php.cn

Maison

Applet WeChat

Développement de mini-programmes

Présentation des détails de la mise à jour de la version 0.11.122100 du programme WeChat Mini

高洛峰

Mar 08, 2017 pm 05:11 PM

微信小程序

Aperçu de la mise à jour 0.11.122100

Ajout de 4 nouvelles API, 2 nouveaux composants
Extension Ajout de 10 composants attributs, ajout de 6 événements de composants
Correction de dizaines de bugs d'API et de composants, optimisation de certaines expériences interactives
Les outils de développement pour les développeurs ajoutent la prise en charge du débogage pour les nouveaux API et composants
Les outils de développement ajoutent la prise en charge du débogage pour le paiement WeChat

Le journal de mise à jour détaillé est le suivant :

Mise à jour de la bibliothèque de base

Une nouvelle API wx.switchTab Détails
Une nouvelle API wx .scanCode
Une nouvelle API wx.createMapContext
Une nouvelle API wx.createCanvasContext
Une nouvelle API wx.showToast appelant masque de paramètre
Une nouvelle méthode de page Page.onShareAppMessage pour un partage de contenu personnalisé
Une nouvelle méthode de framework App.onError
Une nouvelle configuration de page désactivéeScroll
Un nouveau composant
A Ajout de < composant contact-button/>, utilisé pour afficher le bouton de session du service client
A ajouté l'attribut A Ajout de >

des cercles de polyligne incluent des contrôles de points show-location

A ajouté une circulaire d'attribut de composant contrôle du glissement de la connexion

A Ajout de l'attribut de composant slider-spacing

A Ajout d'un attribut de composant désactivé

A Ajout d'un attribut de composant class

A Ajout des attributs de composant scroll-x, scroll-y prenant en charge la modification dynamique

A Ajout de < ;map/> événement de composant bindtap bindmarkertap bindcontrolstap bindregionchange

A Ajout d'un événement de composant video/> événement de composant bindtimeupdate

Un événement de composant

bindinput<li><p></p></li>A ajouté un événement de composant <canvas/> bindlongtap<li><p></p></li>A ajouté une API de contexte AudioContext.setSrc()<li><p></p></li>Ajout d'un contexte CanvasContext<li><p></p></li>Ajout d'une API de contexte CanvasContext.arc()<li><p></p></li>A ajouté CanvasContext.fillRect( ) API de contexte<li><p></p></li>Une nouvelle API de contexte CanvasContext.StrokeRect()<li><p></p></li>Une nouvelle API de contexte CanvasContext.createLinearGradient()<li><p></p></li>Une nouvelle API de contexte CanvasContext.createCircularGradient() ajoutée<li><p></p></li>Un composant <scroll-view/> ajouté pour interdire le défilement de la page lors du défilement<li><p></p></li>U Mettre à jour l'API wx.getSystemInfo Nouveau paramètre de retour de la plateforme<li><p></p></li>U Mettre à jour l'API wx.downloadFile Lorsque le code d'état HTTP est 200 ou 304, il sera return tmpFilePath<li><p></p></li>U Mettre à jour le paramètre d'appel wx.showModal de l'API confirmText CancelText limite de caractères <li><p></p></li>U Mettre à jour le retour de l'ensemble de données WXML pour prendre en charge les objets et les tableaux<li><p></p></li>U Mise à jour<image/> mode d'attribut de composant facultatif widthFix<li><p></p></li>U Mise à jour<picker/> ><li>
<p></p>U Mettre à jour<switch/> <checkbox/> <radio/> Style par défaut</li>
<li>
<p></p>U Mettre à jour CanvasContext.save() CanvasContext.restore() API de contexte Enregistrer le style de pinceau</li>
<li>
<p></p>U Mettre à jour CanvasContext.arc() Ajustement des paramètres de l'API de contexte, ajouter eAngle, dans le sens inverse des aiguilles d'une montre, supprimer sweepAngle</li>
<li>
<p> </p>U Optimiser l'expérience de glissement <swiper/> </li>
<li>
<p></p>U Optimiser l'expérience interactive <swiper/<slider/> </li>
<li>
<p></p>U Optimiser l'expérience de clic du composant <navigator/> <button/></li>
<li>
<p></p>F Fixer la méthode wx.request sur Android peut utiliser uniquement des lettres majuscules Problème de valeur</li>
<li>
<p></p>F Correction du problème selon lequel wx.uploadFile ne peut pas définir l'en-tête sur iOS</li>
<li>
<p></p>F Correction de wx.getLocation type= gcj02 sur iOS </li>
<li>
<p></p>F Corrige le problème selon lequel wx.showToast est toujours affiché après avoir quitté l'applet </li>
<li>
<p></p>F Corrige le paramètre de retour wx.showModal dans Incohérence entre Android et iOS </li>
<li>
<p></p>F Correction du problème de désordre de mise en page lorsque le contenu de wx.showModal est trop long ou que le titre est vide </li>
<li>
<p></p>F Résoudre le problème selon lequel la valeur par défaut ne s'affiche pas lorsque wx.showModal CancelText et confirmText sont vides</li>
<li>
<p></p>F Résoudre le problème selon lequel le clavier apparaît pendant wx.showModal et le clavier ne peut pas être rétracté </li>
<li>
<p></p>F Correction du problème selon lequel wx.getImageInfo ne peut pas obtenir d'images de lien http sur Android</li>
<li><p>F Correction du problème de hauteur d'écran incohérente obtenue par wx.getSystemInfo en raison de l'apparence de la barre d'onglets </p></li>
<li><p>F Correction de l'image wx.downloadFile ne s'affichant pas après le téléchargement sur Problème Android</p></li>
<li><p>F Résoudre le problème selon lequel wx.request n'encode pas correctement les données de la demande</p></li>
<li><p>F Réparer wx.login App.onLaunch dans iOS Aucun problème de rappel</p></li>
<li><p>F Correction du paramètre wx.createAnimationContext, l'exception et l'animation transformOrigin ne peuvent pas passer à l'étape suivante</p></li>
<li><p>F Correction de wx.navigateTo wx .redirectTo Sur iOS, le problème selon lequel Page.onLoad ne peut pas être appelé </p></li>
<li><p>F Correction du problème selon lequel le comportement par défaut des événements de blocage de capture n'est pas valide</p></li>
<li><p>F Correction d'une erreur de passage du paramètre SetInterval sur iOS provoquant le gel de la page </p></li>
<li><p>F Correction du problème de déclenchement de onReachBottom plusieurs fois </p></li>
<li><p>. F Corrigé <swiper/ > Problème avec l'erreur lors de la présence de descendants de nœuds de texte</p></li>
<li><p>F Corrigé<switch/> <radio/> /> < L'attribut caché vidéo/> ne prend pas effet </p></li>
<li><p>F Correction du problème de <checkbox/> 🎜></p></li> <li>F Correction du problème de <scroll-view/> glissant vers le haut ou le bas de l'écran de démarrage <p></p>
</li>
<li>F Correction du problème de l'événement <video/> ne prend pas effet sur iOS <p></p>
</li>
<li>F Correction du problème selon lequel le son <video/> continue d'exister après sa suppression sur iOS <p></p>
</li>
<li>F Correction de <text/ > Le problème selon lequel la classe et le style ne seront pas mis à jour dynamiquement dans les intégrations<p></p>
</li>
<li>F Correction du problème de couleur de texte incorrecte lorsque <bouton/> désactivé<p></p>
</li>
<li>F Correction du problème où l'attribut de focus <input/> n'est pas valide <p></p>
</li>
<li>F Correction < input/> lors de l'utilisation de display:flex dans iOS9, la première entrée ne s'affiche pas Problèmes <p></p>
</li>
<li>F Correction de l'affichage anormal de <input/> lorsque la valeur initiale n'est pas définie <p></p>
</li>
<li>F Corriger <input/> ; problème d'image fantôme d'espace réservé<p></p>
</li>
<li>F Corriger <input/> <textare/> après la mise au point<p></p>
</li>
<li> F Résoudre le problème de positionnement anormal de <textarea/> position:fixed<p></p>
</li>
<li>F Résoudre le problème de < textarea/> ne déclenche pas l'événement de flou après l'ouverture du sélecteur<p></p>
</li>
<li>F Correction du problème de changement de hauteur lors de la définition de la hauteur automatique dans <textarea/><p></p> </li>
<li>F Correction du problème de l'exception de destruction dans <textarea/><p></p>
</li>
<li>F Correction du problème selon lequel le bouton plein écran dans <video/> être cliqué deux fois pour prendre effet sur Android <p></p>
</li>
<li>F Correction du problème dans <audio/> Le problème d'utilisation conflictuelle du même identifiant dans plusieurs pages <p></p>
</li>
<li>F Correction du problème selon lequel <canvas/> drawImage ne peut pas être affiché normalement <p></p>
</li>
<li>F Correction de <image/> Dans l'événement bindload, setData aura un problème de boucle infinie<p></p>
</li>
<li>F Correction du problème de <scroll-view/> défilement dans la vue<p> </p>
</li>
<li>F Correction du problème que <form/> submit ne peut pas obtenir le contenu d'entrée <p></p>
</li>
<li>D L'attribut de redirection <navigator/> sera bientôt supprimé <p></p>
</li>
<li>D L'interface wx.createContext sera bientôt supprimée <p></p>
</li>
<li>D L'attribut <input/> de mise au point automatique sera bientôt supprimé, utilisez directement le focus Attributs <p></p> </li>
<li>D sera bientôt supprimé<map /> couvre l'attribut<p><br></p>
</li>
</ul>
<br> Fonctions de base des outils de développement <br><br><br> <ul class="litype_1 list-paddingleft-2">
<li>A Ajout de la prise en charge du débogage pour wx.switchTab <p></p>
</li>
<li>A Ajout de la prise en charge du débogage de l'API wx.startRecord wx.stopRecord wx.playVoice wx. 🎜><p></p>Ajout de la prise en charge du débogage des paiements WeChat</li>
<li>
<p></p>A Ajout de la prise en charge du débogage de la numérisation de code QR</li>
<li>
<p></p>A Ajout d'une nouvelle invite pour app.json, définition en double du fichier d'échange conduisant à une erreur d'aperçu de la soumission</li>
<li>
<p></p>A Ajout d'une nouvelle invite d'erreur réseau lors du chargement d'images dans le simulateur </li>
<li>
<p></p>A Ajout de la fonction de définition de la page d'initialisation et des paramètres lors de la compilation</li>
<li>
<p></p>A Ajout de la fonction de définition de la page d'initialisation et des paramètres lors de la soumission de l'aperçu</li>
<li>
<p></p>F Optimiser le panneau de données d'application pour afficher les données dans des pages séparées, prendre en charge les mises à jour dynamiques et l'affichage du mode code</li>
<li>
<p></p>F Correction de wx.getBackgroundAudioPlayerState lorsqu'il n'y a pas de musique en cours de lecture Aucun problème de retour</li>
<li>
<p></p>F Correction d'un problème d'obtention d'un statut incorrect avec wx.getBackgroundAudioPlayerState</li>
<li>
<p></p>F Correction de l'écran blanc du panneau wxml dans certains cas Problème</li>
<li>
<p></p>F Correction du problème selon lequel les attributs du panneau wxml ne peuvent pas être copiés et la copie a un retour chariot </li>
<li>
<p></p>F Correction du problème selon lequel le nœud de texte unique du panneau wxml n'est pas affiché Problème d'alignement </li>
<li>
<p></p>F Correction du problème selon lequel le simulateur affiche une erreur lorsque la position de la barre de tabulation dans app.json est définie sur top</li>
<li>
<p></p>F Correction des outils de développement et Le problème des clics incorrects sur les liens externes dans l'éditeur </li>
<li>
<p></p>F Correction du problème de wx.requst qui ne pouvait pas envoyer la requête en raison du cache </li>
<li>
</ul>Voici les détails de la mise à jour : <br><br><br>wx.switchTab(OBJECT)<br><br>Accédez à la page tabBar et fermez toutes les autres pages non-tabBar<br> Paramètre OBJECT Description : <br>[tr] Description obligatoire du type de paramètre[/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>Exemple de code : <br>{ "tabBar": { "list": [{ "pagePath": "index", "text ": "Accueil" },{ "pagePath": "autre", "text": "autre" }] }}wx.switchTab({ url : '/index'})<br><br><br><br> <br>wx.scanCode(OBJECT)<br><br>Lancez l'interface d'analyse du code client et renvoyez le résultat correspondant après une analyse réussie <br>Description du paramètre d'objet : <br>[tr] Type de paramètre requis description[ /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>Description du paramètre de retour de succès : <br>[tr]Description du paramètre[/tr]<table class="t_table"><tbody><tr class="firstRow">
<td>result</td>
<td>码的内容</td>
</tr></tbody></table>Exemple de code : <br>wx.scanCode({ success: (res) => { console.log( res) }})<br><br><br><br><br>onShareAppMessage<br><br>Définissez la fonction onShareAppMessage dans Page pour définir les informations de partage de la page. <br><ul class=" list-paddingleft-2">
<li><p>Uniquement lorsque ce gestionnaire d'événements est défini, le bouton "Partager" sera affiché dans le menu du coin supérieur droit </p></li>
<li><p>Il sera appelé lorsque l'utilisateur clique sur le bouton de partage </p></li>
<li><p>Cet événement doit renvoyer un objet pour un partage de contenu personnalisé <br></p></li>
</ul>Champ de partage personnalisé<br>[tr ] Description du champ Valeur par défaut[/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>Exemple de code :<br>Page({ onShareAppMessage : function () { return { title : 'Titre du partage personnalisé', desc : 'Description du partage personnalisée', chemin : '/page / user?id=123' } }})<br><br><br><br><br>wx.showToast(OBJECT)<br><br>Afficher la boîte d'invite de message<br>Description du paramètre OBJECT : <br>[tr]Description obligatoire du type de paramètre[/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>Exemple de code : <br>wx.showToast({ titre : 'succès', icône : 'succès', durée : 2000})<br><br> <br>onShareAppMessage<br><br>Définissez la fonction onShareAppMessage dans Page pour définir les informations de partage de la page. <br><ul class=" list-paddingleft-2">
<li><p>Uniquement lorsque ce gestionnaire d'événements est défini, le bouton "Partager" sera affiché dans le menu du coin supérieur droit </p></li>
<li><p>Il sera appelé lorsque l'utilisateur clique sur le bouton de partage </p></li>
<li><p>Cet événement doit renvoyer un objet pour un partage de contenu personnalisé <br></p></li>
</ul>Champ de partage personnalisé<br>[tr ] Description du champ Valeur par défaut[/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>Exemple de code : <br>Page({ onShareAppMessage : function () { return { title : 'Titre du partage personnalisé', desc : 'Description du partage personnalisée', chemin : '/page/user?id=123' } }} )<br><br><br><br><br>wx.createCanvasContext(canvasId)<br><br>Définition<br><br>Créer un contexte de dessin sur toile (spécifiez CanvasId)<br>Astuce : besoin de spécifier CanvasId , ce contexte de dessin n'agit que sur le <canvas/><br><br><br><br>paramètre<br><br>[tr]Description du type de paramètre[/tr]<table class="t_table"><tbody><tr class="firstRow">
<td>canvasId</td>
<td>String</td>
<td>画布表示，传入定义在 <canvas/> 的 canvas-id</td>
</tr></tbody></table>
<br> correspondant <br><br>Nouveau composant : <br><br><br>audioContext<br><br>audioContext est lié à un composant <audio/> composant. <br>Liste de méthodes de l'objet audioContext : <br>[tr]Description du paramètre de méthode[/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>Exemple de code : <br><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">Régler la durée de lecture actuelle sur 14 secondes</button><button type="primary" bindtap="audioStart"> ;Retour au début</button>// audio.jsPage({ onReady: function (e) { // Utilisez wx.createAudioContext pour obtenir le contexte audio 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() }, données : { 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="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/189/517/243/1488964166491492.png" class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"><br><br>picker-view<br><br>sélecteur de défilement de page intégré<br>[tr] nom d'attribut Type description de la valeur par défaut[/tr]<table class="t_table"><tbody>
<tr class="firstRow">
<td>valeur</td>
<td>Tableau de nombres</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>Les nombres dans le tableau représentent séquentiellement les éléments sélectionnés de la colonne de la vue du sélecteur dans la vue du sélecteur (l'indice commence à 0 lorsque le nombre est supérieur à la longueur de la vue du sélecteur). option de colonne, le dernier est sélectionné. </td>
</tr>
<tr>
<td>style d'indicateur</td>
<td>Chaîne</td>
<td></td>
<td>Définir le style de la boîte sélectionnée dans au milieu du sélecteur </td>
</tr>
<tr>
<td>bindchange</td>
<td>EventHandle</td>
<td></td>
<td>L'événement change est déclenché lorsque la valeur change lors du défilement. , event.detail = {value: value} ; value est un tableau, indiquant quel élément de la colonne de la vue du sélecteur est actuellement sélectionné (l'indice commence à 0)</td> </tr> tbody></tbody></table>Remarque : Seul le composant <picker-view-column/> peut y être placé, les autres nœuds ne seront pas affichés. <br><br><br>picker-view-column<br><br> ne peut être placé que dans <picker-view />, et la hauteur de son nœud enfant sera automatiquement définie sur la même valeur que celle du nœud enfant. case à cocher de la vue du sélecteur Très cohérent<br>Exemple de code :<br><view <view>{{année}}année{{mois}}mois{{jour}}jour</vue> -view indicateur- style="hauteur : 50 px;" style="largeur : 100 % ; hauteur : 300 px;" valeur="{{valeur}}" bindchange="bindChange"<picker-view-column< ;view wx : for="{{years}}" style="line-height : 50px">{{item}}ans</view> </picker-view-column> ; < view wx:for="{{months}}" style="line-height: 50px">{{item}}mois</view> -column> ; <view wx:for="{{days}}" style="line-height: 50px">{{item}}jour</view> picker -view></view>const date = new Date()const années = []const mois = []const jours = []for (soit i = 1990; i <= date.getFullYear(); i ) { ans.push(i)}pour (soit i = 1 ; je <= 12 ; i ) { mois.push(i)}pour (soit i = 1 ; i <= 31 ; i ) { jours.push ( i)}Page({ données : { années : années, année : date.getFullYear(), mois : mois, mois : 2, jours : jours, jour : 2, année : date.getFullYear(), valeur : [9999 , 1, 1], }, bindChange : function(e) { const val = e.detail.value this.setData({ année : this.data.years[val[0]], mois : this.data.months[ val [1]], jour : this.data.days[val[1]] }) }})<br/>Amélioration du canevas<br/><ul class="litype_1 list-paddingleft-2"><li><p>Un contexte CanvasContext ajouté</p></li><li><p>Ajout d'une API de contexte CanvasContext.arc()</p></li><li><p>A Ajout d'une API de contexte CanvasContext.fillRect()</p></li><li><p>A Ajout de l'API de contexte CanvasContext.strokeRect()</p></li><li><p>Ajout de l'API de contexte CanvasContext.createLinearGradient()</p></li><li><p>Ajout de l'API de contexte createCircularGradient(). <br/></p></li></ul><br/><br/>createCircularGradient<br/><br/>Définition<br/><br/>Crée une couleur dégradée circulaire. <br/>Conseil : Le point de départ est au centre du cercle et le point final est à l'anneau. <br/>Astuce : Vous devez utiliser addColorStop() pour spécifier des points de dégradé, au moins deux. <br/><br/><br/><br/>Paramètre<br/><br/>[tr]Définition du type de paramètre[/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></tbody></table><br/><br/><br/>Exemple<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Créer un gradientconst circulaire grd = ctx.createCircularGradient(75, 50, 50)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Remplir avec gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><br/><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/423/329/798/1488964146381136.png"  class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"/><br/><br/><br/>createLinearGradient<br/><br/>Définition<br/><br/>Créez une couleur dégradée linéaire. <br/>Astuce : Vous devez utiliser addColorStop() pour spécifier des points de dégradé, au moins deux. <br/><br/><br/><br/>Paramètre<br/><br/>[tr]Définition du type de paramètre[/tr]<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/><br/>Exemple<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Créer un gradientconst linéaire grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// Remplissez avec gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw()<br/><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/319/264/577/1488964126768032.png"  class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"/><br/>StrokeRect<br/><br/>define<br/><br/>dessinez un Rectangle (non rempli). <br/>Astuce : utilisez setFillStroke() pour définir la couleur de la ligne rectangulaire. Si elle n'est pas définie, la valeur par défaut est noire. <br/><br/><br/><br/>Paramètres<br/><br/>[tr]Description de la plage de types de paramètres[/tr]<table class="t_table"><tbody><tr class="firstRow">< td>x</td><td>Numéro</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>Coordonnée x du coin supérieur gauche du chemin rectangulaire</td></tr><tr> <td>y </td><td>Numéro</td><td><🎜></td><td>Coordonnée Y du coin supérieur gauche du chemin rectangulaire</td></tr><tr ><td>largeur</td ><td>Nombre</td><td><🎜></td><td>La largeur du chemin rectangulaire</td></tr><tr><td> height</td><td>Nombre</td><td><🎜></td><td>La hauteur du chemin rectangulaire</td></tr></tbody></table><br/><br/><br/>Exemple<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.StrokeRect(10, 10, 150, 75)ctx.draw ()<br/><br/><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/939/521/900/1488964112354042.png"  class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"/><br/>fillRect<br/><br/> définit <br/><br/> pour remplir un rectangle. <br/>Astuce : utilisez setFillStyle() pour définir la couleur de remplissage du rectangle. Si elle n'est pas définie, la valeur par défaut est le noir. <br/><br/><br/><br/>Paramètre<br/><br/>[tr]Description du type de paramètre[/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/>Exemple<br/><br/>const ctx = wx.createCanvasContext('myCanvas')ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br/><br/><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/656/510/394/1488964097771237.png"  class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"/><br/><br/><br/>arc<br/><br/>Définition<br/><br/>Dessinez un arc. <br/>Astuce : Pour créer un cercle, vous pouvez utiliser la méthode arc() pour spécifier que le radian réel est 0 et que le radian final est 2 * Math.PI. <br/>Astuce : utilisez la méthode Stroke() ou Fill() pour dessiner des arcs dans le canevas. <br/><br/><br/><br/>Paramètre<br/><br/>[tr]Description du type de paramètre[/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/>Exemple<br/><br/>const ctx = wx.createCanvasContext('myCanvas')// Dessiner les coordonnéesctx.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('noir')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)// Dessiner des pointsctx.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('bleu')ctx.fill()ctx.beginPath()ctx.arc(150, 75 , 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// Dessiner arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) ctx.setStrokeStyle('#333333')ctx.stroke()ctx.draw()<br/>Les trois coordonnées clés pour arc(100, 75, 50, 0, 1.5 * Math.PI) sont les suivantes : <img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/352/893/518/1488964083105591.png"  class="lazy" title="微信小程序0.11.122100 版本更新详情介绍" alt="微信小程序0.11.122100 版本更新详情介绍"    style="max-width:90%"  style="max-width:90%"/> <ul class=" list-paddingleft-2"><li><p>Vert : Centre du cercle (100, 75)</p></li><li><p>Rouge : Arc de départ (0)</p></li><li><p>Bleu : Arc de terminaison (1,5 * Math.PI)<br/></p></li></ul><br/><br/><br/><br/><br/>Dessiner sur toile<br/><br/>Tout en < Dessin in ;canvas/> doit être réalisé avec JavaScript : <br>WXML : (Nous utiliserons ce WXML comme modèle dans les exemples suivants, sauf s'il existe une instruction spéciale, et nous ne la répéterons pas) <br><canvas canvas -id ="myCanvas" style="border: 1px solid;"/>JS : (Nous mettrons JS dans onLoad dans l'exemple suivant) <br>const ctx = wx.createCanvasContext('myCanvas')ctx(. 'red')ctx.fillRect(10, 10, 150, 75)ctx.draw()<br><br><br>Étape 1 : Créer un contexte de dessin sur toile<br><br>Tout d'abord, vous devez créer un contexte de dessin Canvas CanvasContext. <br>CanvasContext est un objet intégré à l'applet et possède quelques méthodes de dessin : <br>const ctx = wx.createCanvasContext('myCanvas')<br><br><br>Étape 2 : Utiliser le contexte de dessin Canvas Décrire le dessin<br><br>Ensuite, décrivons ce que nous voulons dessiner dans Canvas. <br>Définissez la couleur de remplissage du contexte de dessin sur rouge : <br>ctx.setFillStyle('red') Utilisez la méthode fillRect(x, y, width, height) pour dessiner un rectangle rempli avec le rouge que vous venez de définir : <br>ctx .fillRect(10, 10, 150, 75)<br><br><br>Étape 3 : Dessiner<br><br>Dites au composant <canvas/> maintenant : <br>ctx.draw()<br><br><br><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">Déclaration de ce site Web</div>
						<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Outils d'IA chauds</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>Images de déshabillage gratuites</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>Dissolvant de vêtements AI</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/fr/ai">Afficher plus</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Article chaud</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/1796785841.html" title="Assassin's Creed Shadows: Solution d'énigmes de coquille" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Solution d'énigmes de coquille</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/1796789525.html" title="Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour" class="phpgenera_Details_mainR4_bottom_title">Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>2 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/1796783009.html" title="Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 Il y a quelques mois</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/1796785857.html" title="Où trouver la courte de la grue à atomide atomique" class="phpgenera_Details_mainR4_bottom_title">Où trouver la courte de la grue à atomide atomique</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/1796784440.html" title="<🎜>: Dead Rails - Comment relever chaque défi" class="phpgenera_Details_mainR4_bottom_title"><🎜>: Dead Rails - Comment relever chaque défi</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/fr/article.html">Afficher plus</a>
							</div>
						</div>
					</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Outils chauds</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Bloc-notes++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
													<h3>Bloc-notes++7.3.1</h3>
												</a>
												<p>Éditeur de code facile à utiliser et gratuit</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version chinoise" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 version chinoise</h3>
												</a>
												<p>Version chinoise, très simple à utiliser</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Envoyer Studio 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
													<h3>Envoyer Studio 13.0.1</h3>
												</a>
												<p>Puissant environnement de développement intégré PHP</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>Outils de développement Web visuel</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version Mac" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 version Mac</h3>
												</a>
												<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/fr/ai">Afficher plus</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Sujets chauds</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/gmailyxdlrkzn" title="Où se trouve l'entrée de connexion pour la messagerie Gmail ?" class="phpgenera_Details_mainR4_bottom_title">Où se trouve l'entrée de connexion pour la messagerie Gmail ?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7642</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/cakephp-tutor" title="Tutoriel CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel CakePHP</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1392</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/steamdzhmcssmgs" title="Quel est le format du nom de compte de Steam" class="phpgenera_Details_mainR4_bottom_title">Quel est le format du nom de compte de Steam</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>91</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/winactivationkeyper" title="Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent" class="phpgenera_Details_mainR4_bottom_title">Clé d&amp;amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>72</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/fr/faq/newyorktimesdailybrief" title="NYT Connexions Indices et réponses" class="phpgenera_Details_mainR4_bottom_title">NYT Connexions Indices et réponses</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>33</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>150</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/fr/faq/zt">Afficher plus</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/673693.html" title="Le mini-programme Xianyu WeChat est officiellement lancé" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170757595943212.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Le mini-programme Xianyu WeChat est officiellement lancé" />
								</a>
								<a href="https://www.php.cn/fr/faq/673693.html" title="Le mini-programme Xianyu WeChat est officiellement lancé" class="phphistorical_Version2_mids_title">Le mini-programme Xianyu WeChat est officiellement lancé</a>
								<span class="Articlelist_txts_time">Feb 10, 2024 pm	 10:39 PM</span>
								<p class="Articlelist_txts_p">Le mini programme WeChat officiel de Xianyu a été lancé discrètement. Dans le mini programme, vous pouvez publier des messages privés pour communiquer avec les acheteurs/vendeurs, afficher les informations personnelles et les commandes, rechercher des articles, etc. Si vous êtes curieux, qu'est-ce que le mini Xianyu WeChat. programme appelé ? Jetons un coup d'oeil. Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ; 3. Si vous souhaitez l'utiliser, vous devez activer le paiement WeChat avant d'acheter ;</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629465.html" title="L'applet WeChat implémente la fonction de téléchargement d'images" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170052888311890.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="L'applet WeChat implémente la fonction de téléchargement d'images" />
								</a>
								<a href="https://www.php.cn/fr/faq/629465.html" title="L'applet WeChat implémente la fonction de téléchargement d'images" class="phphistorical_Version2_mids_title">L'applet WeChat implémente la fonction de téléchargement d'images</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 am	 09:08 AM</span>
								<p class="Articlelist_txts_p">L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629690.html" title="Implémentez l'effet de menu déroulant dans l'applet WeChat" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170055022352293.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implémentez l'effet de menu déroulant dans l'applet WeChat" />
								</a>
								<a href="https://www.php.cn/fr/faq/629690.html" title="Implémentez l'effet de menu déroulant dans l'applet WeChat" class="phphistorical_Version2_mids_title">Implémentez l'effet de menu déroulant dans l'applet WeChat</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 pm	 03:03 PM</span>
								<p class="Articlelist_txts_p">Pour implémenter l'effet de menu déroulant dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires. Avec la popularité de l'Internet mobile, les mini-programmes WeChat sont devenus une partie importante du développement d'Internet, et de plus en plus de gens ont commencé à y prêter attention et à y prêter attention. utilisez les mini-programmes WeChat. Le développement de mini-programmes WeChat est plus simple et plus rapide que le développement d'applications traditionnelles, mais il nécessite également la maîtrise de certaines compétences en développement. Dans le développement des mini-programmes WeChat, les menus déroulants sont un composant courant de l'interface utilisateur, permettant une meilleure expérience utilisateur. Cet article présentera en détail comment implémenter l'effet de menu déroulant dans l'applet WeChat et fournira des informations pratiques.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629820.html" title="Implémenter des effets de filtre d'image dans les mini-programmes WeChat" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170056213860475.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implémenter des effets de filtre d'image dans les mini-programmes WeChat" />
								</a>
								<a href="https://www.php.cn/fr/faq/629820.html" title="Implémenter des effets de filtre d'image dans les mini-programmes WeChat" class="phphistorical_Version2_mids_title">Implémenter des effets de filtre d'image dans les mini-programmes WeChat</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 pm	 06:22 PM</span>
								<p class="Articlelist_txts_p">Implémentation d'effets de filtre d'image dans les mini-programmes WeChat Avec la popularité des applications de médias sociaux, les gens aiment de plus en plus appliquer des effets de filtre aux photos pour améliorer l'effet artistique et l'attractivité des photos. Les effets de filtre d'image peuvent également être implémentés dans les mini-programmes WeChat, offrant aux utilisateurs des fonctions de retouche photo plus intéressantes et créatives. Cet article expliquera comment implémenter des effets de filtre d'image dans les mini-programmes WeChat et fournira des exemples de code spécifiques. Tout d’abord, nous devons utiliser le composant canevas dans l’applet WeChat pour charger et modifier des images. Le composant canevas peut être utilisé sur la page</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629806.html" title="Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170056077741291.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel" />
								</a>
								<a href="https://www.php.cn/fr/faq/629806.html" title="Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel" class="phphistorical_Version2_mids_title">Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 pm	 05:59 PM</span>
								<p class="Articlelist_txts_p">Utilisez l'applet WeChat pour obtenir un effet de commutation de carrousel. L'applet WeChat est une application légère avec des caractéristiques de développement et d'utilisation simples et efficaces. Dans les mini-programmes WeChat, il est courant d'obtenir des effets de commutation de carrousel. Cet article explique comment utiliser l'applet WeChat pour obtenir l'effet de changement de carrousel et donne des exemples de code spécifiques. Tout d’abord, ajoutez un composant carrousel au fichier d’échange de l’applet WeChat. Par exemple, vous pouvez utiliser la balise &lt;swiper&gt; pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/691200.html" title="Quel est le nom de l'applet Xianyu WeChat ?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/170901068659339.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quel est le nom de l'applet Xianyu WeChat ?" />
								</a>
								<a href="https://www.php.cn/fr/faq/691200.html" title="Quel est le nom de l'applet Xianyu WeChat ?" class="phphistorical_Version2_mids_title">Quel est le nom de l'applet Xianyu WeChat ?</a>
								<span class="Articlelist_txts_time">Feb 27, 2024 pm	 01:11 PM</span>
								<p class="Articlelist_txts_p">Le mini-programme officiel WeChat de Xianyu a été lancé discrètement. Il offre aux utilisateurs une plate-forme pratique qui vous permet de publier et d'échanger facilement des objets inutilisés. Dans le mini programme, vous pouvez communiquer avec des acheteurs ou des vendeurs via des messages privés, afficher des informations personnelles et des commandes et rechercher les articles que vous souhaitez. Alors, comment s'appelle exactement Xianyu dans le mini-programme WeChat ? Ce guide didacticiel vous le présentera en détail. Les utilisateurs qui souhaitent savoir, veuillez suivre cet article et continuer à lire ! Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ;</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629819.html" title="Implémentez la fonction de suppression coulissante dans le mini-programme WeChat" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/170056213220708.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implémentez la fonction de suppression coulissante dans le mini-programme WeChat" />
								</a>
								<a href="https://www.php.cn/fr/faq/629819.html" title="Implémentez la fonction de suppression coulissante dans le mini-programme WeChat" class="phphistorical_Version2_mids_title">Implémentez la fonction de suppression coulissante dans le mini-programme WeChat</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 pm	 06:22 PM</span>
								<p class="Articlelist_txts_p">La mise en œuvre de la fonction de suppression coulissante dans les mini-programmes WeChat nécessite des exemples de code spécifiques. Avec la popularité des mini-programmes WeChat, les développeurs rencontrent souvent des problèmes de mise en œuvre de certaines fonctions courantes au cours du processus de développement. Parmi eux, la fonction de suppression coulissante est une exigence fonctionnelle courante et couramment utilisée. Cet article présentera en détail comment implémenter la fonction de suppression coulissante dans l'applet WeChat et donnera des exemples de code spécifiques. 1. Analyse des besoins Dans le mini programme WeChat, la mise en œuvre de la fonction de suppression coulissante implique les points suivants : Affichage de la liste : pour afficher une liste qui peut être glissée et supprimée, chaque élément de la liste doit inclure</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/fr/faq/629437.html" title="Implémenter l'effet de rotation d'image dans l'applet WeChat" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170052639172010.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implémenter l'effet de rotation d'image dans l'applet WeChat" />
								</a>
								<a href="https://www.php.cn/fr/faq/629437.html" title="Implémenter l'effet de rotation d'image dans l'applet WeChat" class="phphistorical_Version2_mids_title">Implémenter l'effet de rotation d'image dans l'applet WeChat</a>
								<span class="Articlelist_txts_time">Nov 21, 2023 am	 08:26 AM</span>
								<p class="Articlelist_txts_p">Pour implémenter l'effet de rotation d'image dans WeChat Mini Program, des exemples de code spécifiques sont nécessaires. WeChat Mini Program est une application légère qui offre aux utilisateurs des fonctions riches et une bonne expérience utilisateur. Dans les mini-programmes, les développeurs peuvent utiliser divers composants et API pour obtenir divers effets. Parmi eux, l'effet de rotation d'image est un effet d'animation courant qui peut ajouter de l'intérêt et des effets visuels au mini-programme. Pour obtenir des effets de rotation d'image dans les mini-programmes WeChat, vous devez utiliser l'API d'animation fournie par le mini-programme. Ce qui suit est un exemple de code spécifique qui montre comment</p>
							</div>
													</div>

<a href="https://www.php.cn/fr/weixin-marketing.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a>
            <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
            <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>

</body>

</html>