Feat: 适配 Taro h5。处理样式兼容问题。 (jdf2e#307)

* chore: 升级Taro版本。

* chore: 调整@tarojs/cli

* feat: 适配Taro h5,主要是样式处理

Author: xiaoyatong

src/packages/icon/demo.taro.tsx

@@ -32,6 +32,34 @@ const copyTag = (text: string) => {
   document.body.removeChild(input)
 }
 
+const style = `
+.nut-cell > .nutui-iconfont {
+  margin-right: 10px;
+}
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  width: 100%;
+}
+ul li {
+    flex: 0 0 25%;
+    max-width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+ul li  span {
+  height: 40px;
+  font-size: 12px;
+  text-align: center;
+}
+ul li span .nutui-iconfont {
+  margin: 16px 0 16px;
+}
+`
+
 const IconDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
@@ -59,6 +87,7 @@ const IconDemo = () => {
 
   return (
     <>
+      <style>{style}</style>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
         <Cell>

src/packages/layout/demo.taro.tsx

@@ -1,12 +1,40 @@
 import React from 'react'
+import { useTranslate } from '@/sites/assets/locale/taro'
 import { Row, Col } from '@/packages/nutui.react.taro'
 import '@/packages/layout/demo.scss'
+type TLayoutDemo = {
+  title1: string
+  title2: string
+  title3: string
+}
 
 const LayoutDemo = () => {
+  const [translated] = useTranslate<TLayoutDemo>({
+    'zh-CN': {
+      title1: '基础布局',
+      title2: '搜索框形状及最大长度',
+      title3: '搜索框内外背景设置',
+    },
+    'zh-TW': {
+      title1: '基礎佈局',
+      title2: '分欄間隔',
+      title3: 'Flex佈局',
+    },
+    'en-US': {
+      title1: 'Basic layout',
+      title2: 'column interval',
+      title3: 'Flex layout',
+    },
+    'id-ID': {
+      title1: 'Tata letak dasar',
+      title2: 'interval kolom',
+      title3: 'Tata letak fleksibel',
+    },
+  })
   return (
     <>
       <div className="demo full">
-        <h2>基础布局</h2>
+        <h2>{translated.title1}</h2>
         <div className="box-item">
           <Row>
             <Col span="24">
@@ -47,7 +75,7 @@ const LayoutDemo = () => {
             </Col>
           </Row>
         </div>
-        <h2>分栏间隔</h2>
+        <h2>{translated.title2}</h2>
         <div className="box-item">
           <Row gutter="10">
             <Col span="8">
@@ -61,7 +89,7 @@ const LayoutDemo = () => {
             </Col>
           </Row>
         </div>
-        <h2>Flex布局</h2>
+        <h2>{translated.title3}</h2>
         <div className="box-item">
           <Row type="flex" wrap="nowrap">
             <Col span="6">

src/sites/mobile-taro/config/index.js

@@ -37,7 +37,6 @@ const config = {
     postcss: {
       pxtransform: {
         enable: true,
-        config: {},
         // 包含 `nut-` 的类名选择器中的 px 单位不会被解析
         config: { selectorBlackList: ['nut-'] },
       },
@@ -60,6 +59,11 @@ const config = {
     publicPath: '/',
     staticDirectory: 'static',
     postcss: {
+      pxtransform: {
+        enable: true,
+        // 包含 `nut-` 的类名选择器中的 px 单位不会被解析
+        config: { selectorBlackList: ['nut-'] },
+      },
       autoprefixer: {
         enable: true,
         config: {},

src/sites/mobile-taro/src/pages/index/Links.scss

@@ -0,0 +1,69 @@
+@import '@/sites/assets/styles/reset.scss';
+.nut-demo-index {
+  height: 100%;
+  width: 100%;
+  padding-top: 30px;
+  .nut-demo-index-header {
+    display: flex;
+    align-items: center;
+    padding: 0 34px;
+    height: 117px;
+    .nut-demo-img {
+      width: 67px;
+      height: 67px;
+      margin-right: 18px;
+      flex-shrink: 0;
+    }
+    .nut-demo-info {
+      display: flex;
+      flex-direction: column;
+      .nut-demo-title {
+        height: 48px;
+        line-height: 48px;
+        font-size: 34px;
+        color: rgba(51, 51, 51, 1);
+      }
+      p {
+        height: 18px;
+        line-height: 18px;
+        font-size: 12px;
+        color: rgba(154, 155, 157, 1);
+      }
+    }
+  }
+  .nut-demo-index-components {
+    background: #f7f8fa;
+    border-radius: 30px 30px 0 0;
+    padding: 30px 25px;
+    > ol {
+      margin-bottom: 17px;
+      > li {
+        line-height: 20px;
+        font-size: 14px;
+        color: rgba(144, 156, 164, 1);
+        margin-bottom: 10px;
+      }
+      > ul {
+        li {
+          display: flex;
+          align-items: center;
+          padding: 0 24px;
+          height: 45px;
+          line-height: 45px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 22px;
+          box-shadow: 0px 1px 4px 0px rgba(102, 102, 102, 0.06);
+          margin-bottom: 13px;
+          a {
+            width: 100%;
+            height: 100%;
+            font-size: 15px;
+            font-weight: bold;
+            display: block;
+            color: rgba(51, 51, 51, 1);
+          }
+        }
+      }
+    }
+  }
+}

src/sites/mobile-taro/src/pages/index/index.scss

@@ -1,6 +1,6 @@
-@import '@/sites/mobile/Links.scss';
+@import './Links.scss';
 
-.index-header .info .h5-h1 {
+.nutui-demo-index-header .nutui-demo-info .nutui-demo-title {
   font-weight: 500;
-  font-size: 48rpx;
+  font-size: 24px;
 }

src/sites/mobile-taro/src/pages/index/index.tsx

@@ -30,19 +30,20 @@ const Index = () => {
 
   return (
     <>
-      <div className="index">
-        <div className="index-header">
+      <div className="nut-demo-index">
+        <div className="nut-demo-index-header">
           <img
             src={`https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png`}
             alt=""
             srcSet=""
+            className="nut-demo-img"
           />
-          <div className="info">
-            <h1>NutUI React</h1>
+          <div className="nut-demo-info">
+            <h1 className="nut-demo-title">NutUI React</h1>
             <p>京东风格的轻量级小程序组件库 React 版</p>
           </div>
         </div>
-        <div className="index-components">
+        <div className="nut-demo-index-components">
           {navs.map((nav) => (
             <ol key={nav.name}>
               <li>{nav.name}</li>