-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
872 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
website/versioned_docs/version-2.0.0-beta.13/components/forms/button.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| --- | ||
| title: Button | ||
| sidebar_label: Button | ||
| id: version-2.0.0-beta.13-button | ||
| original_id: button | ||
| --- | ||
|
|
||
| ##### 按钮 | ||
|
|
||
| > 属性及支持度 | ||
| | H5 | ReactNative| Quickapp| 属性名 | 类型 | 默认值 | 说明 | | ||
| | :-: | :-: | :-: | :- | :- | :- | :- | | ||
| | ✔ | ✔ | ✔ | type | String | default | 按钮的样式类型 | | ||
| | ✔ | ✔ | ✔ | size | String | default | 按钮的大小 px | | ||
| | ✔ | ✔ | ✔ | plain | Boolean | false | 按钮是否镂空，背景色透明 | | ||
| | ✔ | ✔ | ✔ | disabled | Boolean | false | 是否禁用 | | ||
| | ✔ | ✔ | ✔ | loading | Boolean | false | 名称前是否带 loading 图标 | | ||
| | ✔ | X (支持 hoverStyle 属性，但框架未支持 hoverClass) | X(支持 active 伪类状态变化) | hoverClass | String | button-hover | 指定按钮按下去的样式类。当 hover-class='none' 时，没有点击态效果 | | ||
| | ✔ | ✔ | X | hoverStartTime | Number | 20 | 按住后多久出现点击态，单位毫秒 | | ||
| | ✔ | ✔ | X | hoverStayTime | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | | ||
| | X | X | X | onGetUserInfo | Handler | | 微信小程序open-type='getUserInfo'时，用户点击该按钮，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | | ||
|
|
||
| >其他相关属性请看各小程序官方文档 | ||
| [微信小程序 Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 | ||
|
|
||
| [百度小程序 Button](https://smartprogram.baidu.com/docs/develop/component/formlist/#button)。 | ||
|
|
||
| [支付宝小程序 Button](https://docs.alipay.com/mini/component/button)。 | ||
|
|
||
| [字节跳动小程序 Button](https://developer.toutiao.com/docs/comp/button.html)。 | ||
|
|
||
|
|
||
|
|
||
| ###### 示例： | ||
| ```jsx | ||
| import Taro, { Component } from '@tarojs/taro' | ||
| import { View, Text, Button } from '@tarojs/components' | ||
|
|
||
| export default class PageButton extends Component { | ||
| state = { | ||
| btn: [ | ||
| { | ||
| text: '页面主操作 Normal', | ||
| size: 'default', | ||
| type: 'primary' | ||
| }, | ||
| { | ||
| text: '页面主操作 Loading', | ||
| size: 'default', | ||
| type: 'primary', | ||
| loading: true, | ||
| }, | ||
| { | ||
| text: '页面主操作 Disabled', | ||
| size: 'default', | ||
| type: 'primary', | ||
| disabled: true, | ||
| }, | ||
| { | ||
| text: '页面次要操作 Normal', | ||
| size: 'default', | ||
| type: 'default' | ||
| }, | ||
| { | ||
| text: '页面次要操作 Disabled', | ||
| size: 'default', | ||
| type: 'default', | ||
| disabled: true, | ||
| }, | ||
| { | ||
| text: '警告类操作 Normal', | ||
| size: 'default', | ||
| type: 'warn' | ||
| }, | ||
| { | ||
| text: '警告类操作 Disabled', | ||
| size: 'default', | ||
| type: 'warn', | ||
| disabled: true, | ||
| } | ||
| ] | ||
| } | ||
| render () { | ||
| return ( | ||
| <View className='container'> | ||
| {this.state.btn.map(item => { | ||
| return ( | ||
| <Button | ||
| size={item.size ? item.size : ''} | ||
| type={item.type ? item.type : ''} | ||
| loading={item.loading ? item.loading : false} | ||
| disabled={item.disabled ? item.disabled : false} | ||
| > | ||
| {item.text} | ||
| </Button> | ||
| ) | ||
| })} | ||
| <Button className='btn-max-w' plain type='primary'>按钮</Button> | ||
| <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button> | ||
| <Button className='btn-max-w' plain >按钮</Button> | ||
| <Button className='btn-max-w' plain disabled >按钮</Button> | ||
| <Button size='mini' type='primary'>按钮</Button> | ||
| <Button size='mini' >按钮</Button> | ||
| <Button size='mini' type='warn'>按钮</Button> | ||
| </View> | ||
| ) | ||
| } | ||
| } | ||
| ``` |
101 changes: 101 additions & 0 deletions
101
website/versioned_docs/version-2.0.0-beta.13/debug-config.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| --- | ||
| title: 单步调测配置 | ||
| id: version-2.0.0-beta.13-debug-config | ||
| original_id: debug-config | ||
| --- | ||
|
|
||
| > 通过本身 `VSCode` 提供的跨平台代码单步调测能力，能够极大提升基于 `Taro` 开发框架的应用开发速度，因其他平台已有比较成熟的工具可以使用，着重降低 Windows 平台配置复杂度。 | ||
| ## 一、开发环境搭建 | ||
|
|
||
| 首先准备 `Taro` 在 Windows 下的基础开发环境，详情如下(已有开发环境可略过）： | ||
|
|
||
| #### 1. 安装 Node.js | ||
| 建议安装 `10.15` 以上版本，官方下载地址：[Node.js](https://nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi " node.js") | ||
|
|
||
| #### 2. 安装 VSCode | ||
|
|
||
| 安装完最新 `VSCode` 后，建议安装如下插件: | ||
| - `ESlint` — 代码规范 | ||
| - `TSlint` — 语法检查 | ||
|
|
||
| #### 3. Taro 源码下载 | ||
| 下载地址：[Taro](https://github.com/NervJS/taro.git "Taro")，默认为 2.x 分支，如有需要，请切换到开发分支 | ||
|
|
||
| #### 4. 全局安装 Node-sass 、Lerna 和 Rollup | ||
| ```shell | ||
| npm i -g node-sass --sass_binary site=https://npm.taobao.org/mirrors/node_sass/ | ||
| yarn global add lerna | ||
| yarn global add rollup | ||
| ``` | ||
| > Node-sass 比较特殊，建议提前进行安装，规避可能出现的各种异常错误。 | ||
| #### 5. 源码依赖安装 | ||
| 1.使用 `VSCode` 打开 `Taro` 源码目录，在根目录下执行 `yarn` ，安装项目所需依赖库（首次安装所花时间较长，请耐心等待） | ||
|
|
||
| 2.待 `yarn` 执行完毕后，执行 `yarn bootstrap` 解析子包之间的依赖关系 | ||
|
|
||
| ## 二、单步调试配置 | ||
|
|
||
| #### 1. 拷贝测试项目 | ||
| 进入 `taro cli` 目录，将需要调试的测试项目拷贝至根目录，以测试项目命名 `test` 为例 | ||
|
|
||
| #### 2. 在测试项目中添加 `js` 入口 | ||
| 进入测试项目根目录，新增 `debug.js` 调试入口文件，文件内容如下： | ||
| ```javascript | ||
| const Builder = require('../dist/build').default | ||
| const appPath = process.cwd() | ||
| const builder = new Builder(appPath) | ||
|
|
||
| builder.build({ | ||
| type: 'weapp', | ||
| watch: 'watch' | ||
| }) | ||
| ``` | ||
| > 调试入口文件名可自定义设置 | ||
| #### 3. 增加 VSCode 调试参数配置 | ||
| 打开 `taro cli` 所在 Windows 文件夹，进入目录下的 `.vscode` 子目录，在 `lanuch.json` 文件中新增调试入口参数，设置如下： | ||
| ```shell | ||
| { | ||
| "version": "0.2.0", | ||
| "configurations": [ | ||
| { | ||
| "type": "node", | ||
| "name": "debug.js", | ||
| "request": "launch", | ||
| "sourceMaps": true, | ||
| "args": [ | ||
| "--runInBand", | ||
| "-r", | ||
| "ts-node/register" | ||
| ], | ||
| "cwd": "${workspaceFolder}/packages/taro-cli/debug", | ||
| "console": "integratedTerminal", | ||
| "internalConsoleOptions": "neverOpen", | ||
| "program": "${workspaceFolder}/packages/taro-cli/test/debug.js" | ||
| } | ||
| ] | ||
| } | ||
| ``` | ||
| > 若 `.vscode` 目录或 `lanuch.json` 文件不存在，需手动创建；同时 `name` 、`cwd` 、`program` 三个参数根据测试项目的实际名称、目录进行调整 | ||
| #### 2. 编译子包 | ||
| 在 `node.js` 调试过程中只能调用 `js` 文件，调试过程所依赖的 `taro` 子模块，需要进入子模块根目录，执行编译命令，将 `ts` 代码编译打包成 `js` 代码之后，才能进行调试，主要编译如下关键子包： | ||
|
|
||
| | 模块名称 | 功能描述 | 编译方式 | | ||
| | :------------ |:---------------:| -----:| | ||
| | taro-cli | Taro开发工具转换总入口 | yarn dev | | ||
| | taroize | Taro小程序编译器，主要负责小程序转Taro | yarn dev | | ||
| | taro-mini-runner | Taro编译时，webpack插件化管理打包任务 | yarn dev | | ||
| | taro-transformer-wx | Taro解析模块，解析AST目录树 | yarn dev | | ||
|
|
||
| #### 3.链接未发布的库 | ||
| 为了测试代码更改效果，或依赖未正式发布的包，可通过软链接的方式，将最新代码链接到测试目录下进行测试，同时保持子模块的 `watch` 状态，可以实时更新修改代码，此处以 `taro-mini-runner` 举例： | ||
|
|
||
| 1.首先进入 `taro-mini-runner` 根目录，执行 `yarn link` 命令 | ||
|
|
||
| 2.进入测试项目 `test` 的根目录，执行 `Debug and Run` ， `yarn link taro-mini-runner` 命令进行软链接 | ||
|
|
||
| #### 4.启动调试 | ||
| 在编译后的 `js` 文件中打断点，在 `VSCode` 左侧按钮列表中，选择启动调试 `Debug and Run` 按钮，在出现的选择框列表中，选择需要启动的测试项目，启动调试，即可开始单步调试。 |
Oops, something went wrong.