组件实例
this.selectComponent('.classSelector')
引入
<span style="font-size: 14px;">Taro</span>
Taro中引入Vant Weapp,不能直接通过第三方NPM
包的形式直接调用。
需要进行以下几步:
- 在github上找到Vant-weapp下载文件包,将对应的
dist
目录复制到项目/src/components/vant-weapp
目录下。 - 在
Pages
对应文件的config.usingComponents
中,配置每个页面所需要的组件。(无法在app.js
中进行所谓的全局注册组件。)
config = { navigationBarTitleText: '首页', usingComponents: { "van-button": "../../components/vant-weapp/button/index", "van-popup": "../../components/vant-weapp/popup/index" } }
- 在使用
Vant-weapp
组件后,taro
构建会自动将相应的组件复制一份到dist/components
下,而Vant-weapp
的组件还依赖工具库/src/components/vant-weapp/wxs
,该工具库taro
不会自动复制到dist
中。所以,我们需要修改/config/index.js
文件中的config.copy.patterns
,让其在编译时,自动复制到dist
对应目录下。
copy: { patterns: [ { from: 'src/components/vant-weapp/wxs/', to: 'dist/components/vant-weapp/wxs/' } ], options: { } },
- 由于
Vant-weapp
的样式使用的单位是px
,所以会被taro
编译成rpx
,以便对各个设配进行适配。可以通过修改/config/index.js
文件中的config.weapp.module.pxtransform.selectorBlackList
不让其单位转换。
pxtransform: { enable: true, config: { }, selectorBlackList: [ /^.van-.*?$/, // 这里是vant-weapp中className的匹配模式 ] },
ec-canvas
ec-canvas
是ECharts
的微信小程序版本。
<span style="font-size: 14px;">iconfont</span>
下载到本地,什么都不要改,放到指定位置。
该资源不会自动拷贝到dist/
文件夹下,所以需要通过修改配置文件拷贝。
copy: { patterns: [ ... { from: 'src/assets/fonts/', to: 'dist/assets/fonts/' }, ... ], options: { } }
然后,在app.js
入口文件中,import './assets/fonts/iconfont.css'
。
自定义组件
组件向外传参
this.triggerEvent( 'eventType', { key: value, //这里定义的键值对,在父组件中,通过args.detail.key获取; }, { bubbles: true, //事件属性:是否冒泡; capturePhase: true, //事件属性: 是否可捕获; } )
插槽slot
用法同Vue
。
注意:组件内部对slot
定义的样式,不起作用。只能在调用组件的位置,对传入slot
内的结构进行样式定义。
开发障碍
<span style="font-size: 14px;">Taro</span>
中自定义tabBar
切换Tab时(app.jsx
中config.tabBar.custom = true),需要在对应Tab页componentDidShow
生命周期中:
if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) { this.$scope.getTabBar().setData({ selected: 1 }) }
注意是this.$scope.getTabBar。
Canvas引起的层级覆盖问题
canvas
是由客户端创建的原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置z-index
为多少,都无法盖在原生组件上。
所以,如果canvas
和遮罩交互同时存在时,canvas
会在遮罩的上层。
解决方案:
- 在
canvas
外包裹一层结构,通过条件(遮罩的开关)来设置canvas
容器的hidden
属性。 -
通过
cover-view
、cover-image
自定义组件,cover-view
通过定位,提升层级,可以防止被canvas
覆盖。- 因为后插入的原生组件可以覆盖之前的原生组件,所以,要注意:结构上,
cover-view
一定要在canvas
后边; - 可以通过
flex
和order
来调整展示顺序。 - 只有最外层
cover-view
才支持position: fixed
。
- 因为后插入的原生组件可以覆盖之前的原生组件,所以,要注意:结构上,
typeof
wx:if
语句中,不能使用typeof
运算符,{{}}
中不能使用typeof
运算符,只能在wxs
中使用。
data初始化赋值
不知道data什么时机初始化,但,初始化data
的时候,不能使用this
指向当前组件实例(这是this === void 0
),也就是说,data
初始化只能给一个常量。
需要properties
或methods
来初始化data
的时候,只能在生命周期attached
中通过this.setData
更新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()注册的页面级的样式才能影响到组件内部样式。
推荐教程:《微信小程序》
Atas ialah kandungan terperinci 微信小程序开发初次体验. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod