乐趣区

微信小程序开发初试TaroVantweapp

jiezi

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

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。

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 内的结构进行样式定义。

注意事项

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)。

canvas 层级最高

参见上述引入 ec-canvas 部分。

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 识别，事件无法触发。

解决方案：

  • @tarojs/cli低版本，对 vant-tree-select 进行二次封装，事件原始触发通过 this.$triggerEvent 传出驼峰式的事件类型，在 Taro 中调用。
  • 升级 @tarojs/cli 的版本，如 1.2.0 版本无法触发驼峰式命名的事件，升级到最新版 1.3.15，使用onClick-nav 形式绑定事件就可以了。

目前 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 相应目录下

修改 /config/index.js 文件中的 config.copy.patterns，让其在编译时，自动复制到dist 对应目录下。

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

在 微信开发者工具 中运行 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的值使用双引号包裹。

退出移动版