


Première expérience dans le développement de mini-programmes WeChat
Instance de composant
this.selectComponent('.classSelector')
Introduction
<span style="font-size: 14px;">Taro</span>
Vant Weapp est introduit dans Taro et ne peut pas être appelé directement via des packages NPM
tiers.
Vous devez effectuer les étapes suivantes :
- Trouvez le package de fichiers de téléchargement Vant-weapp sur github et copiez le répertoire
dist
correspondant dans le projet/src/components/vant-weapp
répertoire. - Dans
Pages
du fichier correspondant, configurez les composants requis pour chaque page. (Le soi-disant enregistrement global des composants ne peut pas être effectué dansconfig.usingComponents
.)app.js
config = { navigationBarTitleText: '首页', usingComponents: { "van-button": "../../components/vant-weapp/button/index", "van-popup": "../../components/vant-weapp/popup/index" } }
- Après avoir utilisé le composant
- , la construction
Vant-weapp
serataro
automatiquement en conséquence Copiez une copie des composants dans , et les composants dedist/components
dépendent également de la bibliothèque d'outilsVant-weapp
, et la bibliothèque d'outils/src/components/vant-weapp/wxs
taro
ne sera pas automatiquement copiée dans . Par conséquent, nous devons modifier ledist
dans le fichier/config/index.js
afin qu'il soit automatiquement copié dans le répertoire correspondant deconfig.copy.patterns
lors de la compilation.dist
copy: { patterns: [ { from: 'src/components/vant-weapp/wxs/', to: 'dist/components/vant-weapp/wxs/' } ], options: { } },
- L'unité utilisée dans le style de
- étant
Vant-weapp
, elle sera compilée enpx
partaro
afin de s'adapter à chaque appareil. Vous pouvez modifier lerpx
dans le fichier/config/index.js
pour empêcher la conversion d'unité.config.weapp.module.pxtransform.selectorBlackList
pxtransform: { enable: true, config: { }, selectorBlackList: [ /^.van-.*?$/, // 这里是vant-weapp中className的匹配模式 ] },
ec-canvas
est la version applet WeChat deec-canvas
.ECharts
iconfont
Téléchargez-le localement, ne changez rien, placez-le à l'emplacement spécifié. Cette ressource ne sera pas automatiquement copiée dans le dossier, elle doit donc être copiée en modifiant le fichier de configuration. dist/
copy: { patterns: [ ... { from: 'src/assets/fonts/', to: 'dist/assets/fonts/' }, ... ], options: { } }
fichier d'entrée, app.js
. import './assets/fonts/iconfont.css'
Composant personnalisé
Composant transmettant des paramètresthis.triggerEvent(
'eventType',
{
key: value, //这里定义的键值对,在父组件中,通过args.detail.key获取;
},
{
bubbles: true, //事件属性:是否冒泡;
capturePhase: true, //事件属性: 是否可捕获;
}
)
Copier après la connexion
this.triggerEvent( 'eventType', { key: value, //这里定义的键值对,在父组件中,通过args.detail.key获取; }, { bubbles: true, //事件属性:是否冒泡; capturePhase: true, //事件属性: 是否可捕获; } )
Slot
est utilisé de la même manière que. Vue
Remarque : Les styles définis dans le composant pour ne fonctionneront pas. Le style de la structure passé en slot
ne peut être défini qu'à l'endroit où le composant est appelé. slot
Obstacles au développement
<h3>TabBar personnalisé dans Taro<code><span style="font-size: 14px;">Taro</span>
Quand changer d'onglet (config.tabBar.custom = true dans app.jsx
), cela doit être dans le cycle de vie de la page de l'onglet correspondante componentDidShow
:
if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) { this.$scope.getTabBar().setData({ selected: 1 }) }
Notez que c'est this.$scope.getTabBar .
Problème de couverture de niveau causé par Canvas
canvas
est un composant natif créé par le client, et le niveau du composant natif est le plus élevé, donc la page Peu importe le nombre d'autres composants définis dansz-index
, ils ne peuvent pas être placés au-dessus du composant natif.
Donc, si canvas
interagit avec le masque en même temps, canvas
sera au-dessus du masque.
Solution :
- enveloppez une couche de structure à l'extérieur de
canvas
et définissez l'attributcanvas
du conteneurhidden
via des conditions (commutateur de masque). -
En personnalisant les composants avec
cover-view
etcover-image
,cover-view
peut être positionné et élevé pour éviter d'être écrasé parcanvas
.- Étant donné que le composant natif inséré ultérieurement peut écraser le composant natif précédent, veuillez noter : structurellement,
cover-view
doit être derrièrecanvas
- Vous ; peut ajuster l'ordre d'affichage via
flex
etorder
. - Seule la couche la plus externe de
cover-view
prend en chargeposition: fixed
. L'opérateur ne peut pas être utilisé dans l'instruction
- Étant donné que le composant natif inséré ultérieurement peut écraser le composant natif précédent, veuillez noter : structurellement,
typeof
wx:if
typeof
, et l'opérateur {{}}
ne peut pas être utilisé dans typeof
. Ne peut être utilisé qu'au sein de wxs
.
affectation d'initialisation des données
Je ne sais pas quand les données seront initialisées, mais lors de l'initialisation de data
, vous ne pouvez pas utiliser this
pour pointer vers le courant instance du composant (c'est this === void 0
), c'est-à-dire que l'data
initialisation ne peut donner qu'une seule constante . Lorsque
a besoin de properties
ou methods
pour initialiser data
, la valeur de attached
ne peut être mise à jour que via this.setData
dans le cycle de vie data
.
而且,如果data.fn = this.methodName
,methodName
中如果调用了this
引用,这时this
指向的是data
,所以需要使用data.fn = this.methodName.bind(this)
。
vant-weapp库中的popup样式设置
popup
内容的大小不是由内容撑起来的,需要通过popup
组件的custom-class
定义一个类名,设置width
、height
来定义内容的尺寸。
vant-tree-select事件触发
在Taro
中的代码风格类React
,而vant-weapp
库中的代码风格为wxml
和wxs
风格。React
绑定事件是驼峰式,wxml
绑定事件是使用-
连字符分隔。
这就造成了Taro
使用vant-tree-select
组件时,onClickNav
和onClickItem
不会被vant-tree-select
识别,事件无法触发。
解决方案:对vant-tree-select
进行二次封装,事件原始触发通过this.$triggerEvent
传出驼峰式的事件类型,在Taro
中调用。
目前vant-weapp0.5.20
中,vant-tree-select
不支持单选。
props获取不到
驼峰式命名的事件无法触发[微信小程序]
注意@tarojs/cli
的版本,如最初用的1.2.0
版本就获取不到自定义组件传的参数,升级到最新版1.3.15
就可以了。
注意@tarojs/cli
的版本,如最初用的1.2.0
版本无法触发驼峰式命名的事件,升级到最新版1.3.15
,使用onClick-nav
形式绑定事件就可以了。
<span style="font-size: 14px;">Taro</span>
编译器无法自动将用到组件的<span style="font-size: 14px;">.wxs</span>
文件移动到<span style="font-size: 14px;">/dist</span>
相应目录下
手动移动。
在<span style="font-size: 14px;">微信开发者工具</span>
中运行<span style="font-size: 14px;">Taro</span>
代码,如果有<span style="font-size: 14px;">async/await</span>
,则regenerator is not defined。
将微信开发者工具
--> 右上角详情
--> 本地设置
里的配置全部关掉,如ES6转ES5
...。
定制echarts,引入报错
echarts.js
不需要再次编译,配置中新增编译时忽略echarts.js
。
weapp: { ... compile: { exclude: ['src/echarts-for-weixin/ec-canvas/echarts.js'] } }
getState()获取Store存储的数据
可以在<span style="font-size: 14px;">(dispatch, getState) => {</span>
中使用。
真机调试正常,预览/体验版空白(只有tabbar)
将"本地设置"--> "上传时进行代码保护"取消勾选。
<span style="font-size: 14px;">Taro</span>
中<span style="font-size: 14px;">className=''</span>
单引号赋值不起作用。
className
的值使用双引号包裹。
<span style="font-size: 14px;">Taro</span>
自定义组件内部使用<span style="font-size: 14px;">iconfont</span>
,不显示图标
参照外部样式类、全局样式类。
或者,组件单独引入iconfont.css
也可以。
获取路由参数
this.$router.params
<span style="font-size: 14px;">iconfont</span>
字符串渲染
如果将字体做变量使用,通用情况下无法正常显示。
- 需要将
icon: ['', '']
改写成icon: ['\ue61e', '\ue62d']
。 <rich-text nodes={}></rich-text>
使用Taro/微信小程序同步接口,仍异步返回结果
如使用Taro.getStorageSync('key')
获取缓存数据,结果仍是异步返回。同步接口需要结合await
使用,才是真正的同步。
分包
包大小限制
- 包超过2048KB,无法上传
分包操作
-
主包不需要特殊处理。
- navigateTab导航的页面必须在主包中。
-
分包
- 分包在
subPackages
配置。
- 分包在
pages: [ 'pages/login/login', 'pages/index/index', 'pages/manage/manage', 'pages/schedule/schedule', 'pages/inpidual/inpidual' ], 'subPackages': [ { 'root': 'pages-main', name: 'main', 'pages': [ 'acs/acs', 'acs-setting/acs-setting', 'setting-details/setting-details', 'current-energy/current-energy', 'history-energy/history-energy', 'electricity/electricity', 'runtime/runtime', 'daily-usage/daily-usage', 'onshift-record/onshift-record', 'schedule-details/schedule-details' ] }, ],
伪动态绑定事件
// index.wxml <input wx:if="{{metas.type == 'text' || metas.type == 'number' || metas.type == 'idcard' || metas.type == 'digit'}}" name="{{metas.name}}" type="{{metas.type}}" value="{{value}}" placeholder="{{metas.attrs.placeholder}}" bindchange="{{changeValidate}}" bindinput="{{inputValidate}}" bindblur="{{blurValidate}}" />
// index.js Component({ data: { changeValidate: '', inputValidate: '', blurValidate: '', eventType: 'input', rules: '', value: '', isRequired: false, validateState: '', //['validating', 'success', 'error'] validateMessage: '' }, observers: { rules(newV) { console.log('------=======') this.setData({ [`${this.data.eventType}Validate`]: 'onBlurValidate' }) } }, methods: { onBlurValidate (e) { this.onValidate(e, rule) }, onValidate (e, rule) { } } })
获取组件实例
refFormItem = (node, idx) => { if(this.formItem) { !this.formItem.includes(node) && this.formItem.push(node) } else { this.formItem = [node] } } ... clearValidate () { console.log(this.formItem) this.formItem.forEach(item => { item.clearValidate() }) } ... render () { const { fieldMetas } = this.props; return ( <Form className="form" onSubmit={this.submitForm.bind(this)}> { fieldMetas.map((meta, idx) => { return ( <form-item ref\={this.refFormItem} onValidate={this.gatherValidate.bind(this)} taroKey={meta.name} metas={meta} initialValue={this.findValue.call(this, meta.name)}> </form-item> ) }) } <Button form-type="submit">按钮</Button> <Button onClick={this.clearValidate}>按钮</Button> </Form> ) }
styleIsolation: "apply-shared"
对于options.styleIsolation = "apply-shared"
的应用:
如果是组件包裹组件,内部组件设置该配置,外部组件的样式依旧无法影响内部组件,Page()或Component()注册的页面级的样式才能影响到组件内部样式。
推荐教程:《微信小程序》
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

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.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

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 ;

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

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 ;

Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? En tant que plate-forme de développement d'applications mobiles populaire, l'applet WeChat est utilisée par de plus en plus de développeurs. Dans les mini-programmes WeChat, les transactions de seconde main constituent une exigence fonctionnelle courante. Cet article expliquera comment utiliser PHP pour développer la fonction de transaction secondaire de l'applet WeChat et fournira des exemples de code spécifiques. 1. Travail de préparation Avant de commencer le développement, vous devez vous assurer que les conditions suivantes sont remplies : l'environnement de développement de l'applet WeChat a été configuré, y compris l'enregistrement de l'AppID de l'applet et sa configuration en arrière-plan de l'applet.

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.

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é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

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
