Applet WeChat
Développement de mini-programmes
Résumer et organiser les composants de formulaire communs des mini-programmes WeChat
Résumer et organiser les composants de formulaire communs des mini-programmes WeChat
Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program. Il présente principalement certains composants de formulaire courants, notamment le bouton, la case à cocher, la saisie, l'étiquette et d'autres problèmes connexes. J'espère qu'il vous aidera. Tout le monde est utile.
【Recommandations d'apprentissage associées : Tutoriel d'apprentissage du mini-programme】
1. L'un des composants de formulaire couramment utilisés, utilisé pour le déclenchement d'événements et la soumission de formulaires. Sa table attributaire est présentée ci-dessous.
Exemple de code : <view>
<view>7.button小案例</view>
<view>(1)迷你按钮</view>
<button>主要按钮</button>
<button>次要按钮</button>
<button>警告按钮</button>
<view>(2)按钮状态</view>
<button>普通按钮</button>
<button>警用按钮</button>
<button>加载按钮</button>
<view>(3)增加按钮事件</view>
<button>点我获取用户信息</button></view>
< ;checkbox> est un composant de case à cocher, souvent utilisé pour sélectionner plusieurs données dans des formulaires. Le <checkbox-group></checkbox-group> de la case à cocher est le contrôle parent, et plusieurs contrôles enfants <checkbox></checkbox> sont imbriqués à l'intérieur. <button></button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。
代码示例：
<view>
<view>8.checkbox小案例</view>
<view>利用for循环批量生成</view>
<checkbox-group>
<label>
<checkbox></checkbox>{{item.value}}
</label>
</checkbox-group>
</view>
1.2 checkbox
<checkbox></checkbox>为复选框组件，常用于在表单中进行多项数据的选择。复选框的<checkbox-group></checkbox-group>为父控件，其内部嵌套若干个<checkbox></checkbox>子控件。
<checkbox-group></checkbox-group>属性如下：
<checkbox></checkbox>组件的属性如下：
代码示例：
checkbox.wxml
Page({
data: {
items: [
{ name: "tiger", value: "老虎" },
{ name: "elephant", value: "大象" },
{ name: "lion", value: "狮子", checked: "true" },
{ name: "penguin", value: "企鹅" },
{ name: "elk", value: "麋鹿" },
{ name: "swan", value: "天鹅" },
]
},
checkboxChange:function(e) {
console.log("checkbox发生change事件，携带value值为：", e.detail.value)
}})
checkbox.js
<view> <view>9.input小案例</view> <view>(1)文字输入框</view> <input> <view>(2)密码输入框</view> <input> <view>(3)禁用输入框</view> <input> <view>(4)为输入框增加事件监听</view> <input></view>
1.3 input
<input>为输入框组件，常用于文本(如姓名、年龄等信息)的输入。属性表如下：
<view> <view>10.lable小案例</view> <view>(1)利用for属性</view> <checkbox-group> <checkbox></checkbox> <label>老虎</label> <checkbox></checkbox> <label>大象</label> <checkbox></checkbox> <label>狮子</label> </checkbox-group> <view>(2)label包裹组件</view> <checkbox-group> <label> <checkbox></checkbox>老虎 </label> <label> <checkbox></checkbox>大象 </label> <label> <checkbox></checkbox>狮子 </label> </checkbox-group></view>
1.4 label
<label></label>是标签组件，不会呈现任何效果，但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时，就会触发此控件，即当用户选择该标签时，事件会传递到和标签相关的表单控件上，可以使用for属性绑定id,也可以将空间放在该标签内部，该组件对应属性如下所示。
wxml
<view> <view>11.form小案例</view> <view>模拟注册功能</view> <form> <text>用户名:</text> <input> <text>密码:</text> <input> <text>手机号:</text> <input> <text>验证码:</text> <input> <button>注册</button> <button>重置</button> </form></view>
1.5 form
<form></form>为表单控件组件，用于提交表单组件中的内容。<form></form>控件组件内部可以嵌套多种组件。
组件属性如下：
form.wxml
Page({
onSubmit(e) {
console.log("form发生了submit事件，携带数据为：")
console.log(e.detail.value)
},
onReset() {
console.log("form发生了reset事件，表单已被重置")
}})
form.js
<view>
<view>14.radio小案例</view>
<view>利用for循环批量生成</view>
<radio-group>
<block>
<radio></radio>{{item.value}} </block>
</radio-group></view>
输入测试数据后点击注册按钮触发表单提交事件。
1.6 radio
<radio></radio>为单选框组件，往往需配合<radio-group></radio-group>组件来使用，<radio></radio>标签嵌套在<radio-group></radio-group>当中。
<radio-group></radio-group>组件属性如下：
<radio></radio>组件属性如下：
radio.wxml
Page({
data: {
radioItems: [
{ name: 'tiger', value: '老虎' },
{ name: 'elephant', value: '大象' },
{ name: 'lion', value: '狮子', checked: 'true' },
{ name: 'penguin', value: '企鹅' },
{ name: 'elk', value: '麋鹿' },
{ name: 'swan', value: '天鹅' },
]
},
radioChange:function(e) {
console.log("radio发生change事件，携带value值为：", e.detail.value)
}})
radio.js
<view> <view>15.slider小案例</view> <view>(1)滑动条右侧显示当前进度值</view> <slider></slider> <view>(2)自定义滑动条颜色与滑块样式</view> <slider></slider> <view>(3)禁用滑动条</view> <slider></slider> <view>(4)增加滑动条监听事件</view> <slider></slider></view>
1.7 slider
<slider></slider> <checkbox-group></checkbox-group>Les attributs sont les suivants :
<checkbox></checkbox>Les attributs du composant sont les suivants :
Exemple de code :
<view> <view>16.switch小案例</view> <view>增加switch事件监听</view> <switch></switch> <switch></switch></view>🎜checkbox.js 🎜
<view> <form> <view>1.你现在大几？</view> <radio-group> <radio></radio>大一 <radio></radio>大二 <radio></radio>大三 <radio></radio>大四 </radio-group> <view>2.你使用手机最大的用途是什么？</view> <checkbox-group> <label><checkbox></checkbox>社交</label> <label> <checkbox></checkbox>网购</label> <label> <checkbox></checkbox>学习</label><label> <checkbox></checkbox>其他</label> </checkbox-group> <view>3.平时每天使用手机多少小时？</view> <slider></slider> <view>4.你之前有使用过微信小程序吗？</view> <radio-group> <radio></radio>无 <radio></radio>有 </radio-group> <view>5.谈谈你对微信小程序未来发展的看法</view> <textarea></textarea> <button>提交</button> <button>重置</button> </form></view>🎜 🎜🎜1.3 Entrée
& lt; /code> est un composant de zone de saisie, souvent utilisé pour saisir du texte (tel que le nom, l'âge et d'autres informations). La table attributaire est la suivante : 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/617720faff067e1fd02c41cb70752b16-5.png" class="lazy" alt="Résumer et organiser les composants de formulaire communs des mini-programmes WeChat">🎜 <pre class="brush:php;toolbar:false">Page({
universityChange: function (e) {
console.log("你选择的现在大几：", e.detail.value)
},
mobilChange: function (e) {
console.log("你选择使用手机的最大用途是：", e.detail.value)
},
timechange: function (e) {
console.log("你选择的每天使用手机的时间是：", e.detail.value + "小时")
},
programChange: function (e) {
console.log("你选择的是否使用过微信小程序：", e.detail.value)
},
onSubmit(e) {
console.log("你输入的对小程序发展前途的看法是："+e.detail.value.textarea)
},
onReset() {
console.log("表单已被重置")
}})</pre>🎜🎜🎜1.4 étiquette🎜🎜 <code> est un composant d'étiquette qui ne produit aucun effet, mais peut être utilisé pour améliorer la convivialité des composants de formulaire. Lorsque l'utilisateur clique sur le texte dans l'élément label, ce contrôle sera déclenché. Autrement dit, lorsque l'utilisateur sélectionne l'étiquette, l'événement sera transmis au contrôle de formulaire lié à l'étiquette. Vous pouvez utiliser l'attribut for pour lier l'étiquette. id, ou vous pouvez mettre l'espace dans À l'intérieur de la balise, les propriétés correspondantes du composant sont les suivantes. 🎜🎜🎜🎜wxml🎜rrreee 🎜Formulaire 1.5 🎜🎜 <form></form> est un composant de contrôle de formulaire, utilisé pour soumettre du contenu dans le composant de formulaire. <form></form>Une variété de composants peuvent être imbriqués à l'intérieur du composant de contrôle. 🎜🎜 Les propriétés du composant sont les suivantes : 🎜🎜🎜 🎜 form.wxml🎜rrreee🎜form.js🎜rrreee🎜 Après avoir saisi les données du test, cliquez sur le bouton d'inscription pour déclencher l'événement de soumission du formulaire. 🎜🎜🎜🎜1.6 radio🎜 🎜 <radio></radio> est un composant de bouton radio, qui doit souvent être utilisé avec le composant <radio-group></radio-group>. la balise est imbriquée dans <radio-group></radio-group>. 🎜🎜 <radio-group></radio-group>Les propriétés du composant sont les suivantes : 🎜🎜
🎜🎜 <radio></radio>Les propriétés du composant sont les suivantes : 🎜🎜🎜🎜radio.wxml🎜rrreee🎜radio.js🎜rrreee🎜 🎜🎜 Slider🎜🎜 & lt; Slider & gt; sélecteur coulissant, pour la visualisation Changer dynamiquement la valeur d'une variable. La table attributaire est la suivante : 🎜🎜🎜🎜🎜slider.wxml🎜rrreee🎜🎜🎜<h2 id="switch">1.8 switch</h2>
<p> <code><switch></switch>为开关选择器，常用于表单上地开关功能，属性表如下所示。
switch.wxml
<view> <view>16.switch小案例</view> <view>增加switch事件监听</view> <switch></switch> <switch></switch></view>
1.9 textarea
<textarea></textarea>为多行输入框，常用于多行文字的输入。
2、实训小案例–问卷调查
survey.wxml
<view> <form> <view>1.你现在大几？</view> <radio-group> <radio></radio>大一 <radio></radio>大二 <radio></radio>大三 <radio></radio>大四 </radio-group> <view>2.你使用手机最大的用途是什么？</view> <checkbox-group> <label><checkbox></checkbox>社交</label> <label> <checkbox></checkbox>网购</label> <label> <checkbox></checkbox>学习</label><label> <checkbox></checkbox>其他</label> </checkbox-group> <view>3.平时每天使用手机多少小时？</view> <slider></slider> <view>4.你之前有使用过微信小程序吗？</view> <radio-group> <radio></radio>无 <radio></radio>有 </radio-group> <view>5.谈谈你对微信小程序未来发展的看法</view> <textarea></textarea> <button>提交</button> <button>重置</button> </form></view>
survey.js
Page({
universityChange: function (e) {
console.log("你选择的现在大几：", e.detail.value)
},
mobilChange: function (e) {
console.log("你选择使用手机的最大用途是：", e.detail.value)
},
timechange: function (e) {
console.log("你选择的每天使用手机的时间是：", e.detail.value + "小时")
},
programChange: function (e) {
console.log("你选择的是否使用过微信小程序：", e.detail.value)
},
onSubmit(e) {
console.log("你输入的对小程序发展前途的看法是："+e.detail.value.textarea)
},
onReset() {
console.log("表单已被重置")
}})
【相关学习推荐：小程序学习教程】
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Le mini-programme Xianyu WeChat est officiellement lancé
Feb 10, 2024 pm 10:39 PM
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 ;
Implémenter des effets de filtre d'image dans les mini-programmes WeChat
Nov 21, 2023 pm 06:22 PM
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
Implémentez l'effet de menu déroulant dans l'applet WeChat
Nov 21, 2023 pm 03:03 PM
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.
Quel est le nom de l'applet Xianyu WeChat ?
Feb 27, 2024 pm 01:11 PM
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 ;
L'applet WeChat implémente la fonction de téléchargement d'images
Nov 21, 2023 am 09:08 AM
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
Implémenter l'effet de rotation d'image dans l'applet WeChat
Nov 21, 2023 am 08:26 AM
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
Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel
Nov 21, 2023 pm 05:59 PM
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 <swiper> pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b
Implémentez la fonction de suppression coulissante dans le mini-programme WeChat
Nov 21, 2023 pm 06:22 PM
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
