hlj-weapp-ui v0.0.1

hlj-weapp-ui 介绍

Weapp UI 是一款基于 Taro 框架开发的多端 UI 组件库，由婚礼纪海草云前端组开发维护。

Lerna

lerna是由 babel 团队出的一个多包管理的工具，以前的开发模式是一个项目一个仓库，管理起来比较困难， 尤其有系统内部包调用的时候，发布比较麻烦，所以更好的管理包管理的话， 所以推出了 lernaJS, 使用 monorepo 的概念。项目采用 lerna 管理，分为 hlj-weapp-ui（组件库），ui-demo（demo），ui-docs（文档）三个项目

Taro

使用 Taro，可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5）运行的代码。

Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

特性

• 基于 Taro 开发 UI 组件
• 一套组件可以在 微信小程序，H5 适配运行
• 提供友好的 API，可灵活的使用组件

使用前准备

在使用之前，推荐学习 Taro 和 ES2015，并正确配置 Node.js v14.x 和 Taro v3.x 或以上版本

如何使用

1. 安装 Taro 脚手架工具

安装 Taro 开发工具 @tarojs/cli

使用 npm 或者 yarn 全局安装，或者直接使用 npx

:::demo

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

:::

2. 初始化项目

使用命令创建模板项目

:::demo

$ taro init myApp

:::

3. 安装 Weapp UI

:::demo

$ cd myApp
$ npm install hlj-weapp-ui

:::

P.S.因为要支持自定义主题功能，需要将样式从组件中抽离出来，在微信小程序中依赖 globalClass 功能，所以需要微信基础库版本在 v2.2.3 以上。

配置需要额外编译的源码模块

由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

:::demo

h5: {
  esnextModules: ['hlj-weapp-ui']
}

:::

4. 使用 Weapp UI

引入所需组件

在代码中 import 需要的组件并按照文档说明使用

:::demo

// page.js
import { Button } from 'hlj-weapp-ui'

// 除了引入所需的组件，还需要手动引入组件样式
// app.js
import 'hlj-weapp-ui/dist/style/index.module.less' // 全局引入一次即可

:::

引入组件样式的三种方式

• 全局引入（JS 中）： 在入口文件中引入 hlj-weapp-ui 所有的样式 :::demo

import 'hlj-weapp-ui/dist/style/index.module.less' // 引入组件样式 - 方式一

:::

• 全局引入（CSS 中）： 在 app.less 样式文件中 import 组件样式并按照文档说明使用 :::demo

@import 'hlj-weapp-ui/dist/style/index.module.less'; // 引入组件样式 - 方式二

:::

• 按需引入： 在页面样式或全局样式中 import 需要的组件样式 :::demo

@import '~hlj-weapp-ui/dist/style/components/button.less'; // 引入所需的组件样式 - 方式三

:::

5. 按需加载

项目根目录添加并配置 babel.config.js

plugins: [
  [
    'import',
    {
      libraryName: 'hlj-weapp-ui',
      libraryDirectory: 'lib/components',
      camel2DashComponentName: false
    }
  ]
]

示例

在 /myApp/src/pages/index/index.tsx 文件添加以下代码

:::demo

import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { Button } from 'hlj-weapp-ui'

import './index.less'

export default class Index extends Component {
  config: Config = {
    navigationBarTitleText: '首页'
  }

  render() {
    return (
      <View className='index'>
        <Button type='primary'>按钮文案</Button>
      </View>
    )
  }
}

:::

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 h5 预览模式，若使用小程序预览模式，则需要自行下载并打开对应的小程序开发者工具，并选择预览项目根目录。

微信小程序编译预览模式

:::demo

# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watch

:::

H5 编译预览模式

:::demo

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch

:::