Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-uni-app-x-zh
提交
f7c56704
U
unidocs-uni-app-x-zh
项目概览
DCloud
/
unidocs-uni-app-x-zh
通知
144
Star
2
Fork
33
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
9
列表
看板
标记
里程碑
合并请求
11
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-uni-app-x-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
9
Issue
9
列表
看板
标记
里程碑
合并请求
11
合并请求
11
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
f7c56704
编写于
9月 24, 2024
作者:
shutao-dc
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update native-view.md
上级
100dd286
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
13 addition
and
14 deletion
+13
-14
docs/component/native-view.md
docs/component/native-view.md
+2
-3
docs/plugin/uts-vue-component.md
docs/plugin/uts-vue-component.md
+11
-11
未找到文件。
docs/component/native-view.md
浏览文件 @
f7c56704
...
@@ -2,8 +2,7 @@
...
@@ -2,8 +2,7 @@
<!-- UTSCOMJSON.native-view.description -->
<!-- UTSCOMJSON.native-view.description -->
`native-view`
自身没有渲染内容,开发者提供对应平台原生view与
`native-view`
进行绑定,
`native-view`
将展示该view的渲染内容。vue组件集成
`native-view`
,实现可展示原生view渲染内容的vue组件
`native-view`
自身没有渲染内容,开发者提供对应平台原生view与
`native-view`
进行绑定,
`native-view`
将展示该view的渲染内容
<!-- UTSCOMJSON.native-view.compatibility -->
<!-- UTSCOMJSON.native-view.compatibility -->
<!-- UTSCOMJSON.native-view.attribute -->
<!-- UTSCOMJSON.native-view.attribute -->
...
@@ -14,7 +13,7 @@
...
@@ -14,7 +13,7 @@
### 使用场景
### 使用场景
vue组件开发规范开发集成原生view渲染内容的通用组件
`native-view`
适用于开发
[
标准模式的uts组件
](
../plugin/uts-vue-component.md
)
### 使用教程
### 使用教程
...
...
docs/plugin/uts-vue-component.md
浏览文件 @
f7c56704
## uts组件标准模式
## uts组件
-
标准模式
使用vue组件开发规范,通过
uts
插件封装原生平台view提供给native-view组件,实现组件特定功能及UI展示。
使用vue组件开发规范,通过插件封装原生平台view提供给native-view组件,实现组件特定功能及UI展示。
## 前置条件
## 前置条件
...
@@ -10,13 +10,13 @@
...
@@ -10,13 +10,13 @@
+
了解
[
vue组件
](
https://uniapp.dcloud.net.cn/tutorial/vue3-components.html
)
+
了解
[
vue组件
](
https://uniapp.dcloud.net.cn/tutorial/vue3-components.html
)
+
了解
[
native-view组件
](
https://doc.dcloud.net.cn/uni-app-x/component/native-view.html
)
+
了解
[
native-view组件
](
https://doc.dcloud.net.cn/uni-app-x/component/native-view.html
)
##
uts组件-标准模式
目录结构
##
标准模式的uts组件
目录结构
<pre
v-pre=
""
data-lang=
""
>
<pre
v-pre=
""
data-lang=
""
>
<code
class=
"lang-"
style=
"padding:0"
>
<code
class=
"lang-"
style=
"padding:0"
>
┌─components // vue组件代码
,该文件夹不强制放在此处, 可选
┌─components // vue组件代码
| ├─xxx
xxx // vue组件名称文件夹 xxx
xxx代替组件名称
| ├─xxx
// vue组件名称文件夹
xxx代替组件名称
| ├─xxx
xxx.uvue // vue组件uts代码 xxx
xxx代替组件名称
| ├─xxx
.uvue // vue组件uts代码
xxx代替组件名称
├─static // 静态资源
├─static // 静态资源
├─utssdk
├─utssdk
│ ├─app-android //Android平台目录
│ ├─app-android //Android平台目录
...
@@ -40,21 +40,21 @@
...
@@ -40,21 +40,21 @@
</code>
</code>
</pre>
</pre>
如上所示,
uts组件-标准模式的
目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放components目录下。
如上所示,
标准模式的uts组件
目录结构与UTS插件基本相同,差别在于components目录,vue组件代码存放components目录下。
其他目录文件详情可参考
[
UTS插件文档
](
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E6%8F%92%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
)
其他目录文件详情可参考
[
UTS插件文档
](
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E6%8F%92%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84
)
## 开发uts组件
## 开发
标准模式的
uts组件
### 构建
uts组件-标准模式模版
### 构建
标准模式的uts组件
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “uts组件-标准模式”,填写组件名称,以下均已 native-button 为例
HBuilder X 选中你的项目,项目根目录选中uni_modules目录,右键选择新建uni_modules插件,弹窗后分类选择 “uts组件-标准模式”,填写组件名称,以下均已 native-button 为例
//截图
//截图
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
uts组件-标准模式
目录结构`
创建完毕 HBuilder X 会自动构建模版文件,参考:
`
标准模式的uts组件
目录结构`
###
uts组件-标准模式
代码编写
###
标准模式的uts组件
代码编写
#### 添加 native-view
#### 添加 native-view
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录