taro-hooks feat(ant-mobile-taro): improve ui apperance of demo & transfer antd-mobile-v5 to taro

feat(ant-mobile-taro): improve ui apperance of demo & transfer antd-mobile-v5 to taro

Open innocces opened this issue 2 years ago • 13 comments

🤔 这个变动的性质是？/ What is the nature of this change?

[x] 新特性提交 / New feature
[ ] bug 修复 / Fix bug
[x] 样式优化 / Style optimization
[x] 代码风格优化 / Code style optimization
[ ] 性能优化 / Performance optimization
[ ] 构建优化 / Build optimization
[x] 网站、文档、Demo 改进 / Website, documentation, demo improvements
[x] 重构代码或样式 / Refactor code or style
[ ] 测试相关 / Test related
[x] 其他 / Other

🔗 相关 Issue / Related Issue

无

💡 需求背景和解决方案 / Background or solution

因为taro-ui的样式为scss. 现在less和sass混用比较难于管理样式. 整好现在antd-mobile-v5发布了. 赶上想换UI. 就索性这个月不更新主要弄这块, 主要迁移大部分antd-mobile-v5的组件为Taro版本, 且重构demo小程序. 现在网站已经适配了antd-mobile-v5的文档样式. 后面慢慢迁移组件. 目前计划是React和Vue都支持. 下面是一些拆解的任务:

文档相关

[x] 迁移文档样式同步antd-mobile-v5文档
[x] demo示例支持Vue和React切换(目前dumi只支持React)

demo小程序相关

[ ] 更新为新的UI库
[ ] 新的设计

`antd-mobile` 实现为 `ant-mobile-taro`

[x] icon
[x] button
[x] list
[x] space
[x] badge
[x] card
[x] image
[ ] image-viewer
[ ] infinite-scroll
[x] notice-bar
[x] page-indicator
[ ] popover
[x] steps
[ ] swiper
[x] tag
[ ] water-mark
[ ] check-list
[ ] checkbox
[ ] form
[ ] input
[ ] picker
[ ] radio
[ ] rate
[ ] search
[ ] selector
[ ] slider
[ ] stepper
[ ] switch
[ ] text-area
[ ] action-sheet
[ ] dialog
[x] empty
[ ] error-block
[x] loading
[ ] mask
[x] progress-bar
[x] progress-circle
[ ] pull-to-refresh
[x] result
[ ] swipe-action
[ ] toast
[ ] capsule-tabs
[ ] collapse
[x] divider
[ ] floating-panel
[x] grid
[ ] index-bar
[ ] jumbo-tabs
[x] nav-bar
[ ] popup
[x] side-bar
[x] index-bar
[ ] tab-bar
[ ] tabs
[ ] config-provider
[x] auto-center
[x] desense-text
[ ] dropdown
[ ] ellipsis
[ ] image-uploader
[ ] number-keyboard
[ ] picker-view
[x] safe-area
[ ] tree-select
[ ] virtual-input

整理类型

[ ] 整理类型

📝 更新日志 / Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese	✅

Nov 14 '21 15:11 innocces

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

taro-hooks – ./

🔍 Inspect: https://vercel.com/innocces/taro-hooks/JHYu1X1zgCoVYUC9eXRqXvRvzqdj
✅ Preview: https://taro-hooks-git-feature-innocces.vercel.app

[Deployment for 2e6271c failed]

taro-hooks-h5 – ./

🔍 Inspect: https://vercel.com/innocces/taro-hooks-h5/AcQmd8uMUwYqeSBTndEtb5HCbDz4
✅ Preview: https://taro-hooks-h5-git-feature-innocces.vercel.app

[Deployment for 2e6271c failed]

Nov 14 '21 15:11 vercel[bot]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	Secret	Commit	Filename
11134032	Generic High Entropy Secret	d934a98ca241e3e1a5085e4d16bfad26e3d79b11	.dumi/theme/components/SideMenu.tsx	View secret

🛠 Guidelines to remediate hardcoded secrets

Revoke and rotate the secret.
If possible, rewrite git history with git commit --amend and git push --force.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

Nov 14 '21 15:11 gitguardian[bot]

taro在vue中使用tsx需要注意:

h5 会存在标签未被转换的问题(核实了一下确实如此). 见pr： https://github.com/NervJS/taro/pull/9660 (看起来最后还有一个样式的问题)
emmmm~ 怎么配置ts都在报错，这个很苦恼

Nov 20 '21 09:11 innocces

taro在vue中使用tsx需要注意:

h5 会存在标签未被转换的问题(核实了一下确实如此). 见pr： fix(babel-preset-taro): fix #9659 NervJS/taro#9660 (看起来最后还有一个样式的问题)

emmmm~ 怎么配置ts都在报错，这个很苦恼

(:з」∠) 用webpack直接在h5端强行给它把所有的组件用成taro-x. 连样式编译都ok了. 我真是个小机灵

Nov 20 '21 09:11 innocces

taro在vue中使用tsx需要注意:

h5 会存在标签未被转换的问题(核实了一下确实如此). 见pr： fix(babel-preset-taro): fix #9659 NervJS/taro#9660 (看起来最后还有一个样式的问题)

emmmm~ 怎么配置ts都在报错，这个很苦恼

(:з」∠) 用webpack直接在h5端强行给它把所有的组件用成taro-x. 连样式编译都ok了. 我真是个小机灵

目前使用简单的处理办法来实现:

tag-loader.js

module.exports = function loader(source) {
  // taro 内部有一组转换, jsx 不会被转掉, 这里手动转一下
  // 基本就是把组件换成 taro-${tag.toLowercase()}
  const matchStartTag = /<(View|Text|Input|Image|TextArea)/gm;
  const matchEndTag = /<\/(View|Text|Input|Image|TextArea)>/gm;
  function replacer(match, tag) {
    return match.replace(tag, 'taro-' + tag.toLocaleLowerCase());
  }
  source = source.replace(matchStartTag, replacer);
  source = source.replace(matchEndTag, replacer);
  return source;
};

config/index.js

{
  h5: {
     webpackChain(chain) {
      chain.merge({
        module: {
          rule: {
            'replace-tag': {
              test: /\.tsx$/,
              loader: resolve(__dirname, 'tag-loader'),
            },
          },
        },
      });
    },
  }
}

Nov 21 '21 07:11 innocces

emmm~ Vue中如果依然使用JSX来引用组件库就不可以直接使用className来传递自定义类名了。需要使用class. 不然根元素的className就会被覆盖。很迷。不过大家应该都是正常的vue文件。所以不会有问题。手动狗头

Nov 23 '21 08:11 innocces

(:з」∠) 少装一个插件让自己浪费好久.

Vue 中需要安装 @tarojs/plugin-html. 并在配置中增加:

{
    plugins: ['@tarojs/plugin-html']
}

不然类似click这样的事件就只能写成tap了.

此外。发现比如一些微信组件中的 onGetPhoneNumber 在 Vue 中就需要写成 @getphonenumber 才能正常触发

Nov 25 '21 02:11 innocces

开启plugin-html会自动启用post-css-html-transform。但是通配匹配有点问题。会丢掉一些样式:

https://github.com/NervJS/taro/blob/next/packages/postcss-html-transform/src/index.ts#L11

Nov 25 '21 07:11 innocces

发现，一些组件貌似没有官方标注的事件。但是也没特别标明。比如很多元素计算属性根本算不出来。像text 就算你写了inline-block. 他依然也算不出来rect。也没有transitionend这些事件。略坑。事件

Dec 02 '21 08:12 innocces