這篇文章主要介紹微信小程序中初次開發的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
this.selectComponent('.classSelector')
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是ECharts的微信小程序版本。
下載到本地，什么都不要改，放到指定位置。
該資源不會自動拷貝到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, //事件屬性： 是否可捕獲；
}
)用法同Vue。注意：組件內部對slot定義的樣式，不起作用。只能在調用組件的位置，對傳入slot內的結構進行樣式定義。
Taro中自定義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是由客戶端創建的原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設置z-index為多少，都無法蓋在原生組件上。
所以，如果canvas和遮罩交互同時存在時，canvas會在遮罩的上層。
解決方案：
在canvas外包裹一層結構，通過條件(遮罩的開關)來設置canvas容器的hidden屬性。
通過cover-view、cover-image自定義組件，cover-view通過定位，提升層級，可以防止被canvas覆蓋。
因為后插入的原生組件可以覆蓋之前的原生組件，所以，要注意：結構上，cover-view一定要在canvas后邊；
可以通過flex和order來調整展示順序。
只有最外層cover-view才支持position: fixed。
typeofwx:if語句中，不能使用typeof運算符，{{}}中不能使用typeof運算符，只能在wxs中使用。
不知道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)。
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形式綁定事件就可以了。
Taro編譯器無法自動將用到組件的.wxs文件移動到/dist相應目錄下手動移動。
微信開發者工具中運行Taro代碼，如果有async/await，則regenerator is not defined。將微信開發者工具--> 右上角詳情--> 本地設置里的配置全部關掉，如ES6轉ES5...。
echarts.js不需要再次編譯，配置中新增編譯時忽略echarts.js。
weapp: {
...
compile: {
exclude: ['src/echarts-for-weixin/ec-canvas/echarts.js']
}
}可以在(dispatch, getState) => {中使用。
將"本地設置"--> "上傳時進行代碼保護"取消勾選。
Taro中className=''單引號賦值不起作用。className的值使用雙引號包裹。
Taro自定義組件內部使用iconfont，不顯示圖標參照外部樣式類、全局樣式類。
或者，組件單獨引入iconfont.css也可以。
this.$router.params
iconfont字符串渲染如果將字體做變量使用，通用情況下無法正常顯示。
需要將icon: ['', '']改寫成icon: ['\ue61e', '\ue62d']。
<rich-text nodes={}></rich-text>
如使用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>
)
}對于options.styleIsolation = "apply-shared"的應用：
如果是組件包裹組件，內部組件設置該配置，外部組件的樣式依舊無法影響內部組件，Page()或Component()注冊的頁面級的樣式才能影響到組件內部樣式。
以上是“微信小程序中初次開發的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
