Maison > Article > Applet WeChat > Première expérience dans le développement de mini-programmes WeChat
this.selectComponent('.classSelector')
Vant Weapp est introduit dans Taro et ne peut pas être appelé directement via des packages NPM
tiers.
Vous devez effectuer les étapes suivantes :
dist
correspondant dans le projet /src/components/vant-weapp
répertoire. Pages
du fichier correspondant, configurez les composants requis pour chaque page. (Le soi-disant enregistrement global des composants ne peut pas être effectué dans config.usingComponents
.) app.js
config = { navigationBarTitleText: '首页', usingComponents: { "van-button": "../../components/vant-weapp/button/index", "van-popup": "../../components/vant-weapp/popup/index" } }
Vant-weapp
sera taro
automatiquement en conséquence Copiez une copie des composants dans , et les composants de dist/components
dépendent également de la bibliothèque d'outils Vant-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 le dist
dans le fichier /config/index.js
afin qu'il soit automatiquement copié dans le répertoire correspondant de config.copy.patterns
lors de la compilation. dist
copy: { patterns: [ { from: 'src/components/vant-weapp/wxs/', to: 'dist/components/vant-weapp/wxs/' } ], options: { } },
Vant-weapp
, elle sera compilée en px
par taro
afin de s'adapter à chaque appareil. Vous pouvez modifier le rpx
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的匹配模式 ] },
est la version applet WeChat deec-canvas
.ECharts
, elle doit donc être copiée en modifiant le fichier de configuration. dist/
copy: { patterns: [ ... { from: 'src/assets/fonts/', to: 'dist/assets/fonts/' }, ... ], options: { } }Puis, dans le
fichier d'entrée, app.js
. import './assets/fonts/iconfont.css'
this.triggerEvent( 'eventType', { key: value, //这里定义的键值对,在父组件中,通过args.detail.key获取; }, { bubbles: true, //事件属性:是否冒泡; capturePhase: true, //事件属性: 是否可捕获; } )
. 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
<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 .
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 :
canvas
et définissez l'attribut canvas
du conteneur hidden
via des conditions (commutateur de masque). En personnalisant les composants avec cover-view
et cover-image
, cover-view
peut être positionné et élevé pour éviter d'être écrasé par canvas
.
cover-view
doit être derrière canvas
flex
et order
. cover-view
prend en charge position: fixed
. L'opérateur typeof
wx:if
typeof
, et l'opérateur {{}}
ne peut pas être utilisé dans typeof
. Ne peut être utilisé qu'au sein de wxs
.
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)
。
popup
内容的大小不是由内容撑起来的,需要通过popup
组件的custom-class
定义一个类名,设置width
、height
来定义内容的尺寸。
在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
不支持单选。
注意@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.js
不需要再次编译,配置中新增编译时忽略echarts.js
。
weapp: { ... compile: { exclude: ['src/echarts-for-weixin/ec-canvas/echarts.js'] } }
可以在<span style="font-size: 14px;">(dispatch, getState) => {</span>
中使用。
将"本地设置"--> "上传时进行代码保护"取消勾选。
<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.getStorageSync('key')
获取缓存数据,结果仍是异步返回。同步接口需要结合await
使用,才是真正的同步。
主包不需要特殊处理。
分包
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> ) }
对于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!