Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3200
Star 106
Fork 813
unidocs-zh
unidocs-zh
提交 29294ff9 编写于 作者: D DCloud_LXH
浏览文件
操作

chore: update theme to 1.3.9

上级 6c495ef7
隐藏空白更改
内联 并排
Showing with 405 addition and 405 deletion
docs/plugin/uts-component.md
浏览文件 @ 29294ff9
...@@ -298,153 +298,153 @@ UTS组件的优势在于，它秉承了UTS的跨平台特性，统一的UTS语 ...@@ -298,153 +298,153 @@ UTS组件的优势在于，它秉承了UTS的跨平台特性，统一的UTS语
> iOS > iOS
```ts ```ts
<template> <template>
<view class="defaultStyles"> <view class="defaultStyles">
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import { import {
UIButton UIButton
} from "UIKit" } from "UIKit"
// 定义按钮点击后触发回调的类 // 定义按钮点击后触发回调的类
class ButtonClickListsner { class ButtonClickListsner {
// 按钮点击回调方法 // 按钮点击回调方法
@objc buttonClick() { @objc buttonClick() {
console.log("按钮被点击") console.log("按钮被点击")
} }
} }
//原生提供以下属性或方法的实现 //原生提供以下属性或方法的实现
export default { export default {
/** /**
* 组件名称，也就是开发者使用的标签 * 组件名称，也就是开发者使用的标签
*/ */
name: "uts-hello-view", name: "uts-hello-view",
/** /**
* 组件涉及的事件声明，只有声明过的事件，才能被正常发送 * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
*/ */
emits: ['buttonClick'], emits: ['buttonClick'],
/** /**
* 属性声明，组件的使用者会传递这些属性值到组件 * 属性声明，组件的使用者会传递这些属性值到组件
*/ */
props: { props: {
/** /**
* 字符串类型 属性：buttonText 需要设置默认值 * 字符串类型 属性：buttonText 需要设置默认值
*/ */
"buttonText": { "buttonText": {
type: String, type: String,
default: "点击触发" default: "点击触发"
} }
}, },
/** /**
* 组件内部变量声明 * 组件内部变量声明
*/ */
data() { data() {
return {} return {}
}, },
/** /**
* 属性变化监听器实现 * 属性变化监听器实现
*/ */
watch: { watch: {
"buttonText": { "buttonText": {
/** /**
* 这里监听属性变化，并进行组件内部更新 * 这里监听属性变化，并进行组件内部更新
*/ */
handler(newButtonText: string, oldButtonText) { handler(newButtonText: string, oldButtonText) {
this.$el.setTitle(newButtonText, for = UIControl.State.normal) this.$el.setTitle(newButtonText, for = UIControl.State.normal)
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
}, },
/** /**
* 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露 * 规则：如果没有配置expose，则methods中的方法均对外暴露，如果配置了expose，则以expose的配置为准向外暴露
* ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用 * ['publicMethod'] 含义为：只有 `publicMethod` 在实例上可用
*/ */
expose: ['doSth'], expose: ['doSth'],
methods: { methods: {
/** /**
* 对外公开的组件方法 * 对外公开的组件方法
*/ */
doSth(paramA: string) { doSth(paramA: string) {
// 这是组件的自定义方法 // 这是组件的自定义方法
console.log("paramA") console.log("paramA")
}, },
/** /**
* 内部使用的组件方法 * 内部使用的组件方法
*/ */
}, },
/** /**
* 组件被创建，组件第一个生命周期， * 组件被创建，组件第一个生命周期，
* 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑 * 在内存中被占用的时候被调用，开发者可以在这里执行一些需要提前执行的初始化逻辑
* [可选实现] * [可选实现]
*/ */
created() { created() {
}, },
/** /**
* 对应平台的view载体即将被创建，对应前端beforeMount * 对应平台的view载体即将被创建，对应前端beforeMount
* [可选实现] * [可选实现]
*/ */
NVBeforeLoad() { NVBeforeLoad() {
}, },
/** /**
* 创建原生View，必须定义返回值类型 * 创建原生View，必须定义返回值类型
* 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型 * 开发者需要重点实现这个函数，声明原生组件被创建出来的过程，以及最终生成的原生组件类型
* [必须实现] * [必须实现]
*/ */
NVLoad(): UIButton { NVLoad(): UIButton {
//必须实现 //必须实现
let button = new UIButton() let button = new UIButton()
button.setTitle(this.buttonText, for = UIControl.State.normal) button.setTitle(this.buttonText, for = UIControl.State.normal)
const target = new ButtonClickListsner() const target = new ButtonClickListsner()
const method = Selector("buttonClick") const method = Selector("buttonClick")
button.addTarget(target, action = method, for = UIControl.Event.touchUpInside) button.addTarget(target, action = method, for = UIControl.Event.touchUpInside)
return button return button
}, },
/** /**
* 原生View已创建 * 原生View已创建
* [可选实现] * [可选实现]
*/ */
NVLoaded() { NVLoaded() {
}, },
/** /**
* 原生View布局完成 * 原生View布局完成
* [可选实现] * [可选实现]
*/ */
NVLayouted() { NVLayouted() {
}, },
/** /**
* 原生View将释放 * 原生View将释放
* [可选实现] * [可选实现]
*/ */
NVBeforeUnload() {}, NVBeforeUnload() {},
/** /**
* 原生View已释放，这里可以做释放View之后的操作 * 原生View已释放，这里可以做释放View之后的操作
* [可选实现] * [可选实现]
*/ */
NVUnloaded() { NVUnloaded() {
}, },
/** /**
* 组件销毁 * 组件销毁
* [可选实现] * [可选实现]
*/ */
unmounted() {} unmounted() {}
/** /**
* 自定组件布局尺寸 * 自定组件布局尺寸
* [可选实现] * [可选实现]
*/ */
NVMeasure(size: UTSSize): UTSSize { NVMeasure(size: UTSSize): UTSSize {
return new UTSSize(120, 45); return new UTSSize(120, 45);
} }
} }
</script> </script>
``` ```
...@@ -1051,241 +1051,241 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中 ...@@ -1051,241 +1051,241 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
> iOS > iOS
```ts ```ts
<template> <template>
<view class="defaultStyles"> <view class="defaultStyles">
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import { import {
LottieAnimationView, LottieAnimationView,
LottieAnimation, LottieAnimation,
LottieLoopMode LottieLoopMode
} from 'Lottie' } from 'Lottie'
import { import {
URL URL
} from 'Foundation' } from 'Foundation'
import { import {
UTSiOS UTSiOS
} from "DCloudUTSFoundation" } from "DCloudUTSFoundation"
//原生提供以下属性或方法的实现 //原生提供以下属性或方法的实现
export default { export default {
/** /**
* 组件名称，也就是开发者使用的标签 * 组件名称，也就是开发者使用的标签
*/ */
name: "uts-animation-view", name: "uts-animation-view",
/** /**
* 组件涉及的事件声明，只有声明过的事件，才能被正常发送 * 组件涉及的事件声明，只有声明过的事件，才能被正常发送
*/ */
emits: ['bindended'], // 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发） emits: ['bindended'], // 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
/** /**
* 属性声明，组件的使用者会传递这些属性值到组件 * 属性声明，组件的使用者会传递这些属性值到组件
*/ */
props: { props: {
/** /**
* 动画资源地址，支持远程 URL 地址和本地绝对路径 * 动画资源地址，支持远程 URL 地址和本地绝对路径
*/ */
"path": { "path": {
type: String, type: String,
default: "" default: ""
}, },
/** /**
* 动画是否循环播放 * 动画是否循环播放
*/ */
"autoplay": { "autoplay": {
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* 动画是否自动播放 * 动画是否自动播放
*/ */
"loop": { "loop": {
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* 是否隐藏动画 * 是否隐藏动画
*/ */
"hidden": { "hidden": {
type: Boolean, type: Boolean,
default: false default: false
}, },
/** /**
* 动画操作，可取值 play、pause、stop * 动画操作，可取值 play、pause、stop
*/ */
"action": { "action": {
type: String, type: String,
default: "stop" default: "stop"
} }
}, },
data() { data() {
return { return {
} }
}, },
watch: { watch: {
"path": { "path": {
handler(newValue: string, oldValue: string) { handler(newValue: string, oldValue: string) {
if (this.autoplay) { if (this.autoplay) {
this.playAnimation() this.playAnimation()
} }
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
"loop": { "loop": {
handler(newValue: boolean, oldValue: boolean) { handler(newValue: boolean, oldValue: boolean) {
if (newValue) { if (newValue) {
this.$el.loopMode = LottieLoopMode.loop this.$el.loopMode = LottieLoopMode.loop
} else { } else {
this.$el.loopMode = LottieLoopMode.playOnce this.$el.loopMode = LottieLoopMode.playOnce
} }
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
"autoplay": { "autoplay": {
handler(newValue: boolean, oldValue: boolean) { handler(newValue: boolean, oldValue: boolean) {
if (newValue) { if (newValue) {
this.playAnimation() this.playAnimation()
} }
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
"action": { "action": {
handler(newValue: string, oldValue: string) { handler(newValue: string, oldValue: string) {
const action = newValue const action = newValue
if (action == "play" || action == "pause" || action == "stop") { if (action == "play" || action == "pause" || action == "stop") {
switch (action) { switch (action) {
case "play": case "play":
this.playAnimation() this.playAnimation()
break; break;
case "pause": case "pause":
this.$el.pause() this.$el.pause()
break; break;
case "stop": case "stop":
this.$el.stop() this.$el.stop()
break; break;
default: default:
break; break;
} }
} else { } else {
// 非法入参，不管 // 非法入参，不管
} }
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
"hidden": { "hidden": {
handler(newValue: boolean, oldValue: boolean) { handler(newValue: boolean, oldValue: boolean) {
this.$el.isHidden = this.hidden this.$el.isHidden = this.hidden
}, },
immediate: false //创建时是否通过此方法更新属性，默认值为false immediate: false //创建时是否通过此方法更新属性，默认值为false
}, },
}, },
expose: ['setRepeatMode'], expose: ['setRepeatMode'],
methods: { methods: {
// 需要对外暴露的方法 // 需要对外暴露的方法
// 设置 RepeatMode // 设置 RepeatMode
setRepeatMode(repeatMode: string) { setRepeatMode(repeatMode: string) {
if (repeatMode == "RESTART") { if (repeatMode == "RESTART") {
if (this.loop) { if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop this.$el.loopMode = LottieLoopMode.loop
} else { } else {
this.$el.loopMode = LottieLoopMode.playOnce this.$el.loopMode = LottieLoopMode.playOnce
} }
} else if (repeatMode == "REVERSE") { } else if (repeatMode == "REVERSE") {
if (this.loop) { if (this.loop) {
this.$el.loopMode = LottieLoopMode.autoReverse this.$el.loopMode = LottieLoopMode.autoReverse
} else { } else {
this.$el.loopMode = LottieLoopMode.repeatBackwards(1) this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
} }
} }
}, },
// 不对外暴露的方法 // 不对外暴露的方法
// 播放动画 // 播放动画
playAnimation() { playAnimation() {
// 构建动画资源 url // 构建动画资源 url
var animationUrl: URL | null var animationUrl: URL | null
if (this.path.hasPrefix("http")) { if (this.path.hasPrefix("http")) {
animationUrl = new URL(string = this.path) animationUrl = new URL(string = this.path)
} else { } else {
const filePath = UTSiOS.getResourcePath(this.path) const filePath = UTSiOS.getResourcePath(this.path)
animationUrl = new URL(fileURLWithPath = filePath) animationUrl = new URL(fileURLWithPath = filePath)
} }
if (animationUrl != null) { if (animationUrl != null) {
// 加载动画 LottieAnimation // 加载动画 LottieAnimation
LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null): LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
void => { void => {
if (animation != null) { if (animation != null) {
// 加载成功开始播放 // 加载成功开始播放
this.$el.animation = animation this.$el.animation = animation
this.$el.play(completion = (isFinish: boolean): void => { this.$el.play(completion = (isFinish: boolean): void => {
if (isFinish) { if (isFinish) {
// 播放完成回调事件 // 播放完成回调事件
this.fireEvent("bindended") this.fireEvent("bindended")
} }
}) })
} }
}) })
} else { } else {
console.log("url 构建失败，请检查 path 是否正确") console.log("url 构建失败，请检查 path 是否正确")
} }
} }
}, },
created() { //创建组件，替换created created() { //创建组件，替换created
}, },
NVBeforeLoad() { //组件将要创建，对应前端beforeMount NVBeforeLoad() { //组件将要创建，对应前端beforeMount
//可选实现，这里可以提前做一些操作 //可选实现，这里可以提前做一些操作
}, },
NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验） NVLoad(): LottieAnimationView { //创建原生View，必须定义返回值类型（Android需要明确知道View类型，需特殊校验）
// 初始化 Lottie$el // 初始化 Lottie$el
const animationView = new LottieAnimationView() const animationView = new LottieAnimationView()
// 默认只播放一次动画 // 默认只播放一次动画
animationView.loopMode = LottieLoopMode.playOnce animationView.loopMode = LottieLoopMode.playOnce
return animationView return animationView
}, },
NVLoaded() { //原生View已创建 NVLoaded() { //原生View已创建
/// 更新 props 中定义的属性值 /// 更新 props 中定义的属性值
if (this.loop) { if (this.loop) {
this.$el.loopMode = LottieLoopMode.loop this.$el.loopMode = LottieLoopMode.loop
} }
this.$el.isHidden = this.hidden this.$el.isHidden = this.hidden
if (this.autoplay) { if (this.autoplay) {
this.playAnimation() this.playAnimation()
} }
}, },
NVLayouted() { //原生View布局完成 NVLayouted() { //原生View布局完成
//可选实现，这里可以做布局后续操作 //可选实现，这里可以做布局后续操作
}, },
NVBeforeUnload() { //原生View将释放 NVBeforeUnload() { //原生View将释放
//可选实现，这里可以做释放View之前的操作 //可选实现，这里可以做释放View之前的操作
}, },
NVUnloaded() { //原生View已释放 NVUnloaded() { //原生View已释放
//可选实现，这里可以做释放View之后的操作 //可选实现，这里可以做释放View之后的操作
}, },
unmounted() { //组件销毁 unmounted() { //组件销毁
//可选实现 //可选实现
} }
} }
</script> </script>
<style> <style>
//定义默认样式值, 组件使用者没有配置时使用 //定义默认样式值, 组件使用者没有配置时使用
.defaultStyles { .defaultStyles {
width: 750rpx; width: 750rpx;
height: 240rpx; height: 240rpx;
} }
</style> </style>
``` ```
...@@ -1419,7 +1419,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中 ...@@ -1419,7 +1419,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
## 简介 ## 简介
组件一般有两种场景，第一种是： 单标签组件 组件一般有两种场景，第一种是： 单标签组件
``` ```html
<uts-view style="xxxx"/> <uts-view style="xxxx"/>
``` ```
...@@ -1427,7 +1427,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中 ...@@ -1427,7 +1427,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
第二种是 作为容器使用： 第二种是 作为容器使用：
``` ```html
<uts-view > <uts-view >
<text> 文字子组件</text> <text> 文字子组件</text>
<image src="https://xxx"> <image src="https://xxx">
...@@ -1437,7 +1437,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中 ...@@ -1437,7 +1437,7 @@ iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中
UTS组件作为容器组件与普通View组件遵循完全相同的规范， UTS组件作为容器组件与普通View组件遵循完全相同的规范，
唯一的区别在于 当组件布局中包含 <solt>标签时，编译器会自动将其转换为容器组件 唯一的区别在于 当组件布局中包含 `<solt>` 标签时，编译器会自动将其转换为容器组件
::: preview ::: preview
...@@ -1478,24 +1478,24 @@ UTS组件作为容器组件与普通View组件遵循完全相同的规范， ...@@ -1478,24 +1478,24 @@ UTS组件作为容器组件与普通View组件遵循完全相同的规范，
> iOS > iOS
```ts ```ts
<template> <template>
<view> <view>
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
import { import {
UIView UIView
} from 'UIKit' } from 'UIKit'
//原生提供以下属性或方法的实现 //原生提供以下属性或方法的实现
export default { export default {
name: "uts-hello-container", name: "uts-hello-container",
NVLoad(): UIView { NVLoad(): UIView {
let view = new UIView() let view = new UIView()
return view return view
} }
} }
</script> </script>
``` ```
......
package.json
浏览文件 @ 29294ff9
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"fs-extra": "^10.0.0", "fs-extra": "^10.0.0",
"glob": "^7.1.7", "glob": "^7.1.7",
"vuepress-theme-uni-app-test": "^1.3.8" "vuepress-theme-uni-app-test": "^1.3.9"
}, },
"dependencies": { "dependencies": {
"@docsearch/js": "^3.1.0", "@docsearch/js": "^3.1.0",
......
yarn.lock
浏览文件 @ 29294ff9
...@@ -9215,10 +9215,10 @@ vuepress-plugin-zooming@^1.1.8: ...@@ -9215,10 +9215,10 @@ vuepress-plugin-zooming@^1.1.8:
dependencies: dependencies:
zooming "^2.1.1" zooming "^2.1.1"
vuepress-theme-uni-app-test@^1.3.8: vuepress-theme-uni-app-test@^1.3.9:
version "1.3.8" version "1.3.9"
resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.3.8.tgz#bc0f9fe35a18ee516e94a769873c7aa9162b1396" resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.3.9.tgz#a6112b134618706dabd2db6d942f3309dd334fc8"
integrity sha512-JMuQ+ljne1YrsZOODS67tSftFfIjoydFpTcEoWZvYxyEEHJBVJUl+5Gfznqd8ax3/Nt9hE+j0r/BtxY5EM7QTQ== integrity sha512-9t2OZhR7DyCb/W1LiQuF+hvQIsPRNzOpY13MX0iuuq+jKJRwzxmW42EqIhSxhY/si9YdFPiWL1PyRVFoXdguQA==
dependencies: dependencies:
"@vuepress/plugin-back-to-top" "^1.9.5" "@vuepress/plugin-back-to-top" "^1.9.5"
"@vuepress/theme-default" "^1.8.2" "@vuepress/theme-default" "^1.8.2"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或