Skip to content

Commit

Permalink
Merge branches 'master' and 'master' of github.com:NervJS/taro
Browse files Browse the repository at this point in the history
  • Loading branch information
yuche committed Jun 21, 2018
2 parents 419cf8e + 992c936 commit 7b17165
Show file tree
Hide file tree
Showing 23 changed files with 678 additions and 108 deletions.
149 changes: 131 additions & 18 deletions docs/native-api.md
Expand Up @@ -2384,41 +2384,154 @@ Taro.stopPullDownRefresh()

### WXML节点信息

#### Taro.createSelectorQuery
#### Taro.createSelectorQuery()

使用方式同 [`wx.createSelectorQuery`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#wxcreateselectorquery)
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点,并使用boundingClientRect等方法选择需要查询的信息。

#### selectorQuery.in
**示例代码:**

```javascript
import Taro from '@tarojs/taro'

const query = Taro.createSelectorQuery()
```

#### selectorQuery.in(component)

将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。)

注意:对 h5 侧不起作用,h5 侧还是从全局查找。

**示例代码:**

使用方式同 [`selectorQuery.in`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#selectorqueryincomponent)
```javascript
import Taro from '@tarojs/taro'

#### selectorQuery.select
Component({
ready () {
const query = Taro.createSelectorQuery().in(this)
})
})
```

使用方式同 [`selectorQuery.select`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#selectorqueryselectselector)
#### selectorQuery.select(selector)

#### selectorQuery.selectAll
在当前页面下选择第一个匹配选择器selector的节点,返回一个NodesRef对象实例,可以用于获取节点信息。

使用方式同 [`selectorQuery.selectAll`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#selectorqueryselectallselector)
* ID 选择器:`#the-id`
* class选择器(可以连续指定多个):`.a-class.another-class`
* 子元素选择器:`.the-parent > .the-child`
* 后代选择器:`.the-ancestor .the-descendant`
* 跨自定义组件的后代选择器:`.the-ancestor >>> .the-descendant`
* 多选择器的并集:`#a-node, .some-other-nodes`

#### selectorQuery.selectViewport
#### selectorQuery.selectAll(selector)

使用方式同 [`selectorQuery.selectViewport`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#selectorqueryselectviewport)
在当前页面下选择匹配选择器 selector 的节点,返回一个 NodesRef 对象实例。 与 selectorQuery.selectNode(selector) 不同的是,它选择所有匹配选择器的节点。

#### nodesRef.boundingClientRect
#### selectorQuery.selectViewport()

使用方式同 [`nodesRef.boundingClientRect`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#nodesrefboundingclientrectcallback)
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef 对象实例。

#### nodesRef.scrollOffset
#### nodesRef.boundingClientRect([callback])

使用方式同 [`nodesRef.scrollOffset`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#nodesrefscrolloffsetcallback)
添加节点的布局位置的查询请求,相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回值是 nodesRef 对应的 selectorQuery。

#### nodesRef.fields
返回的节点信息中,每个节点的位置用 left、right、top、bottom、width、height 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。

使用方式同 [`nodesRef.fields`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#nodesreffieldsfieldscallback)
**示例代码:**

```javascript
import Taro from '@tarojs/taro'

const query = Taro.createSelectorQuery()
query
.select('#the-id')
.boundingClientRect(rect => {
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
})
.exec()
})
```

#### nodesRef.scrollOffset([callback])

添加节点的滚动位置查询请求,以像素为单位。节点必须是 scroll-view 或者 viewport。返回值是 nodesRef 对应的 selectorQuery。

返回的节点信息中,每个节点的滚动位置用 scrollLeft、scrollTop 字段描述。如果提供了 callback 回调函数,在执行 selectQuery 的 exec 方法后,节点信息会在 callback 中返回。

**示例代码:**

```javascript
import Taro from '@tarojs/taro'

Taro.createSelectorQuery()
.selectViewport()
.scrollOffset(rect => {
rect.id // 节点的ID
rect.dataset // 节点的dataset
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
})
.exec()
})
```

#### nodesRef.fields(fields, [callback])

获取节点的相关信息,需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery。可指定获取的字段包括:

| 字段名 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| id || 是否返回节点 `id` |
| dataset || 是否返回节点 `dataset` |
| rect || 是否返回节点布局位置(`left` `right` `top` `bottom`|
| size || 是否返回节点尺寸(`width` `height`|
| scrollOffset || 是否返回节点的 `scrollLeft` `scrollTop` ,节点必须是 `scroll-view` 或者 viewport |
| properties | [] | 指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值, `id` `class` `style` 和事件绑定的属性值不可获取) |
| computedStyle | [] | 指定样式名列表,返回节点对应样式名的当前值 |

> 注意: computedStyle 的优先级高于 size,当同时在 computedStyle 里指定了 width/height 和传入了 size: true,则优先返回 computedStyle 获取到的 width/height。
**示例代码:**

```javascript
import Taro from '@tarojs/taro'

Taro.createSelectorQuery()
.select('#the-id')
.fields({
dataset: true,
size: true,
scrollOffset: true,
properties: ['scrollX', 'scrollY'],
computedStyle: ['margin', 'backgroundColor']
}, res => {
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-y 属性的当前值
// 此处返回指定要返回的样式名
res.margin
res.backgroundColor
})
.exec()
})
```

#### selectorQuery.exec
#### selectorQuery.exec([callback])

使用方式同 [`selectorQuery.exec`](https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html#selectorqueryexeccallback)
执行所有的请求,请求结果按请求次序构成数组,在 callback 的第一个参数中返回。

> API 支持度
Expand Down
1 change: 1 addition & 0 deletions packages/taro-cli/.npmrc
@@ -0,0 +1 @@
package-lock=false
6 changes: 3 additions & 3 deletions packages/taro-cli/bin/taro
@@ -1,14 +1,14 @@
#! /usr/bin/env node

const program = require('commander')
const { getPkgVersion, printPkgVersion } = require('../src/util')

const {
getPkgVersion
} = require('../src/util')
printPkgVersion()

program
.version(getPkgVersion())
.usage('<command> [options]')
.command('init [projectName]', 'Init a project with default templete')
.command('build', 'Build a project with options')
.command('update', 'Update packages of taro')
.parse(process.argv)
8 changes: 2 additions & 6 deletions packages/taro-cli/bin/taro-build
Expand Up @@ -6,10 +6,7 @@ const chalk = require('chalk')
const _ = require('lodash')

const build = require('../src/build')
const {
getPkgVersion,
PROJECT_CONFIG
} = require('../src/util')
const { PROJECT_CONFIG } = require('../src/util')
const projectConfPath = path.join(process.cwd(), PROJECT_CONFIG)

program
Expand All @@ -19,8 +16,7 @@ program

const args = program.args
const { type, watch } = program
console.log(`👽 Taro v${getPkgVersion()}`)
console.log()

if (!fs.existsSync(projectConfPath)) {
console.log(chalk.red(`找不到项目配置文件${PROJECT_CONFIG},请确定当前目录是Taro项目根目录!`))
process.exit(1)
Expand Down
7 changes: 0 additions & 7 deletions packages/taro-cli/bin/taro-init
Expand Up @@ -4,10 +4,6 @@ const program = require('commander')

const Project = require('../src/project')

const {
getPkgVersion
} = require('../src/util')

program
.option('--name', '项目名称')
.option('--description', '项目介绍')
Expand All @@ -27,7 +23,4 @@ const project = new Project({
typescript
})

console.log(`👽 Taro v${getPkgVersion()}`)
console.log()

project.create()
145 changes: 145 additions & 0 deletions packages/taro-cli/bin/taro-update
@@ -0,0 +1,145 @@
#!/usr/bin/env node
const path = require('path')
const fs = require('fs-extra')
const program = require('commander')
const chalk = require('chalk')
const { getPkgItemByKey } = require('../src/util')
const ora = require('ora')
const exec = require('child_process').exec
const getLatestVersion = require('latest-version')
const { PROJECT_CONFIG } = require('../src/util')
const projectConfPath = path.join(process.cwd(), PROJECT_CONFIG)
const pkgPath = path.join(process.cwd(), 'package.json')
const { shouldUseYarn, shouldUseCnpm } = require('../src/util')

const pkgName = getPkgItemByKey('name')

const UPDATE_PACKAGE_LIST = [
'@tarojs/taro',
'@tarojs/async-await',
'@tarojs/cli',
'@tarojs/components',
'@tarojs/components-rn',
'@tarojs/h5',
'@tarojs/plugin-babel',
'@tarojs/plugin-csso',
'@tarojs/plugin-sass',
'@tarojs/plugin-uglifyjs',
'@tarojs/redux',
'@tarojs/redux-h5',
'@tarojs/rn',
'@tarojs/rn-runner',
'@tarojs/router',
'@tarojs/weapp',
'@tarojs/webpack-runner',
'postcss-plugin-constparse',
'eslint-config-taro',
'eslint-plugin-taro',
'taro-transformer-wx',
'postcss-pxtransform'
]

// 这里没有使用 command 的形式:taro-update-self
program.parse(process.argv)

const args = program.args

if (args.length === 1) {
switch (args[0]) {
case 'self': {
updateSelf()
break
}
case 'project': {
updateProject()
break
}
default:
info()
}
} else {
info()
}

function info () {
console.log(chalk.red('命令错误:'))
console.log(`${chalk.green('taro update self')} 更新 Taro 开发工具 taro-cli 到最新版本`)
console.log(`${chalk.green('taro update project')} 更新项目所有 Taro 相关依赖到最新版本...`)
}

function updateSelf () {
let command
if (shouldUseYarn()) {
command = 'yarn global add @tarojs/cli@latest'
} else if (shouldUseCnpm()) {
command = 'cnpm i -g @tarojs/cli@latest'
} else {
command = 'npm i -g @tarojs/cli@latest'
}

let child = exec(command)

const spinner = ora('即将将 Taro 开发工具 taro-cli 更新到最新版本...').start()

child.stdout.on('data', function (data) {
console.log(data)
spinner.stop()
})
child.stderr.on('data', function (data) {
console.log(data)
spinner.stop()
})
}

async function updateProject () {
if (!fs.existsSync(projectConfPath)) {
console.log(chalk.red(`找不到项目配置文件${PROJECT_CONFIG},请确定当前目录是Taro项目根目录!`))
process.exit(1)
}
const packageMap = require(pkgPath)

const version = await getLatestVersion(pkgName)

// 更新 @tarojs/* 版本
Object.keys(packageMap.dependencies).forEach((key) => {
if (UPDATE_PACKAGE_LIST.indexOf(key) !== -1) {
packageMap.dependencies[key] = version
}
})
Object.keys(packageMap.devDependencies).forEach((key) => {
if (UPDATE_PACKAGE_LIST.indexOf(key) !== -1) {
packageMap.devDependencies[key] = version
}
})

// 写入package.json
try {
await fs.writeJson(pkgPath, packageMap, {spaces: '\t'})
console.log(chalk.green('更新项目 package.json 成功!'))
console.log()
} catch (err) {
console.error(err)
}

let command
if (shouldUseYarn()) {
command = 'yarn install'
} else if (shouldUseCnpm()) {
command = 'cnpm install'
} else {
command = 'npm install'
}

let child = exec(command)

const spinner = ora('即将将项目所有 Taro 相关依赖更新到最新版本...').start()

child.stdout.on('data', function (data) {
spinner.stop()
console.log(data)
})
child.stderr.on('data', function (data) {
spinner.stop()
console.log(data)
})
}
9 changes: 9 additions & 0 deletions packages/taro-cli/src/util/index.js
Expand Up @@ -175,6 +175,15 @@ exports.getPkgVersion = function () {
return require(path.join(exports.getRootPath(), 'package.json')).version
}

exports.getPkgItemByKey = function (key) {
const packageMap = require(path.join(exports.getRootPath(), 'package.json'))
if (Object.keys(packageMap).indexOf(key) === -1) {
return {}
} else {
return packageMap[key]
}
}

exports.printPkgVersion = function () {
const taroVersion = exports.getPkgVersion()
console.log(`👽 Taro v${taroVersion}`)
Expand Down

0 comments on commit 7b17165

Please sign in to comment.