diff --git a/README.md b/README.md
index f3bdece..7f863a5 100644
--- a/README.md
+++ b/README.md
@@ -1,154 +1,168 @@
-# 阿里图标库 iconfont 使用 Symbol 我们使用了 mini-program-iconfont-cli 这个库
+# 阿里图标库 iconfont 使用 Symbol 我们使用了 taro-iconfont-cli 这个库
用法如下：
+# 支持平台
+
+* 微信小程序
+* 支付宝小程序
+* 百度小程序
+* 头条小程序
+* QQ小程序
+* H5
+
+# 特性
+1、一键生成标准组件，多端支持
+
+2、使用方便，import即可
+
+3、支持多色彩
+
+4、支持自定义颜色
+
+5、支持es6和typescript两种模式
+
# Step 1
安装插件
+
+**如果您使用Taro2.x，请安装 `taro-iconfont-cli@2.1.0`，并阅读旧版的[README.md](https://github.com/iconfont-cli/taro-iconfont-cli/blob/v2.1.0/README.md)**
+
```bash
# Yarn
-yarn add mini-program-iconfont-cli --dev
+yarn add taro-iconfont-cli --dev
# Npm
-npm install mini-program-iconfont-cli --save-dev
+npm install taro-iconfont-cli --save-dev
```
+
# Step 2
生成配置文件
```bash
npx iconfont-init
-# 可传入配置文件输出路径
+# 可传入配置输出路径
# npx iconfont-init --output iconfont.json
```
-
此时项目根目录会生成一个`iconfont.json`的文件，内容如下：
```json
{
"symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接",
- "save_dir": "./iconfont",
- "use_rpx": false,
+ "save_dir": "./src/components/iconfont",
+ "use_typescript": false,
+ "platforms": "*",
+ "use_rpx": true,
"trim_icon_prefix": "icon",
- "default_icon_size": 18
+ "default_icon_size": 18,
+ "design_width": 750
}
```
-
### 配置参数说明：
-#### symbol_url
-请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是`.css`后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js`。
+### symbol_url
+请直接复制[iconfont](http://iconfont.cn)官网提供的项目链接。请务必看清是`.js`后缀而不是.css后缀。如果你现在还没有创建iconfont的仓库，那么可以填入这个链接去测试：`http://at.alicdn.com/t/font_1373348_kk9y3jk2omq.js`
+
+
-#### save_dir
+### save_dir
根据iconfont图标生成的组件存放的位置。每次生成组件之前，该文件夹都会被清空。
-#### use_rpx
-使用微信提供的[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为false，即使用`px`。
+### use_typescript
+如果您的项目使用Typescript编写，请设置为true。这个选项将决定生成的图标组件是`.tsx`还是`.js`后缀。
-#### trim_icon_prefix
-如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过配置这个选项把前缀统一去掉。
+当该值为false时，我们会为您的图标生成`.js`和`.d.ts`两个文件，以便您能享受到最好的开发体验。
-#### default_icon_size
+### platforms
+选择需要支持的平台，默认是`*`，意味着所有平台都需要支持（如果有）。如果你只想支持部分平台，也可以设置成数组：
+```json5
+{
+ // 选择你需要的平台
+ // 说明 => weapp: 微信 | swan: 百度 | alipay: 支付宝 | tt: 字节跳动
+ "platforms": ["weapp", "swan", "alipay", "h5", "tt", "qq"]
+}
+```
+
+### use_rpx
+是否使用[尺寸单位rpx](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)还是普通的像素单位`px`。默认值为true，与Taro保持一致的缩放。您也可以设置为false，强制使用`px`
+
+### design_width
+若 `use_rpx: true` 且当前设计图尺寸不为 750 时，可以通过修改这个字段来修改设计尺寸。
+
+### trim_icon_prefix
+如果你的图标有通用的前缀，而你在使用的时候又不想重复去写，那么可以通过这种配置这个选项把前缀统一去掉。
+
+### default_icon_size
我们将为每个生成的图标组件加入默认的字体大小，当然，你也可以通过传入props的方式改变这个size值。
+
# Step 3
-生成小程序标准组件
+开始生成Taro标准组件
```bash
+npx iconfont-taro
+
# 可传入配置文件路径
-# npx iconfont-XXXXX --config iconfont.json
-
-# 微信小程序
-npx iconfont-wechat
-
-# 支付宝小程序
-npx iconfont-alipay
-
-# 百度小程序
-npx iconfont-baidu
-
-# 头条小程序
-npx iconfont-toutiao
-
-# 快手小程序
-npx iconfont-kuaishou
-
-# QQ小程序
-npx iconfont-qq
+# npx iconfont-taro --config iconfont.json
```
生成后查看您设置的保存目录中是否含有所有的图标
-------
-在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/mini-program-iconfont-cli/tree/master/snapshots)自动生成的快照文件。
+在生成代码之前，你可以顺便参考[snapshots目录](https://github.com/iconfont-cli/taro-iconfont-cli/tree/master/snapshots)自动生成的快照文件。
# Step 4
-#### 微信小程序 | QQ小程序
-在根目录的`app.json`文件中引入全局图标组件，避免每个page都引入（麻烦）。
-```json5
-// 绝对路径
-{
- "usingComponents": {
- "iconfont": "/iconfont/iconfont"
- }
+由于Taro3.0的架构变更，您需要在`src/app.config.js`下填写一次`usingComponents`。
+```typescript
+// src/app.config.js
+import { useGlobalIconFont } from './components/iconfont/helper';
+
+export default {
+ usingComponents: Object.assign(useGlobalIconFont()),
}
```
-#### 支付宝小程序 | 百度小程序 | 头条小程序 ｜ 快手小程序
-不支持全局引入，您需要在各自page的`.json`文件中引入。
-```json5
-// 绝对路径
-{
- "usingComponents": {
- "iconfont": "/iconfont/iconfont"
- }
-}
-```
+这并不是一个多好的方案，毕竟还需要开发者关注这个细节。也许能用webpack的plugin解决或者等官方推出更好的方案，有任何更好的idea欢迎提供。
# 使用
-在page中使用图标。
+在Page中使用图标
+```jsx harmony
+import React, { Component } from 'react';
+import IconFont from '../components/iconfont';
+
+class App extends Component {
+ render() {
+ return ;
+ }
+}
+
+export default App;
+```
+更多用法：
```jsx harmony
// 原色彩
-
+
// 单色：红色
-
+
// 多色：红色+橘色
-
+
// 不同格式的颜色写法
-
+
+
// 与文字对齐
-
- Hello
-
-
+
+ Hello
+
+
```
# 更新图标
-当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件。
+当您在iconfont.cn中的图标有变更时，只需更改配置`symbol_url`，然后再次执行`Step 3`即可生成最新的图标组件
```bash
# 修改 symbol_url 配置后执行：
-
-# 微信小程序
-npx iconfont-wechat
-
-# 支付宝小程序
-npx iconfont-alipay
-
-# 百度小程序
-npx iconfont-baidu
-
-# 头条小程序
-npx iconfont-toutiao
-
-# 快手小程序
-npx iconfont-kuaishou
-
-# QQ小程序
-npx iconfont-qq
+npx iconfont-taro
```
---------
-
-欢迎使用，并给我一些反馈和建议，让这个库做的更好。
diff --git a/iconfont.json b/iconfont.json
index fc9a1c0..86cb06b 100644
--- a/iconfont.json
+++ b/iconfont.json
@@ -4,7 +4,7 @@
"use_typescript": false,
"platforms": "*",
"use_rpx": true,
- "trim_icon_prefix": "icon",
+ "trim_icon_prefix": "",
"default_icon_size": 18,
"design_width": 750
}
diff --git a/src/app.scss b/src/app.scss
index 3e7323b..2ff25c6 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -10,5 +10,6 @@
page {
height: 100%;
+ background-color: #f7f7f7;
}
diff --git a/src/components/iconfont/alipay/alipay.axml b/src/components/iconfont/alipay/alipay.axml
index 1e3e325..b684879 100644
--- a/src/components/iconfont/alipay/alipay.axml
+++ b/src/components/iconfont/alipay/alipay.axml
@@ -1,77 +1,77 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/components/iconfont/alipay/alipay.js b/src/components/iconfont/alipay/alipay.js
index 03d7167..ba7a316 100644
--- a/src/components/iconfont/alipay/alipay.js
+++ b/src/components/iconfont/alipay/alipay.js
@@ -1,6 +1,6 @@
Component({
props: {
- // wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
+ // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
name: null,
// string | string[]
color: '',
diff --git a/src/components/iconfont/h5/index.js b/src/components/iconfont/h5/index.js
index e252820..52377bf 100644
--- a/src/components/iconfont/h5/index.js
+++ b/src/components/iconfont/h5/index.js
@@ -56,57 +56,57 @@ export { default as IconGouwu } from './IconGouwu';
const IconFont = ({ name, ...rest }) => {
switch (name) {
- case 'wodekefu':
+ case 'icon-wodekefu':
return ;
- case 'dizhi':
+ case 'icon-dizhi':
return ;
- case 'shouhouzhongxin':
+ case 'icon-shouhouzhongxin':
return ;
- case 'wodeshoucang':
+ case 'icon-wodeshoucang':
return ;
- case 'shoukuanliebiao':
+ case 'icon-shoukuanliebiao':
return ;
- case 'madanguanli':
+ case 'icon-madanguanli':
return ;
- case 'qusechazhao':
+ case 'icon-qusechazhao':
return ;
- case 'pandiansaoma':
+ case 'icon-pandiansaoma':
return ;
- case 'yaoqingma':
+ case 'icon-yaoqingma':
return ;
- case 'duizhang':
+ case 'icon-duizhang':
return ;
- case 'tihuoliebiao':
+ case 'icon-tihuoliebiao':
return ;
- case 'yangpinduibi':
+ case 'icon-yangpinduibi':
return ;
- case 'yansequyang':
+ case 'icon-yansequyang':
return ;
- case 'fahuoliebiao':
+ case 'icon-fahuoliebiao':
return ;
- case 'yuncangkucun':
+ case 'icon-yuncangkucun':
return ;
- case 'xiaoshou':
+ case 'icon-xiaoshou':
return ;
- case 'qianzhicangkucun':
+ case 'icon-qianzhicangkucun':
return ;
- case 'lingquseka':
+ case 'icon-lingquseka':
return ;
- case 'gouwu1':
+ case 'icon-gouwu1':
return ;
- case 'dingdan1':
+ case 'icon-dingdan1':
return ;
- case 'gerenzhongxin1':
+ case 'icon-gerenzhongxin1':
return ;
- case 'shouye1':
+ case 'icon-shouye1':
return ;
- case 'gerenzhongxin':
+ case 'icon-gerenzhongxin':
return ;
- case 'dingdan':
+ case 'icon-dingdan':
return ;
- case 'shouye':
+ case 'icon-shouye':
return ;
- case 'gouwu':
+ case 'icon-gouwu':
return ;
}
diff --git a/src/components/iconfont/index.d.ts b/src/components/iconfont/index.d.ts
index f128c62..ff53197 100644
--- a/src/components/iconfont/index.d.ts
+++ b/src/components/iconfont/index.d.ts
@@ -2,7 +2,7 @@
import React, { FunctionComponent } from 'react';
interface Props {
- name: 'wodekefu' | 'dizhi' | 'shouhouzhongxin' | 'wodeshoucang' | 'shoukuanliebiao' | 'madanguanli' | 'qusechazhao' | 'pandiansaoma' | 'yaoqingma' | 'duizhang' | 'tihuoliebiao' | 'yangpinduibi' | 'yansequyang' | 'fahuoliebiao' | 'yuncangkucun' | 'xiaoshou' | 'qianzhicangkucun' | 'lingquseka' | 'gouwu1' | 'dingdan1' | 'gerenzhongxin1' | 'shouye1' | 'gerenzhongxin' | 'dingdan' | 'shouye' | 'gouwu';
+ name: 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
size?: number;
color?: string | string[];
style?: React.CSSProperties;
diff --git a/src/components/iconfont/qq/qq.js b/src/components/iconfont/qq/qq.js
index 106e505..e614032 100644
--- a/src/components/iconfont/qq/qq.js
+++ b/src/components/iconfont/qq/qq.js
@@ -1,6 +1,6 @@
Component({
properties: {
- // wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
+ // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
name: {
type: String,
},
diff --git a/src/components/iconfont/qq/qq.qml b/src/components/iconfont/qq/qq.qml
index e5ce604..4931e1e 100644
--- a/src/components/iconfont/qq/qq.qml
+++ b/src/components/iconfont/qq/qq.qml
@@ -1,77 +1,77 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/components/iconfont/rn/index.js b/src/components/iconfont/rn/index.js
index cde4094..393fff9 100644
--- a/src/components/iconfont/rn/index.js
+++ b/src/components/iconfont/rn/index.js
@@ -57,57 +57,57 @@ export { default as IconGouwu } from './IconGouwu';
let IconFont = ({ name, ...rest }) => {
switch (name) {
- case 'wodekefu':
+ case 'icon-wodekefu':
return ;
- case 'dizhi':
+ case 'icon-dizhi':
return ;
- case 'shouhouzhongxin':
+ case 'icon-shouhouzhongxin':
return ;
- case 'wodeshoucang':
+ case 'icon-wodeshoucang':
return ;
- case 'shoukuanliebiao':
+ case 'icon-shoukuanliebiao':
return ;
- case 'madanguanli':
+ case 'icon-madanguanli':
return ;
- case 'qusechazhao':
+ case 'icon-qusechazhao':
return ;
- case 'pandiansaoma':
+ case 'icon-pandiansaoma':
return ;
- case 'yaoqingma':
+ case 'icon-yaoqingma':
return ;
- case 'duizhang':
+ case 'icon-duizhang':
return ;
- case 'tihuoliebiao':
+ case 'icon-tihuoliebiao':
return ;
- case 'yangpinduibi':
+ case 'icon-yangpinduibi':
return ;
- case 'yansequyang':
+ case 'icon-yansequyang':
return ;
- case 'fahuoliebiao':
+ case 'icon-fahuoliebiao':
return ;
- case 'yuncangkucun':
+ case 'icon-yuncangkucun':
return ;
- case 'xiaoshou':
+ case 'icon-xiaoshou':
return ;
- case 'qianzhicangkucun':
+ case 'icon-qianzhicangkucun':
return ;
- case 'lingquseka':
+ case 'icon-lingquseka':
return ;
- case 'gouwu1':
+ case 'icon-gouwu1':
return ;
- case 'dingdan1':
+ case 'icon-dingdan1':
return ;
- case 'gerenzhongxin1':
+ case 'icon-gerenzhongxin1':
return ;
- case 'shouye1':
+ case 'icon-shouye1':
return ;
- case 'gerenzhongxin':
+ case 'icon-gerenzhongxin':
return ;
- case 'dingdan':
+ case 'icon-dingdan':
return ;
- case 'shouye':
+ case 'icon-shouye':
return ;
- case 'gouwu':
+ case 'icon-gouwu':
return ;
}
diff --git a/src/components/iconfont/swan/swan.js b/src/components/iconfont/swan/swan.js
index a4ef6af..75a01f1 100644
--- a/src/components/iconfont/swan/swan.js
+++ b/src/components/iconfont/swan/swan.js
@@ -1,6 +1,6 @@
Component({
properties: {
- // wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
+ // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
name: {
type: String,
},
diff --git a/src/components/iconfont/swan/swan.swan b/src/components/iconfont/swan/swan.swan
index 03cd6df..02f4681 100644
--- a/src/components/iconfont/swan/swan.swan
+++ b/src/components/iconfont/swan/swan.swan
@@ -1,77 +1,77 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/components/iconfont/tt/tt.js b/src/components/iconfont/tt/tt.js
index 0c7dfb1..29fea52 100644
--- a/src/components/iconfont/tt/tt.js
+++ b/src/components/iconfont/tt/tt.js
@@ -1,6 +1,6 @@
Component({
properties: {
- // wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
+ // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
name: {
type: String,
},
diff --git a/src/components/iconfont/tt/tt.ttml b/src/components/iconfont/tt/tt.ttml
index 03e4c24..ff0d6cf 100644
--- a/src/components/iconfont/tt/tt.ttml
+++ b/src/components/iconfont/tt/tt.ttml
@@ -1,77 +1,77 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/components/iconfont/weapp/weapp.js b/src/components/iconfont/weapp/weapp.js
index 89c17f5..54b2aaf 100644
--- a/src/components/iconfont/weapp/weapp.js
+++ b/src/components/iconfont/weapp/weapp.js
@@ -1,6 +1,6 @@
Component({
properties: {
- // wodekefu | dizhi | shouhouzhongxin | wodeshoucang | shoukuanliebiao | madanguanli | qusechazhao | pandiansaoma | yaoqingma | duizhang | tihuoliebiao | yangpinduibi | yansequyang | fahuoliebiao | yuncangkucun | xiaoshou | qianzhicangkucun | lingquseka | gouwu1 | dingdan1 | gerenzhongxin1 | shouye1 | gerenzhongxin | dingdan | shouye | gouwu
+ // icon-wodekefu | icon-dizhi | icon-shouhouzhongxin | icon-wodeshoucang | icon-shoukuanliebiao | icon-madanguanli | icon-qusechazhao | icon-pandiansaoma | icon-yaoqingma | icon-duizhang | icon-tihuoliebiao | icon-yangpinduibi | icon-yansequyang | icon-fahuoliebiao | icon-yuncangkucun | icon-xiaoshou | icon-qianzhicangkucun | icon-lingquseka | icon-gouwu1 | icon-dingdan1 | icon-gerenzhongxin1 | icon-shouye1 | icon-gerenzhongxin | icon-dingdan | icon-shouye | icon-gouwu
name: {
type: String,
},
diff --git a/src/components/iconfont/weapp/weapp.wxml b/src/components/iconfont/weapp/weapp.wxml
index 18c9e0b..9d62d6c 100644
--- a/src/components/iconfont/weapp/weapp.wxml
+++ b/src/components/iconfont/weapp/weapp.wxml
@@ -1,77 +1,77 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/constants/common.ts b/src/constants/common.ts
index d14b9fd..2a5c78b 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,3 +1,3 @@
export const SET_SHOPCOUNT = 'set_shopCount'
export const CLEAR_SHOPCOUNT = 'clear_shopCount'
-export const STORAGE_SHOPCOUNT = 'storage_shopcount'
\ No newline at end of file
+export const STORAGE_SHOPCOUNT = 'storage_shopcount'
diff --git a/src/constants/tabbar.ts b/src/constants/tabbar.ts
new file mode 100644
index 0000000..0c30219
--- /dev/null
+++ b/src/constants/tabbar.ts
@@ -0,0 +1,3 @@
+export enum TabBarType {
+ SET_SELECTED = 'setSelected'
+}
diff --git a/src/custom-tab-bar/index.config.ts b/src/custom-tab-bar/index.config.ts
new file mode 100644
index 0000000..6d6cc11
--- /dev/null
+++ b/src/custom-tab-bar/index.config.ts
@@ -0,0 +1,3 @@
+export default {
+ component: true,
+}
diff --git a/src/custom-tab-bar/index.module.scss b/src/custom-tab-bar/index.module.scss
index 2f58e23..9a301ff 100644
--- a/src/custom-tab-bar/index.module.scss
+++ b/src/custom-tab-bar/index.module.scss
@@ -8,6 +8,8 @@
flex-flow: row nowrap;
padding-bottom: env(safe-area-inset-bottom);
background-color: #fff;
+ z-index: 9999;
+ box-shadow: 0 11px 7px 8px #c2c2c2;
&-line {
position: absolute;
left: 0;
diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx
index 0b5c8a7..59fcca1 100644
--- a/src/custom-tab-bar/index.tsx
+++ b/src/custom-tab-bar/index.tsx
@@ -1,49 +1,36 @@
import { CoverImage, View } from '@tarojs/components'
import { FC, useMemo, useState } from 'react'
import styles from './index.module.scss'
+import IconFont from '@/components/iconfont'
import classname from 'classname'
+import Taro, { useDidShow, useRouter } from '@tarojs/taro'
+import { useSelector } from '@/reducers/hooks'
+import { useDispatch } from 'react-redux'
+import { Dispatch } from 'redux'
+import { TabBarType } from '@/constants/tabbar'
+import { TabBarAction } from '@/reducers/tabBar'
+
+type IconfontName = Parameters['0']['name']
+
type TabBarIndexMap = {
[Property: number]: {
id: number
pagePath: string
text: string
- iconPath: string
- selectedIconPath: string
+ iconPath: IconfontName
+ selectedIconPath: IconfontName
}
}
const CustomTabBar: FC = () => {
- const [tabItem, setTabItem] = useState([
- {
- id: 1,
- pagePath: 'pages/index/index',
- text: '首页',
- iconPath: 'icon-shouye1',
- selectedIconPath: 'icon-shouye',
- },
- {
- id: 2,
- pagePath: 'pages/shopping/index',
- text: '购物',
- iconPath: 'icon-gouwu1',
- selectedIconPath: 'icon-gouwu',
- },
- {
- id: 3,
- pagePath: 'pages/order/index',
- text: '订单',
- iconPath: 'icon-dingdan1',
- selectedIconPath: 'icon-dingdan',
- },
- {
- id: 4,
- pagePath: 'pages/user/index',
- text: '我的',
- iconPath: 'icon-gerenzhongxin1',
- selectedIconPath: 'icon-gerenzhongxin',
- },
- ])
+ console.log('重新渲染')
+
+
+ const { selectedId, tabItem } = useSelector((state) => {
+ console.log('sdfasdfa', state)
+ return state.tabBarData
+ })
const tabBarIndexMap = useMemo(() => {
let map: TabBarIndexMap = {}
for (let i = 0; i < tabItem.length; i++) {
@@ -51,26 +38,41 @@ const CustomTabBar: FC = () => {
}
return map
}, [tabItem])
+ console.log('selectedId', selectedId)
- const [selectedId, setSelectedId] = useState(1)
+ const dispatch = useDispatch>()
- const handleSelectTabItem = () => {
- return () => {}
+ const handleSelectTabItem = (id: TabBarIndexMap[number]['id']) => {
+ return () => {
+ setSelected(id)
+ Taro.switchTab({ url: tabItem.find(item=>item.id === id)?.pagePath! })
+ }
}
+ const setSelected = (id: TabBarIndexMap[number]['id']) => {
+ dispatch({ type: TabBarType.SET_SELECTED, data: { tabItem, selectedId: id } })
+ }
+
+ // const router = useRouter()
+ // console.log('getCurrentPages==>', router)
+
+ // handleSelectTabItem(tabItem.find((item) => item.pagePath === router.path)?.id!)()
+
+ // useDidShow(() => {
+ // console.log('getCurrentPages==>', router)
+ // })
return (
{tabItem.map((item, index) => {
return (
-
-
- {item.text}
+
+
+
+ {item.text}
)
})}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 523b94b..dd843ce 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -6,7 +6,7 @@ import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shoppingCart'
import { goLink } from '@/common/common'
import styles from './index.module.scss'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { kindListApi, ProductListApi } from '@/api/index'
// import useLogin from '@/use/useLogin'
import { mpproductcolorlist, mpsaleOrderpreView } from "@/api/order"
@@ -296,4 +296,4 @@ export default () => {
//
)
}
-// oninputEvent={(e, item) => { oninputEvent(e, item) }}
\ No newline at end of file
+// oninputEvent={(e, item) => { oninputEvent(e, item) }}
diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx
index 8d378d8..459bcc3 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
import { View, ScrollView, Input, Button } from '@tarojs/components'
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react'
import { mpenumsaleorderstatus, OrderListApi } from '@/api/order'
@@ -10,6 +11,17 @@ import Popup from '@/components/popup'
import InfiniteScroll from '@/components/infiniteScroll'
import { compose } from 'redux'
import Taro, { useDidShow } from '@tarojs/taro'
+=======
+import { View } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useMemo, useState } from 'react'
+const Order = () => {
+
+
+ const [count, setCount] = useState(0)
+ return {count}
+}
+>>>>>>> d851d6d (🎈 perf(自定义tabbar): 优化自定义tabbar)
export default () => {
//页码和页数
diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx
index 2ae0ef7..2558ab4 100644
--- a/src/pages/shopping/index.tsx
+++ b/src/pages/shopping/index.tsx
@@ -1,9 +1,13 @@
import { isEmptyObject } from '@/common/common'
import { View } from '@tarojs/components'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useMemo } from 'react'
const User = () => {
const obj = {}
console.log(isEmptyObject(obj))
+
+
return sdfasdfasdf
}
export default User
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
index 6c8c64a..3efd58b 100644
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@@ -1,16 +1,13 @@
import { isEmptyObject } from '@/common/common'
import { Button, View } from '@tarojs/components'
-import { FC, memo, useState } from 'react'
-import IconFont from '../components/iconfont'
+import { FC, memo, useMemo, useState } from 'react'
import styles from './index.module.scss'
const SonComp: FC = memo(() => {
return 我改变了吗{new Date().getTime()}
})
// 用户信息
-const UserInfo:FC = () => {
- return
- sdfasdf
-
+const UserInfo: FC = () => {
+ return sdfasdf
}
// 我的
@@ -23,6 +20,15 @@ const User = () => {
return prev + 1
})
}
+
+ // const page = useMemo(() => Taro.getCurrentInstance().page, [])
+ // console.log('page', page)
+ // useDidShow(async () => {
+ // const tabbar = await Taro.getTabBar(page)
+ // console.log('tabbar==>', tabbar)
+ // tabbar?.setSelected(4)
+ // })
+
return (
<>
@@ -30,7 +36,6 @@ const User = () => {
sdfasdfasdf {count}
-
)
diff --git a/src/reducers/hooks.ts b/src/reducers/hooks.ts
index e2f3457..ccc4573 100644
--- a/src/reducers/hooks.ts
+++ b/src/reducers/hooks.ts
@@ -1,10 +1,12 @@
//该方法纯粹只是个Ts类型定义文件
import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux';
-import { DataParam } from './userInfo';
+import { DataParam as userInfoParam } from './userInfo';
import { DataParam as commonDataParam } from './commonData';
+import { TabBarData as tabbarDataParam } from './tabBar';
type Params = {
- userInfo: DataParam,
- commonData: commonDataParam
+ userInfo: userInfoParam
+ commonData: commonDataParam
+ tabBarData: tabbarDataParam
}
-export const useSelector: TypedUseSelectorHook = useReduxSelector;
\ No newline at end of file
+export const useSelector: TypedUseSelectorHook = useReduxSelector;
diff --git a/src/reducers/index.ts b/src/reducers/index.ts
index 1b859e6..f5294cc 100644
--- a/src/reducers/index.ts
+++ b/src/reducers/index.ts
@@ -1,8 +1,18 @@
import { combineReducers } from 'redux'
import userInfo from './userInfo'
import commonData from './commonData'
+import tabBarReducer from './tabBar'
-export default combineReducers({
- userInfo,
- commonData
-})
\ No newline at end of file
+export type Reducers = {
+ userInfo: typeof userInfo
+ commonData: typeof commonData
+ tabBarData: typeof tabBarReducer
+}
+
+export type ReducersKey = keyof Reducers
+
+export default combineReducers({
+ userInfo,
+ commonData,
+ tabBarData: tabBarReducer,
+})
diff --git a/src/reducers/tabBar.ts b/src/reducers/tabBar.ts
new file mode 100644
index 0000000..638bc96
--- /dev/null
+++ b/src/reducers/tabBar.ts
@@ -0,0 +1,72 @@
+import { TabBarType } from '../constants/tabbar'
+import IconFont from '@/components/iconfont'
+
+type IconfontName = Parameters['0']['name']
+
+type TabBarIndexMap = {
+ [Property: number]: {
+ id: number
+ pagePath: string
+ text: string
+ iconPath: IconfontName
+ selectedIconPath: IconfontName
+ }
+}
+
+
+const INITIAL_STATE = {
+ selectedId: 1,
+ tabItem: [
+ {
+ id: 1,
+ pagePath: '/pages/index/index',
+ text: '首页',
+ iconPath: 'icon-shouye1',
+ selectedIconPath: 'icon-shouye',
+ },
+ {
+ id: 2,
+ pagePath: '/pages/shopping/index',
+ text: '购物',
+ iconPath: 'icon-gouwu1',
+ selectedIconPath: 'icon-gouwu',
+ },
+ {
+ id: 3,
+ pagePath: '/pages/order/index',
+ text: '订单',
+ iconPath: 'icon-dingdan1',
+ selectedIconPath: 'icon-dingdan',
+ },
+ {
+ id: 4,
+ pagePath: '/pages/user/index',
+ text: '我的',
+ iconPath: 'icon-gerenzhongxin1',
+ selectedIconPath: 'icon-gerenzhongxin',
+ },
+ ],
+}
+
+export type TabBarData = {
+ selectedId: number
+ tabItem: TabBarIndexMap[number][]
+}
+
+export type TabBarAction = {
+ type: TabBarType
+ data: TabBarData
+}
+// TabBarReducer
+export default (state = INITIAL_STATE, action: TabBarAction) => {
+ const { type, data } = action
+ switch (type) {
+ case TabBarType.SET_SELECTED:
+ return {
+ ...state,
+ selectedId: data.selectedId,
+ }
+ default:
+ return state
+ }
+}