this.selectComponent('.classSelector')
Vant Weapp は Taro に導入されており、サードパーティの NPM パッケージから直接呼び出すことはできません。 次の手順を実行する必要があります:
/src/components/vant-weapp ディレクトリに移動します。 Pages 対応ファイルの app.js では実行できません。) config = {
navigationBarTitleText: '首页',
usingComponents: {
"van-button": "../../components/vant-weapp/button/index",
"van-popup": "../../components/vant-weapp/popup/index"
}
}dist/components に自動的に コピーされ、Vant-weapp のコンポーネントも依存します。ツール ライブラリ/src/components/vant-weapp/wxs、ツール ライブラリ tarodist にコピーされません。したがって、対応する dist に自動的にコピーされるように、/config/index.js ファイル内の config.copy.patterns を変更する必要があります。コンパイル中にディレクトリがダウンします。 copy: {
patterns: [
{
from: 'src/components/vant-weapp/wxs/',
to: 'dist/components/vant-weapp/wxs/'
}
],
options: {
}
},Vant-weapp のスタイルで使用されるユニットは を使用して各デバイスを調整します。 /config/index.js ファイル内の config.weapp.module.pxtransform.selectorBlackList を変更することで、単位変換を防ぐことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">pxtransform: {
enable: true,
config: {
},
selectorBlackList: [
/^.van-.*?$/, // 这里是vant-weapp中className的匹配模式
]
},</pre><div class="contentsignin">ログイン後にコピー</div></div>ec-canvasdist/これをローカルにダウンロードし、何も変更せずに、指定された場所に置きます。このリソースは
copy: {
patterns: [
...
{
from: 'src/assets/fonts/',
to: 'dist/assets/fonts/'
},
...
],
options: {
}
}エントリ ファイルで、
import './assets/fonts/iconfont.css' を実行します。 #カスタムコンポーネント
パラメータを外部に渡すコンポーネント
this.triggerEvent(
'eventType',
{
key: value, //这里定义的键值对，在父组件中，通过args.detail.key获取；
},
{
bubbles: true, //事件属性:是否冒泡；
capturePhase: true, //事件属性： 是否可捕获；
}
)slot で渡される構造体のスタイルは、コンポーネントが呼び出される場所でのみ定義できます。
#開発上の障害#Taro
componentDidShow<span style="font-size: 14px;">: </span><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
this.$scope.getTabBar().setData({
selected: 1
})
}</pre><div class="contentsignin">ログイン後にコピー</div></div> のライフサイクル内にある必要があります。それは this.$scope.getTabBarCanvas によって引き起こされるレイヤー カバレッジの問題
canvas はクライアントによって作成されたネイティブ コンポーネントであり、ネイティブのレベルコンポーネントは最上位であるため、z-index がどのように設定されていても、ページ内の他のコンポーネントをネイティブ コンポーネントの上に配置することはできません。
はマスクの上層になります。構造のレイヤーを解決策:
canvas の外側にラップし、条件 (マスク スイッチ) を通じて canvas コンテナを設定します。 ##hidden 属性。
cover-image カスタム コンポーネント、cover-view を通じて、レベルの配置とアップグレードを通じて、次のことができます。 canvas でカバーされています。 後で挿入されたネイティブ コンポーネントは前のネイティブ コンポーネントをカバーできるため、次の点に注意してください: 構造的に、cover-view は canvas 内に存在する必要があります。 by ; は、
ステートメントでは、typeofwxs でのみ使用できます。 データ初期化代入データがいつ初期化されるのかわかりませんが、dataを初期化する際に、this#は使用できません。 ## 現在のコンポーネント インスタンスを指します (これは this === void 0)。つまり、data
data の初期化に properties または methods が必要な場合、 ## ライフサイクル attached# でのみ渡すことができます。 this.setDatadata の値を更新します。
而且，如果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()注册的页面级的样式才能影响到组件内部样式。
推荐教程：《微信小程序》
以上がWeChat ミニプログラム開発の初体験の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
