組件實(shí)例this.selectComponent('
.classSelector'
)引入TaroTaro中引入Vant Weapp，不能直接通過第三方NPM包的形式直接調(diào)用。
需要進(jìn)行以下幾步：
在github上找到Vant-weapp下載文件包，將對應(yīng)的dist目錄復(fù)制到項(xiàng)目/src/components/vant-weapp目錄下。
在Pages對應(yīng)文件的config.usingComponents中，配置每個頁面所需要的組件。
(無法在app.js中進(jìn)行所謂的全局注冊組件。
) config = {
navigationBarTitleText: '
首頁'
, usingComponents: {
"van-button": "../../components/vant-weapp/button/index", "van-popup": "../../components/vant-weapp/popup/index" }
}
在使用Vant-weapp組件后，taro構(gòu)建會自動將相應(yīng)的組件復(fù)制一份到dist/components下，而Vant-weapp的組件還依賴工具庫/src/components/vant-weapp/wxs，該工具庫taro不會自動復(fù)制到dist中。
所以，我們需要修改/config/index.js文件中的config.copy.patterns，讓其在編譯時，自動復(fù)制到dist對應(yīng)目錄下。
copy: {
patterns: [ {
from: '
src/components/vant-weapp/wxs/'
, to: '
dist/components/vant-weapp/wxs/'
}
], options: {
}
}
,由于Vant-weapp的樣式使用的單位是px，所以會被taro編譯成rpx，以便對各個設(shè)配進(jìn)行適配。
可以通過修改/config/index.js文件中的config.weapp.module.pxtransform.selectorBlackList不讓其單位轉(zhuǎn)換。
pxtransform: {
enable: true, config: {
}
, selectorBlackList: [ /^.van-.*?$/, // 這里是vant-weapp中className的匹配模式 ] }
,ec-canvasec-canvas是 ECharts 的微信小程序版本。
iconfont下載到本地，什么都不要改，放到指定位置。
該資源不會自動拷貝到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。
注意：
組件內(nèi)部對slot定義的樣式，不起作用。
只能在調(diào)用組件的位置，對傳入slot內(nèi)的結(jié)構(gòu)進(jìn)行樣式定義。
開發(fā)障礙Taro中自定義tabBar切換Tab時(app.jsx中config.tabBar.custom = true)，需要在對應(yīng)Tab頁componentDidShow生命周期中：
if (typeof this.$scope.getTabBar === '
function'
&& this.$scope.getTabBar()) {
this.$scope.getTabBar().setData({
selected: 1 }
) }
注意是this.$scope.getTabBar。
Canvas引起的層級覆蓋問題canvas是由客戶端創(chuàng)建的原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。
所以，如果canvas和遮罩交互同時存在時，canvas會在遮罩的上層。
解決方案：
在canvas外包裹一層結(jié)構(gòu)，通過條件(遮罩的開關(guān))來設(shè)置canvas容器的hidden屬性。
通過cover-view、cover-image自定義組件，cover-view通過定位，提升層級，可以防止被canvas覆蓋。
因?yàn)楹蟛迦氲脑M件可以覆蓋之前的原生組件，所以，要注意：
結(jié)構(gòu)上，cover-view一定要在canvas后邊；可以通過flex和order來調(diào)整展示順序。
只有最外層cover-view才支持position: fixed。
typeofwx:if語句中，不能使用typeof運(yùn)算符，{
{
}
}
中不能使用typeof運(yùn)算符，只能在wxs中使用。
data初始化賦值不知道data什么時機(jī)初始化，但，初始化data的時候，不能使用this指向當(dāng)前組件實(shí)例（這是this === void 0），也就是說，data初始化只能給一個常量。
需要properties或methods來初始化data的時候，只能在生命周期attached中通過this.setData更新data的值。
而且，如果data.fn = this.methodName，methodName中如果調(diào)用了this引用，這時this指向的是data，所以需要使用data.fn = this.methodName.bind(this)。
vant-weapp庫中的popup樣式設(shè)置popup內(nèi)容的大小不是由內(nèi)容撐起來的，需要通過popup組件的custom-class定義一個類名，設(shè)置width、height來定義內(nèi)容的尺寸。
vant-tree-select事件觸發(fā)在Taro中的代碼風(fēng)格類React，而vant-weapp庫中的代碼風(fēng)格為wxml和wxs風(fēng)格。
React綁定事件是駝峰式，wxml綁定事件是使用-連字符分隔。
這就造成了Taro使用vant-tree-select組件時，onClickNav和onClickItem不會被vant-tree-select識別，事件無法觸發(fā)。
解決方案：
對vant-tree-select進(jìn)行二次封裝，事件原始觸發(fā)通過this.$triggerEvent傳出駝峰式的事件類型，在Taro中調(diào)用。
目前vant-weapp0.5.20中，vant-tree-select不支持單選。
props獲取不到駝峰式命名的事件無法觸發(fā)[微信小程序]注意@tarojs/cli的版本，如最初用的1.2.0版本就獲取不到自定義組件傳的參數(shù)，升級到最新版1.3.15就可以了。
注意@tarojs/cli的版本，如最初用的1.2.0版本無法觸發(fā)駝峰式命名的事件，升級到最新版1.3.15，使用onClick-nav形式綁定事件就可以了。
Taro編譯器無法自動將用到組件的.wxs文件移動到/dist相應(yīng)目錄下手動移動。
在微信開發(fā)者工具中運(yùn)行Taro代碼，如果有async/await，則regenerator is not defined。
將微信開發(fā)者工具--> 右上角詳情--> 本地設(shè)置里的配置全部關(guān)掉，如ES6轉(zhuǎn)ES5...。
定制echarts，引入報(bào)錯echarts.js不需要再次編譯，配置中新增編譯時忽略echarts.js。
weapp: {
... compile: {
exclude: ['
src/echarts-for-weixin/ec-canvas/echarts.js'
] }
}
getState()獲取Store存儲的數(shù)據(jù)可以在(dispatch, getState) => {
中使用。
真機(jī)調(diào)試正常，預(yù)覽/體驗(yàn)版空白（只有tabbar）將"本地設(shè)置"--> "上傳時進(jìn)行代碼保護(hù)"取消勾選。
Taro中className='
'
單引號賦值不起作用。
className的值使用雙引號包裹。
Taro自定義組件內(nèi)部使用iconfont，不顯示圖標(biāo)參照外部樣式類、全局樣式類。
或者，組件單獨(dú)引入iconfont.css也可以。
獲取路由參數(shù)this.$router.paramsiconfont字符串渲染如果將字體做變量使用，通用情況下無法正常顯示。
需要將icon: ['

'
, '

'
]改寫成icon: ['
ue61e'
, '
ue62d'
]。

}
>使用Taro/微信小程序同步接口，仍異步返回結(jié)果如使用Taro.getStorageSync('
key'
)獲取緩存數(shù)據(jù)，結(jié)果仍是異步返回。
同步接口需要結(jié)合await使用，才是真正的同步。
分包包大小限制包超過2048KB，無法上傳分包操作主包不需要特殊處理。
navigateTab導(dǎo)航的頁面必須在主包中。
分包分包在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'
] }
, ],偽動態(tài)綁定事件// index.wxml // 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) {
}
}
}
)獲取組件實(shí)例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 (

this.submitForm.bind(this)}
> {
fieldMetas.map((meta, idx) => {
return ( this.refFormItem}
onValidate={
this.gatherValidate.bind(this)}
taroKey={
meta.name}
metas={
meta}
initialValue={
this.findValue.call(this, meta.name)}
> ) }
) }
按鈕 this.clearValidate}
>按鈕

) }
styleIsolation: "apply-shared"對于options.styleIsolation = "apply-shared"的應(yīng)用：
如果是組件包裹組件，內(nèi)部組件設(shè)置該配置，外部組件的樣式依舊無法影響內(nèi)部組件，Page()或Component()注冊的頁面級的樣式才能影響到組件內(nèi)部樣式。
推薦教程：
《微信小程序》以上就是微信小程序開發(fā)初次體驗(yàn)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
微信小程序 taro本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序怎么注銷？
下一篇：
微信小程序常見的開發(fā)問題匯總相關(guān)文章相關(guān)視頻怎么退出微信小程序的登錄？Promise實(shí)踐 實(shí)現(xiàn)微信小程序接口封裝微信小程序?qū)崟r監(jiān)聽less文件編譯成wxss文件，...微信小程序跳一跳在哪里找？微信小程序開發(fā)初次體驗(yàn)深入了解微信小程序(二)深入了解微信小程序(三)深入了解微信小程序(四) [溫州做小程序]