Erste Erfahrung in der Entwicklung von WeChat-Miniprogrammen

Komponenteninstanz

this.selectComponent('.classSelector')

Einführung

<span style="font-size: 14px;">Taro</span>

Vant Weapp wird in Taro eingeführt und kann nicht direkt über NPM-Pakete von Drittanbietern aufgerufen werden.

Sie müssen die folgenden Schritte ausführen:

• Suchen Sie das Vant-weapp-Download-Dateipaket auf Github und kopieren Sie das entsprechende dist-Verzeichnis in das Projekt /src/components/vant-weapp Verzeichnis.
• Konfigurieren Sie in Pages der entsprechenden Datei die für jede Seite erforderlichen Komponenten. (Die sogenannte globale Registrierung von Komponenten kann in config.usingComponents nicht durchgeführt werden.) app.js

  config = {
    navigationBarTitleText: '首页',
    usingComponents: {
      "van-button": "../../components/vant-weapp/button/index",
      "van-popup": "../../components/vant-weapp/popup/index"
    }
  }

Nach Verwendung der
• -Komponente wird der Vant-weapp Build taro automatisch entsprechend Kopieren Sie eine Kopie der Komponenten nach , und die Komponenten von dist/components hängen auch von der Werkzeugbibliothek Vant-weapp ab, und die Werkzeugbibliothek /src/components/vant-weapp/wxstaro wird nicht automatisch kopiert . Daher müssen wir dist in der Datei /config/index.js ändern, damit es beim Kompilieren automatisch in das entsprechende Verzeichnis von config.copy.patterns kopiert wird. dist

  copy: {
    patterns: [
      {
        from: 'src/components/vant-weapp/wxs/',
        to: 'dist/components/vant-weapp/wxs/'
      }
    ],
    options: {
    }
  },

Da die im Stil von
• verwendete Einheit Vant-weapp ist, wird sie von px in taro kompiliert, um sie an jedes Gerät anzupassen. Sie können das rpx in der /config/index.js-Datei ändern, um die Einheitenumrechnung zu verhindern. config.weapp.module.pxtransform.selectorBlackList

pxtransform: {
  enable: true,
  config: {

  },
  selectorBlackList: [
    /^.van-.*?$/,  // 这里是vant-weapp中className的匹配模式
  ]
},

ec-canvas

ist die WeChat-Applet-Version von ec-canvas. ECharts

iconfont

Lokal herunterladen, nichts ändern, am angegebenen Ort ablegen.

Diese Ressource wird nicht automatisch in den Ordner

kopiert, daher muss sie durch Ändern der Konfigurationsdatei kopiert werden. dist/

  copy: {
    patterns: [
      ...
      {
        from: 'src/assets/fonts/',
        to: 'dist/assets/fonts/'
      },
      ...
    ],
    options: {
    }
  }

Dann in der

Eintragsdatei app.js. import './assets/fonts/iconfont.css'

Benutzerdefinierte Komponente

Komponente, die Parameter ausgibt

this.triggerEvent(
  'eventType',
  {
    key: value, //这里定义的键值对，在父组件中，通过args.detail.key获取；
  },
  {
    bubbles: true, //事件属性:是否冒泡；
    capturePhase: true, //事件属性： 是否可捕获；
  }
)

Slot

wird genauso verwendet wie

. Vue

Hinweis : Die in der Komponente für definierten Stile funktionieren nicht. Der Stil der in slot übergebenen Struktur kann nur an der Stelle definiert werden, an der die Komponente aufgerufen wird. slot

Entwicklungshindernisse

<h3>Benutzerdefinierte tabBar in Taro<code><span style="font-size: 14px;">Taro</span>

Wann Tabs wechseln (config.tabBar.custom = true in app.jsx), es muss sich im Lebenszyklus der entsprechenden Tab-Seite befinden componentDidShow:

if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
  this.$scope.getTabBar().setData({
    selected: 1
  })
}

Beachten Sie, dass es ist this.$scope.getTabBar .

Ebenenabdeckungsproblem verursacht durch Canvas

canvas ist eine vom Client erstellte native Komponente, und die Ebene der nativen Komponente ist die höchste. Daher kann die Seite unabhängig davon, wie viele andere Komponenten in z-index festgelegt sind, nicht über der nativen Komponente platziert werden.

Wenn also canvas gleichzeitig mit der Maske interagiert, befindet sich canvas oben auf der Maske.

Lösung:

• wickeln Sie eine Strukturschicht außerhalb von canvas ein und legen Sie das canvas-Attribut des hidden-Containers über Bedingungen fest (Maskenschalter).

• Durch Anpassen von Komponenten mit cover-view und cover-image kann cover-view positioniert und erhöht werden, um ein Überschreiben durch canvas zu verhindern.

  • Da die später eingefügte native Komponente die vorherige native Komponente überschreiben kann, beachten Sie bitte: strukturell muss cover-view hinter canvas stehen; Sie können die Anzeigereihenfolge über
  und
  • anpassen. flexorderNur ​​die äußerste Schicht
  • von unterstützt . Der cover-view-Operator kann nicht in der position: fixed

typeof

-Anweisung verwendet werden, und der wx:if-Operator kann nicht in . Kann nur innerhalb von typeof verwendet werden. {{}}typeofwxsDateninitialisierungszuweisung

Ich weiß nicht, wann die Daten initialisiert werden, aber beim Initialisieren von können Sie

nicht verwenden, um auf den Strom zu verweisen Komponenteninstanz (das ist

), das heißt, die data-Initialisierung kann nur eine this-Konstante this === void 0 ergeben. Wenn data oder

zum Initialisieren von

benötigt, kann der Wert von properties nur über methods im Lebenszyklus data aktualisiert werden. attached

而且，如果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={&#xe61e;}></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 == &#39;text&#39; || metas.type == &#39;number&#39; || metas.type == &#39;idcard&#39; || metas.type == &#39;digit&#39;}}"
    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()注册的页面级的样式才能影响到组件内部样式。

推荐教程：《微信小程序》

Das obige ist der detaillierte Inhalt vonErste Erfahrung in der Entwicklung von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!