Taro 開發日記-2

上一篇

上次好像漏了

執行以後 選擇選項

taro init
# 依次選擇
# ? 請輸入項目名稱！ myDaliyList
# ? 請輸入項目介紹！ 個人日記本
# ? 是否須要使用 TypeScript ？ Yes
# ? 請選擇 CSS 預處理器（Sass/Less/Stylus） Sass
# ? 請選擇模板 redux

使用 taro-ui

安裝 taro-ui

npm install taro-ui

安裝完成以後按照官方說明須要給h5配置H5 配置 `esnextModules`

# 文件 config/index.js 添加
h5: {
  esnextModules: ['taro-ui']
}

添加完成以後,執行命令:

npm run dev:h5

而後 就報錯了 😭

# 找不到模塊 uglifyjs-webpack-plugin
UnhandledPromiseRejectionWarning: Error: Cannot find module 'uglifyjs-webpack-plugin'

通常這種問題懶得想的話,就缺什麼裝什麼,因此:

# 安裝uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin
# 安裝完成以後再執行
npm run dev:h5
# 如下是輸出內容
建立  發現文件  src\app.scss
建立  發現文件  src\app.tsx
建立  發現文件  src\index.html
建立  發現文件  src\store\counter.ts
建立  發現文件  src\pages\index\index.scss
建立  發現文件  src\pages\index\index.tsx

ℹ️  Listening at http://0.0.0.0:10086/

監聽文件修改中...

✅  Compiled successfully!

這樣就正常執行成功了 訪問http://127.0.0.1:10086/能夠看到

引入全局樣式

# src/app.tsx 下全局添加樣式
import 'taro-ui/dist/style/index.scss' // 全局引入一次便可

在頁面中測試使用

# src/pages/index/index.tsx引入組件 
import { AtButton } from 'taro-ui';

使用組件

render() {
    const { counterStore: { counter } } = this.props;
    return (
        <View className="index">
            <AtButton type="primary" size="small" onClick={this.increment}>
                +
            </AtButton>
            <AtButton type="secondary" size="normal" onClick={this.decrement}>
                -
            </AtButton>
            <AtButton onClick={this.incrementAsync}>Add Async</AtButton>
            <Text>{counter}</Text>
        </View>
    );
}

頁面顯示出組件效果,則說明引入成功。

修改eslint配置

taro-ui 引入完成以後發現代碼有不少地方標紅,鼠標移上去能夠發現是eslint的錯誤提示。
Unexpected separator (;).eslint@typescript-eslint/member-delimiter-style
Unexpected usage of doublequote.eslintjsx-quotes

主要是eslint 的默認配置引發的,這裏須要稍微修改一下

修改.eslintrc=>.eslintrc.js

module.exports = {
  extends: ['taro', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? ['warn'] : ['off'], // 生產環境console警告
    'no-unused-vars': [
      'error',
      {
        varsIgnorePattern: 'Taro'
      }
    ],
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx', '.tsx']
      }
    ],
    '@typescript-eslint/no-var-requires': ['warn'],
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        varsIgnorePattern: 'Taro'
      }
    ],
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        // 結尾加分號
        multiline: {
          delimiter: 'semi',
          requireLast: true
        },
        singleline: {
          delimiter: 'semi',
          requireLast: false
        }
      }
    ],
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-empty-function': ['warn']
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    useJSXTextNode: true,
    project: './tsconfig.json'
  }
};

添加.prettierrc 這裏使用的格式化插件是Prettie

{
  "jsxSingleQuote": true,
  "singleQuote": true
}

附:react 建議的組件class順序

• Ordering forclass extends React.Component:

1. optionalstaticmethods
2. constructor
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. _clickHandlers or eventHandlers_likeonClickSubmit()oronChangeDescription()
12. _getter methods forrender_likegetSelectReason()orgetFooterContent()
13. _optional render methods_likerenderNavigation()orrenderProfilePicture()
14. render