这篇文章上次修改于 1510 天前,可能其部分内容已经发生变化,如有疑问可询问作者。 taro [京东的一个微信小程序框架](https://taro.aotu.io/ "京东的一个微信小程序框架") 有自己的一套[ui框架](https://taro-ui.jd.com/#/ "ui框架"),但是有时候感觉[vant](https://youzan.github.io/vant-weapp/#/intro "vant")的组件比较好用,应该怎么用呢? 1, 我是在[vant,git](https://github.com/youzan/vant-weapp "vant,git") clone下来后,放到components 里面 ******重要问题 需要在config/index.js里面添加 ```javascript copy: { patterns: [ { from: 'src/components/vant-weapp/', to: 'dist/components/vant-weapp/' // , // ignore: '*.js' }, // 指定需要 copy 的目录 { from: 'src/components/towxml/', to: 'dist/components/towxml/' // , // ignore: '*.js' }, ], options: {} }, ``` 打包到指定文件夹 vant的话 还要在下面mini里面添加 ```javascript mini: { postcss: { autoprefixer: { enable: true, config: { browsers: [ 'last 3 versions', 'Android >= 4.1', 'ios >= 8' ] }, selectorBlackList: [ /^.van-.*?$/, // 这里是vant-weapp中className的匹配模式 ] }, pxtransform: { enable: true, config: {} }, url: { enable: true, config: { limit: 10240 // 设定转换尺寸上限 } }, cssModules: { enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true config: { namingPattern: 'module', // 转换模式,取值为 global/module generateScopedName: '[name]__[local]___[hash:base64:5]' } } } }, ``` 2,在哪个页面用到单独写小程序的‘usingComponents’ ```javascript /** * 指定config的类型声明为: Taro.Config * * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型 * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型 */ cat1:any = Taro.createRef() cat2:any = Taro.createRef() config: Config = { navigationBarTitleText: '搜索', navigationBarBackgroundColor: '#FF839B', navigationBarTextStyle: "white", usingComponents: { 'van-popup': '../../components/vant-weapp/popup/index', 'van-dropdown-item': '../../components/vant-weapp/dropdown-item/index', 'van-dropdown-menu': '../../components/vant-weapp/dropdown-menu/index' }, } state = { value: '', current: 0, showSelect: false, // 列表展示模式 oddList: false, searchList: [], selectTerm: {}, shopType: '', sortType: '', businessCircleId: '', pageNum: 0 } ``` 然后直接使用就ok ```html Taro.navigateTo({ url: `/pages/searchList/searchList` })} > console.log(value)} disabled /> {/*分类搜索*/} this.setState({ showSelect: true })} > ``` 但是typescript 报错,红色, 我是在 global里面添加的 ```javascript declare module "*.sass"; declare module "*.styl"; declare namespace JSX { interface IntrinsicElements { 'import': React.DetailedHTMLProps, HTMLEmbedElement>, 'van-popup': any, 'van-dropdown-menu': any, 'van-dropdown-item': any, 'template': any, 'van-grid': any, 'van-grid-item': any, 'towxml': any, } } // @ts-ignore declare const process: { env: { TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt'; [key: string]: any; } } ``` 3,遇到富文本,用了一个组件,但是图片有的宽度100% 还是比较大,然后用 小程序自带的 rich-text 依然如此,决定放弃的时候,发现了网友们使用的[towxml](https://github.com/sbfkcel/towxml "towxml") 3.0版本,需要clone后,自己根据需求,重新打包 打包后复制到components下面和vant一样,在config/index.js里面的copy上面添加(同上) 使用前我是在app.js里面注册了一下 ```javascript import towxml from './components/towxml/index' ``` ```javascript componentDidCatchError() { } towxml = towxml // 在 App 类中的 render() 函数没有实际作用 ``` 使用和vant一样,如果不全局设置,在使用时设置theme和base ```javascript const app = Taro.getApp() data.buyNotice && (data.buyNotice = app.towxml(data.buyNotice,'html',{ base: base_url + '/', // 相对资源的base路径 })) ```
只有一条评论 (QwQ)