### [微信小程序开发初次体验](https://www.prosaas.cn/article/16607)

**Published:** 2020-06-20T02:18:33

**Author:** 5201314

**Excerpt:** 组件实例 引入TaroTaro中引入Vant Weapp，不能直接通过第三方 包的形式直接调用。需要进行以下几…

## 组件实例

`this.selectComponent('.classSelector')`

## 引入

### Taro

**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` 的微信小程序版本。

### 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`。

**注意**：组件内部对`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引起的层级覆盖问题

> `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`形式绑定事件就可以了。

### `Taro`编译器无法自动将用到组件的`.wxs`文件移动到`/dist`相应目录下

手动移动。

### 在`微信开发者工具`中运行`Taro`代码，如果有`async/await`，则regenerator is not defined。

将`微信开发者工具`\--> 右上角`详情`\--> `本地设置`里的配置全部关掉，如`ES6转ES5`...。

### 定制echarts，引入报错

`echarts.js`不需要再次编译，配置中新增编译时忽略`echarts.js`。

weapp: {
    ...
    compile: {
      exclude: \['src/echarts-for-weixin/ec-canvas/echarts.js'\]
    }
}

### getState()获取Store存储的数据

可以在`(dispatch, getState) => {`中使用。

### 真机调试正常，预览/体验版空白（只有tabbar）

将"本地设置"--> "上传时进行代码保护"取消勾选。

### `Taro`中`className=''`单引号赋值不起作用。

`className`的值使用双引号包裹。

### `Taro`自定义组件内部使用`iconfont`，不显示图标

参照外部样式类、全局样式类。  
或者，组件单独引入`iconfont.css`也可以。

### 获取路由参数

`this.$router.params`

### `iconfont`字符串渲染

如果将字体做变量使用，通用情况下无法正常显示。

-   需要将`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()注册的**页面级的样式才能影响到组件内部样式**。

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

以上就是微信小程序开发初次体验的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** canvas, class, copy, css, echarts, es6, flex, github, if, JS

**Categories:** 后端开发

---