如需了解国际站更多云产品，请访问国际站。https://www.huaweicloud.com/intl/
不再显示此消息
如需了解国际站更多云产品，请访问国际站。https://www.huaweicloud.com/intl/
不再显示此消息
代码结构 发布：单击功能按钮中的“发布”按钮，在弹窗中填写组件分类等信息，确定发布后可以在开发环境创建的高级页面中使用刚发布的组件。 图14 设置发布参数 组件发布成功后，在高级页面中即可使用自定义的组件。 图15 在高级页面使用自定义组件 在组件发布过程中，选取的“分类”与“领域”
如何使用WebSocket 使用说明 开发高级页面时，如果需要消息主动推送、高实时数据展示，您需要使用WebSocket来实现后台数据调用。 WebSocket是一种HTML5提供的网络传输协议。WebSocket协议支持Web浏览器，使得客户端和服务端之间可以创建长久连接并进行
在左侧导航栏中，选择“设置”，进入应用设置页面。 在菜单栏中，选择“高级设置”。 在“兼容性设置”页签中，开启“页面组件的渲染框架由Vue2升级为Vue3”开关。 图1 高级设置 当前版本的高级页面中，提供了Vue2和Vue3两种框架的组件，如果需要使用Vue2框架的组件，需要关闭“页
体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 图2 单击添加图标 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 图3 选择设置图标 单击“新增模型”，进入新增模型页面。
设置华为云Astro轻应用标准页面上传组件属性 在标准页面中，使用上传组件来上传文件。 图1 上传组件 数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定
设置华为云Astro轻应用标准页面视频播放组件属性 在标准页面中，使用视频组件来进行视频播放，支持播放的视频格式有MP4、OGV和WebM。 图1 视频播放 数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上
现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。
本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错 在应用设计器中，单击左侧导航栏中的“设置”。 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。
本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错 在应用设计器中，单击左侧导航栏中的“设置”。 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。
现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。
} 上述代码中定义的展示图片文件可使用其他图片代替，将图片放到DisplayWidget目录中即可正常使用。 本示例代码中，widgetBasePath变量为组件包上传后的路径，在组件模板中已包含获取此变量的逻辑，在此直接使用即可（此例也展示了组件中如何引入本地图片的基本方法）。
lobal_Vue”的，需要写在“global_Vue”之后。依赖关系的详细介绍，请参见如何引入第三方库。 在“widget_demo_i18n.js”的render方法中，使用平台提供的“HttpUtils.getI18n”方法返回一个“i18n”变量，并新建Vue实例传入该“i18n”变量。
现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。
输入框是基础输入组件，输入框中的内容可以通过鼠标或键盘输入。输入框一般在有需要输入内容、提供组合型条件查询或有其他资料需要提交时使用。 图1 输入框组件 数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-mod
布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。
get的渲染核心JS。“路由导航(示例)”组件是基于Vue Router（ Vue.js官方的路由管理器）开发的，请参考Vue Router的代码开发规范，修改组件包中的文件。 本示例场景中，增加如下加粗代码。 var Vue3Navigator_Widget = StudioWidgetWrapper
现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。
布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。
自定义登录组件。如果您想要自定义登录组件的开发方法，可参考本章节执行。 自定义登录组件 进入创建“设备维修管理系统”应用中创建的应用。 在左侧资产下的组件模板中，单击“widgetVue3Template”，再单击“下载”。 图1 下载组件模板 在弹出的窗口中，输入组件名称，并单
并加载到页面中进行使用。在经典版应用设计器的左侧列表中，单击，在“高级页面 > 库 > 租户”中，可查看自定义的库。 场景描述 本章节以某Widget中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库，并在Widget使用库。 操作步骤 将自定
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
您即将访问非华为云网站，请注意账号财产安全
