使用前准备
在使用之前,推荐学习 Taro 和 ES2015,并正确配置 Node.js v8.x 或以上版本
如何使用
1. 安装 Taro 脚手架工具
安装 Taro
开发工具 @tarojs/cli
使用 npm
或者 yarn
全局安装,或者直接使用 npx
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
2. 初始化项目
使用命令创建模板项目
$ taro init myApp
3. 安装 kye-taro-ui
$ cd myApp
$ npm i kye-taro-ui
4. 使用 kye-taro-ui
引入所需组件
在代码中 import
需要的组件并按照文档说明使用
// page.js
import { KyeButton } from 'kye-taro-ui'
// 除了引入所需的组件,还需要手动引入组件样式
// app.js
import 'kye-taro-ui/assets/scss/combination.scss' // 全局引入一次即可
引入组件样式的三种方式
-
全局引入(JS中): 在入口文件中引入
kye-taro-ui
所有的样式 import 'kye-taro-ui/assets/scss/combination.scss' // 引入组件样式 - 方式一 -
全局引入(CSS中): 在 app.scss 样式文件中
import
组件样式并按照文档说明使用 @import "~kye-taro-ui/assets/scss/combination.scss"; // 引入组件样式 - 方式二 -
按需引入: 在页面样式或全局样式中
import
需要的组件样式 @import "~kye-taro-ui/dist/style/components/button.scss"; // 引入所需的组件样式 - 方式三
示例
在 /myApp/src/pages/index/index.tsx
文件添加以下代码
import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { KyeButton } from 'kye-taro-ui'
import './index.scss'
export default class Index extends Component {
config: Config = {
navigationBarTitleText: '首页'
}
render () {
return (
<View className='index'>
<KyeButton type='primary'>按钮文案</KyeButton>
</View>
)
}
}
/myApp/src/app.scss
文件中添加如下代码
在 @import "~kye-taro-ui/assets/scss/combination.scss"; // 引入组件样式,仅需引入一次即可
编译并预览
进入项目目录开始开发,可以选择小程序预览模式,或者 h5 预览模式,若使用小程序预览模式,则需要自行下载并打开对应的小程序开发者工具,并选择预览项目根目录。
微信小程序编译预览模式
# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watch
支付宝小程序编译预览模式
# npm script
$ npm run dev:alipay
# 仅限全局安装
$ taro build --type alipay --watch
# npx 用户也可以使用
$ npx taro build --type alipay --watch
百度小程序编译预览模式
# npm script
$ npm run dev:swan
# 仅限全局安装
$ taro build --type swan --watch
# npx 用户也可以使用
$ npx taro build --type swan --watch
H5 编译预览模式
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch