taro3-vant-sample

1、背景

Taro 和 Vant 都是非常优秀的框架，如果能配合使用，对于小程序开发者来说是一件很愉快的事情。

但令人沮丧的是，两者毕竟是由两个京东、有赞两个团队开发的，配合使用多多少少会碰到坑。

有些坑很浅，很快就能爬出来

有些坑很深，要花很长时间才能爬出来，甚至爬不出来

影响了开发体验，为了减少团队在这方面浪费的时间，我计划把 Vant 的 50 多个组件，全部在 Taro 中用了一遍

并把过程中碰到的问题，都整理并记录下来，归纳到一个辅助小程序里面，以后通过使用该小程序就可以避免踩坑。

2、使用方法

项目由两部分组成，一是模板项目，二是编码助手

模板项目

一个可直接运行的项目

项目地址：https://gitee.com/dripping-through/taro3-vant-dva.git

/doc/image/gitee.png

编码助手

doc/image/taro3+vant.jpg

一个小程序，提供 Vant 各个组件的预览，以及相关的示例代码。

提示：相关的示例代码，可以拷贝到系统剪切板，然后粘贴到代码中，提高了编码效率。

建议在电脑上打开小程序，作为一个编码助手工具使用。

3、项目介绍

本项目在 Taro 官方提供的 taro3-vant-sample 基础上，增加了下面的功能：

简化了 Vant 组件的引入

需要使用某个组件，只需要在 app.config.ts，放开相应的注释既可

usingComponents: {
  // 'van-action-sheet': '@/vant/action-sheet/index',
  // 'van-area': '@/vant/area/index',
  'van-button': '@/vant/button/index',
  // 'van-calendar': '@/vant/calendar/index',

增加了 Dva 做数据管理

由于 Dva 没有 Typescript 版本，所以我自己写了一个简易版本的 Dva

使用时，参考计数器既可

// 定义reducer
// reducers/counter.ts
import { Model } from './data'

const model: Model = {
  namespace: 'counter',
  state: { num: 0 },
  actions: {
    add: (state) => ({
      ...state,
      num: state.num + 1,
    }),
    minus: (state) => ({
      ...state,
      num: state.num - 1,
    }),
  },
}

export default model

// 在组建中使用
import { Model } from './data'

const model: Model = {
  namespace: 'counter',
  state: { num: 0 },
  actions: {
    add: (state) => ({
      ...state,
      num: state.num + 1,
    }),
    minus: (state) => ({
      ...state,
      num: state.num - 1,
    }),
  },
}

export default model

增加了数据的持久化处理

// 在store/index.ts中，把需要进行持久化的模块添加进去既可
// 比如下面的user、counter都会进行持久化
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user', 'counter'],
}

滴水穿石 / taro3-vant-dva

taro3-vant-sample

1、背景

2、使用方法

3、项目介绍

简介

发行版

贡献者

近期动态

滴水穿石 / taro3-vant-dva .gitee-modal { width: 500px !important; }

taro3-vant-sample

1、背景

2、使用方法

3、项目介绍

简介

发行版

贡献者

近期动态

搜索帮助

滴水穿石 / taro3-vant-dva